CSSとは

Pocket

CSS(Cascading Style Sheets)とはカスケーディング・スタイル・シートの略称で、Webページのスタイルを指定するための言語です。Webページの見た目とは文字の大きさや色、背景色のことを指します。

CSSはHTMLと組み合わせて使用します。HTMLはWebページの情報や構造を定義し、CSSはWebページの装飾を指定する言語。HTMLのタグで囲んだ情報に装飾を施すのがCSSの役割です。

CSSの記述方法

CSSを記述するときに重要になるのが「セレクタ」と「プロパティ」、そして「値」です。

セレクタとは、CSSで指定したスタイルを適用する範囲を指定する要素のことです。
プロパティはCSSで変更する項目を指し、「何を」変更するか決定します。値はプロパティを「どうするか」決定するものです。

実際にCSSを記述した例を次に示します。

h1
{
color:blue;
font-size:30px;
}

この場合セレクタを「h1」に指定したので、HTMLタグ内の<h1></h1>で囲まれた部分に記述したスタイルが適用されます。何を変更するか決定するプロパティはcolorとfont-sizeです。ここでは色と文字サイズを変更すると設定しました。どのように変更するか決定する値はblueと30pxです。色を青に、文字サイズを30pxに変更するよう指定しました。

セレクタの設定は{}で囲んで、どのプロパティと値を設定しているか他のセレクタと混同しないように分けましょう。プロパティと値の間はコロン(:)を加えることで2つの項目を区別します。1組のプロパティと値の設定が完了したら、他の要素と交わらないようにセミコロン(;)でふたをしましょう。

CSSはHTMLタグを見やすくする効果がある
CSSはHTMLタグ内の情報を外から装飾する外部ファイルです。CSSを適用したタグは次のように表示されます。

<html>
<head>
<link rel=”stylesheet”href=”ここにCSSファイルを埋め込みます。”>
</head>

<body>
<h1>セレクタにh1と記述したらここにスタイルが適用されます。</h1>
</body>
</html>

上述のようにCSSファイルをhead内に<link rel=”stylesheet”href=”CSSファイル名”>として埋め込みます。CSSの情報はbodyに記述した情報に適用される仕組みです。

HTMLで1つずつ直接文字サイズや色の指定をすることも可能ですが、情報が多く複雑になるという問題があります。外部ファイルであるCSSに装飾情報を記述することで、HTML内の情報を簡潔で分かりやすくすることに役立ちます。

Pocket