2020/12/24

CSSの書き方【現役エンジニアが解説】

PROGRAM

今回は、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%にします。

• facebook
• Tweet
• Read Later