トップ > スキル : Web > CSSリファレンス

Web

cssリファレンス

CSS(スタイルシート)では、さまざまなプロパティが用意されています。「何を表現するプロパティなのか」、「どのような値を指定すべきか」をしっかりと覚えておくことで、自分の思うようなデザインやレイアウトを整えていくことができます。

「何を表現する」とは、要素全体の幅や高さ、背景色、上下左右の余白の調整などを行って見栄えを整えたり、装飾するための属性となります。これが、CSSの「プロパティ」になります。その表現はどれくらいにするのか、どう調整するのかが「値」になります。

cssフォーマット

値の指定方法

各プロパティによって、値の指定方法が異なります。フォント、ボックスや余白などのサイズは数値を指定します。色は色コードや色名などを指定します。行揃えなどの文字の配置は、左、中央、右などのように決まっている値を指定します。

サイズ指定

数値を指定する場合は単位にも注意が必要となります。
CSSを使って文字やボックスなどのサイズを指定する方法には「相対単位」、「絶対単位」の2種類あります。
使用頻度ととしては、相対単位のほうが圧倒的に多いです。その理由は、相対単位であれば閲覧者が意図的にブラウザの文字の大きさを調整できるからです。具体的に述べれば、高齢者がホームページを見た時に、文字が小さいと感じたら、ブラウザ上で文字の大きさを変更できます。制作者が絶対単位で値を指定した場合は、ブラウザ上で文字の大きさを調整しても、文字サイズは変更できないという不親切なものになってしまいます。アクセシビリティ対策からの観点からも相対単位を使った方が良いです。

相対単位と絶対単位をまとめると以下のような表になります。

相対単位 絶対単位
em その要素のフォントサイズを1として考える in インチ(1インチは2.54cm)
ex その要素の小文字の高さを1として考える cm センチメートル
px 画面上のピクセルを1として考える mm ミリメートル
% 場面によって違うが、親要素を基準として考える pt ポイント(1ポイントは1/72インチ)
pc パイカ(1パイカは12ポイント)
サイズ指定

カラー(色)指定

文字の色や背景色などは、カラーコードや色名などを指定します。カラーコードで色を指定するにはRGB値を使います。代表的な指定方法には以下のようなものがあります。

カラー指定1

赤・緑・青のそれぞれの値を2ケタで指定する方法です。この方法でフルカラー色を利用することができ、一般に多用されているRGB値です。色の数値は16進数で表現するので、00~FFの範囲で指定します。

カラー指定2

上記の6ケタで表現する方法を3ケタに省略した方法です。赤・緑・青のそれぞれ2ケタが同じ数値(ゾロ目)の場合のみに利用できます。例えば、#336699を#369として省略できますが、#306699であれば赤が30であり2ケタがゾロ目でないので省略はできません。

カラー指定3

赤・緑・青それぞれの色の割合を指定する方法です。最小値が0で最大値が255となります。例えば、rgb(0,0,255)であれば、青のみ最大値となっているので、青色になります。

カラー指定4

上記のrgbの指定値に%を使った割合の指定方法です。パーセントなので数値は0~100の範囲で表現します。色の配分割合と考えれば分かりやすいですが、どれくらいの分量で色が出来上がるか分かりにくい点もあります。

通常、カラーコードは「#」を付けた6ケタ数値が利用されています。また、OSやディスプレイに関係なく、どのパソコンでも同じ色を再現するには、「Webセーフカラー」を使用します。このWebセーフカラーは、RGBの数値はそれぞれゾロ目で表現されているので、3ケタ数値で省略した方法で記述することができます。


キーワード指定

文字の行揃え、文字のスタイル、リストの表示、レイアウトの位置などは数値でなく、決められている定数を指定します。この定数のことを「キーワード」と呼びます。
例えば、文字の行揃えには、左揃え、中央揃え、右揃えのパターンがありますが、それぞれleft、center、rightというキーワードを値に指定します。

キーワード指定

CSSで利用するプロパティに適切な値を指定することで、柔軟なデザインやレイアウトを調整することができます。数値であれば「単位」、キーワードであればそのスペルに間違いのないように記述します。

【CSSリファレンス】