CSSの書き方【現役エンジニアが解説】
今回は、CSSの書き方について、基本的な書き方と擬似要素や擬似クラスの書き方に分け、簡単に解説していきます。
基本的な書き方
CSSはHTML中ではheadタグ内のstyleタグ内に書きます。
要素(タグ名)やクラス(.クラス名)、id(#id名)ごとに{}で区切り、装飾します。
body{ font-size:12px; }
上記のコードでは、body要素の中の全ての要素の文字サイズを12ピクセルにしています。
擬似要素の書き方
擬似要素を使うと、要素のある部分に対し、スタイルを追加できます。
要素::before{}と書くことで、要素の手前にスタイルを追加することが可能です。
span.hoge::before{ content:"この文字をhogeクラスのspan要素より手前に追加できます。"; background-color:orange; }
上記のコードでは、hogeというクラスを持つspan要素の手前にオレンジ色の文字を追加しています。
擬似クラスの書き方
擬似クラスを使うことで、要素が特定の状態のときのスタイルを設定できます。
要素:hover{}と書いた場合、要素の上にカーソルがあるときにそのスタイルが適用されます。
button.hoge:hover{ opacity:0.5; }
上記のコードでは、hogeというクラスを持つbutton要素の上にカーソルがあるとき、要素の不透明度を50%にします。