【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;
}