CSSとは #

CSSの基本事項についてを述べる。

CSSは、HTMLに組み込む形で使用する言語で、HTMLで作成した文書に対しCSSでどの部分をどのように装飾するかを指定する形で利用する。

利用方についてを以下で述べる。

CSSの書式 #

CSSの記法としては、大きく分けてHTML文書のどこに適用するかを示すセレクタと、具体的にどのような装飾を行うかを示す宣言ブロックからなる。

宣言ブロックの中には、各宣言をセミコロン(;)区切りで書き、宣言はプロパティ名とプロパティ値をコロン(:)区切りで記入する。

表記例は以下の通り。

p 
{
    color: white;
    background: red;
}

この例のうち、最初の「p」がセレクタになり、その後の中括弧{}部分が宣言ブロックである。

HTML文書への組み込み方 #

CSSをHTML文書に組み込む方法はいくつかある。

link要素を使う方法 #

一つ目は、link要素を用いてCSSを組み込む方法である。

link要素は前述の通り、HTML文書に関連する外部ファイルやリソースを示すための要素である。

外部スタイルシート(スタイルシートだけを書き込んだファイル)を組み込む際にも、このlink要素が利用できる。

link要素のrel属性ではstylesheet、href属性ではそのスタイルシートのアドレスを指定する。

例

・・・
<head>
    ・・・
    <link rel="stylesheet" href="style.css">
</head>
<body>
        ・・・
</body>
・・・

style要素を使う方法 #

style要素は、要素内容にスタイルシート言語を記載する事で、そのスタイルシートの内容をHTML文書に組み込むことのできる要素である。

style要素は、head要素の中に記載する。

例

・・・
<head>
    ・・・
    <style>
        p 
        {
            color: white;
            background: red;
        }
    </style>
</head>
<body>
        ・・・
</body>
・・・

style属性を使う方法 #

HTML文書でCSSを組み込みたい要素の中に、グローバル属性のstyle属性を指定して値に具体的なCSSのコード(宣言のみ)を入れてやると、その要素にCSSが適用される。

使用例

<p style="color: white; background: black">
style属性を使ってp要素にCSSを適用してみました。
</p>

表示例

style属性を使ってp要素にCSSを適用してみました。

ボックス #

HTMLの各要素はボックスと呼ばれる四角い領域に表示される。ボックスにはさらに、境界線であるボーダー、ボーダーと実際の要素内容を表示する領域との余白であるパディング、ボーダーの外側の余白であるマージンと呼ばれる部位に分けられる。それらを図で示したものを以下に示す。

CSSでは、これらの部位を自由に設定することが可能である。

長さ・大きさの単位 #

CSSでは大きさや長さを指定することがあり、その際にそれぞれ単位を用いて表す。

CSSで利用する主な単位は、以下の通りである。

フォントに対する相対的な長さを表す単位

・	em	・・・	要素のフォントサイズを1とした単位
・	rem	・・・	ルート要素のフォントサイズを1とした単位
・	ch	・・・	「0」の幅を1とした単位

絶対的な長さを表す単位

・	px	・・・	ピクセル
・	pt	・・・	ポイント
・	in	・・・	インチ
・	cm	・・・	センチメートル
・	mm	・・・	ミリメートル