css

CSS基本 – 超入門

CSSとは何かを理解する前に、簡単な例からCSSの動きを理解します。
htmlの基本を分かっていることを前提とします。htmlの基本はこちらを参照して下さい。
HTML基本 – 超入門
cssとは
cssはhtmlのスタイルを記述するファイルです。
cssの例
概念や理由を理解する前に簡単なcssを使用してみます。
以下のhtmlファイルとcssファイルをデスクトップに用意し、ブラウザで表示して見ましょう。
文字の色が赤くなります。

index.html

test.css

実行結果
セレクタ
スタイルを割り当てる対象を セレクタ と呼びます。
先ほどのtest.cssを見てみましょう。 sample という classセレクタ に対してスタイルを設定しています。
classセレクタに設定した内容を見てみましょう。
colorred に設定しています。
こうすることで文字の色が赤くなります。
cssではcolorの部分をプロパティ、redの部分をと呼びます。
基本的にcssの記述は以下のような形式となります。

プロパティや、プロパティに設定する値は沢山あるので、随時調べて覚えましょう。
基本的なセレクタの種類
cssでスタイルを割り当てるセレクタはいくつかありますが、基本的な以下3つを紹介します。
要素
htmlの要素をセレクタに使用できます。
以下の例はpタグの文字を青色にしています。
こうすると全てのpタグの文字が青くなります。

index.html

test.css

実行結果

全てのhtmlタグが対象となるので、pタグだけでなく、bodyタグやhtmlタグに対してもスタイルの設定が出来ます。
idセレクタ
id属性をセレクタに使用できます。
id属性の詳しいことを触れませんが、id属性の値はブラウザで表示するhtml要素の中でユニークでなければなりません。
今はid属性をセレクタに使用出来ると覚えておきましょう。
id属性を使用するセレクタをidセレクタと呼びます。idセレクタを使用する場合、先頭に # をつけることに注意しましょう。
以下は、id属性の値が sample_id の文字が緑になります。

index.html

test.css

実行結果
classセレクタ
class属性をセレクタに使用できます。
class属性を使用するセレクタをclassセレクタと呼びます。
class属性の値はhtml内でユニークでなくて良いです。したがって、同じスタイルを使い回したい場合はclassセレクタを使用しましょう。
classセレクタを使用する場合、先頭に .(ドット) をつけることに注意しましょう。
以下は、class属性の値が sample の文字が赤くなります。

index.html

test.css

実行結果
まとめ
次回はセレクタを複数使用して、cssの適用順位を理解します。
次回:セレクタの基本
▼ CSSに関する記事の一覧をみる
こちら
© DeNnie.Lab All Rights Reserved.