FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【CSS入門】ブロック要素とインライン要素の操作、絶対指定と想定指定、疑似クラス

【今回の紹介】


前回と同じく、友人と一緒と企んでいることに関連してCSSの技術が必要になったので
もう一度入門から体系的に学ぼうとおもったのでそのメモ


参考(.インストール)


【内容】

■ブロック要素とインライン要素

 ブロック要素:前後に改行が入る
 インライン要素:前後に改行が入らない


 HTML要素はデフォルトでブロック要素なのか、インライン要素なのか決まっている

  例)div,h1などは段落が変わるブロック要素
  例)span,aなど葉段落が変わらず横並びになるインライン要素

■display:インライン要素、ブロック要素を操作できるのが、display属性

 本来はブロック要素だけど段落は変えたくないときなど使用。


 ・display:inline; →前後に改行が入らない
 ・display:inline-block; →前後に改行が入らないかつ高さと幅の設定が有効
 ・display:none; →表示と非表示を切り替える際に使用する



■overflow:要素内のコンテンツがあふれたときの表示方法を設定


・overflow: scroll; →スクロールで表示する
・overflow: visible; →すべて表示する
・overflow: hidden;  →はみ出た部分は表示しない



■posion要素:要素の配置を指定する


static:初期値であり、配置方法を指定しない(デフォルトはこの設定)
absolute:絶対位置への配置
relative:相対位置への配置
fixed:絶対は位置、スクロールしても位置が固定される
※fixedは固定メニューなどで使える

position:relative;	
position: absolute;
/*親要素から判断した位置を絶対的に決める*/
top: 20px;
right: -20px;

 fixの例

/*親要素から判断した位置を絶対的に決める*/
position: fixed;
bottom: 0px;
left: 0px;

参考情報


※ absolute、relativeに関してうまく理解しきれていないので、今後何かを作成する中で確かめていく


■z-index


static以外の要素に関して要素が重なった場合は、どちらかを上に出すかを決める
z-indexの数字が上の方が上に表示される


#div1{
	position: relative;
}

#label{
position: absolute;
color: red;
top: 20px;
right: 20px;
z-index: 2;
}

#ft{
position: fixed;
top: 0px;
left: 0px;
color: #00000F;
background: #111111;
z-index: 1;
}

■疑似クラス:ある特定の状態にあったらCSSをかえる

 以下のような種類がある
  
  :link →未訪問のリンクを指定
  :visited →訪問後のリンクを指定
  :hover →マウスをのせたときに
  :active →クリック中の指定



a要素の例

a:link{
color:blue;
}
a:visited{
color: gray;
}
a:hover{
font-weight: bold;
}
a:active{
background: pink;
}
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }