CSSとは

この記事ではCSSについて紹介します。

CSS (カスケーディングスタイルシート)はスタイルシート言語であり、HTMLで記述された文章の体裁や見栄えを表現するために使用します。

CSS 規則セットの構造

p {
  color: red;
}

全体の構造は規則セットと呼びます。

セレクター(Selector)

これは規則セットの先頭にあるHTML要素名です。例の場合は<p>要素になります。

別の要素をスタイル付けするには、セレクターを変更する必要があります。

宣言(Declaration)

要素のプロパティのうち、スタイル付けしたいものを指定します。例の場合はcolor: red;の部分です。

プロパティ(Property)

HTML要素をスタイル付けするための方法です。規則の中で影響を与えたいプロパティを選択します。例の場合はcolorは<p>要素のプロパティです。

プロパティ値(Property value)

プロパティの右側にはプロパティ値があります。各プロパティには多くのプロパティ値があります。例の場合はredになります。

一つの規則セットで複数のプロパティを宣言できます。

p {
 color: red;
 width: 500px;
 border: 1pxsolid black;
}

複数の要素の選択

複数のセレクターをカンマで区切ることで複数の要素を選択できます。

p, li, h1 {
 color: red;
}

さまざまな種類のセレクター

セレクターにはさまざまな種類があります。以下にセレクターの一覧を示しています。

セレクター名	例
要素セレクター	p, <p>を選択
ID セレクター	#my-id <p id="my-id">
クラスセレクター	.my-class <p class="my-class">
属性セレクター	img[src] <img src="myimage.png">
擬似セレクター	a:hover <a>のマウスポインターがリンク上にあるとき

 

CSS：ボックスのすべて

CSSのレイアウトは、主にボックスモデルに基づいています。四角の要素を組み合わせています。

代表的なプロパティは以下になっています。

padding

コンテンツの周囲のスペースです。

border

paddingのすぐ外側にある実践です。

margin

要素の外側の周りの空間です。

本文のスタイル付け

body {
 width: 600px;
 margin: 0 auto;
 background-color: #FF9500;
 padding: 0 20px 20px 20pz;
 border: 5px solid black;
}

この例ではbodyの要素をスタイル付けしています。

widthによりbodyは常に600ピクセルの幅になります。

marginにより上下のmarginは0になり左右はautoになります。marginに２つの変数を渡すと一つ目の要素は上下、二つ目の要素は左右の要素に反映されます。

background-colorにより背景色は明るいオレンジ色になります。

paddingにより上下左右のパディングを指定できます。この例の場合は上は0,右は20px、下は20pxになります。

boderにより境界の太さ、スタイル、色の値を設定します。この例ではbodyの周りに5pxの太さの境界になります。

autoとは？

autoは残った水平方向の余白を左右に均等に配分する特別な値です。