CSSとは
見栄えを装飾する技術
CSS はCascading Style Sheet の略称で、単に「スタイルシート」と呼ばれることもある。
CSS では、テキストの見栄えとして、大きさ、太さ、色などを設定することが出来る。
テキストの左寄せ、中央寄せ、右寄せなど配置の設定も可能で、テキストに限ら
ず画面全体や Web ページの一部分といった領域の背景色を設定したり、余白を設定することも出来る。
有名な Web サイトの美しい見栄えも、ほとんどが HTML と CSS で記述されている。CSS が持つ豊かな表現力は、無限大である。
Webサイト全体でスタイルを一元管理
CSS は、スタイルの定義をまとめて一つの「CSS ファイル」に記述する。
CSS ファイルを作成しておくと、Web サイト全体でスタイルを共有出来るようになる。
複数の Web ページから CSS ファイルを共有すると、スタイルを一元管理できるようになり、定義したスタイルを繰り返し使うことが出来る。
またこれによって、見栄えを変更する際にも CSS ファイルに定義したスタイルを変更するだけで、Web サイト全体に変更を反映させることが可能となる。
CSS ファイルを共有することは、Web ページ制作の作業効率を高めることになり、とても大きなメリットがあると言える。
CSSファイルの読み込み
HTML で CSS を利用するためには、前述の通り CSS ファイルと呼ばれる専用のファイルにスタイルを記述して、HTMLファイルからCSSファイルを読み込む必要がある。
HTML から読み込むには、HTML ヘッダー内で「link タグ」を使用する。
link タグに href属性を記述して、属性値で CSS ファイルの URL を指定する。
URL は、絶対パスでも相対パスでも指定出来る。
このように、CSS ファイルを HTML から読み込む方法を使うと、全ての HTML ファイルで共通のスタイルを簡単に利用出来るようになる。
HTMLファイルの中に直接スタイルを記述する方法もあるが、Web ページ制作の現場ではあまり使われないので、ここでは割愛する。
また、link タグの記述は少し複雑だが、記述内容はいつも同じなので、コピーアンドペーストで済ませることが出来る。
記述方法を完全に覚えなくても問題はない。
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>CSSの構造と名称
CSS の構造と名称は下図のようになっている。
記述の先頭部分を「セレクタ」と呼ぶ。
セレクタは HTML のタグと一致させることも、自由に名前を付けることも出来、自由な名前を付けた部分を「クラス」と呼ぶ。この図では、p と記述されているので、pタグのスタイルが定義される。
そして、pタグにexampleというクラスを設定している。
また、中括弧で囲われた範囲を「宣言部」と呼ぶ。
宣言部がスタイルを定義した 一つのまとまりになる。
宣言部の中は「プロパティ」と、コロンに続けて「値」がある。
プロパティは、「何を」設定するのかを指定し、値は「どのように」設定するのかを指定する。
HTML とは構造も名称も異なるが、しっかり理解したいものである。
CSSの記述方法(一行ずつ記述)
CSS では、一つの宣言部にまとめて複数のプロパティを指定出来る。
その際にはHTML と同じように、読みやすくするための改行を入れることも出来る。一般的には、セレクタと宣言部の開始を意味する中括弧を 1 行で記述して、その下にインデントを入れながらプロパティと値を対にして 1 行ずつ記述する。
プロパティをまとめて記述する場合には、値の後にセミコロンを記述して、それぞれのプロパティを明確に区切らなければならない。
最後の行は、宣言部の終了の意味で中括弧を閉じる。
なお、CSS の記述には半角の英数字と記号を使用する。
p.example {
color: red;
font-size: 16pt;
}CSSの記述方法(まとめて記述)
CSS を読みやすくするためによく使われる、もう一つの記述方法がある。
フォントの設定など、類似するプロパティが多く行数が増えてしまう場合には、1 行にまとめて記述することもある。
まとめることで行数が減り、CSS 全体の可読性が高まる。
記述方法に絶対的な正解はないが、読みやすさや保守のしやすさを考慮して、ケースバイケースで調整すると良い。
p.example {
font-size: 16pt; font-weight: normal; font-style: normal;
}
p.example2 {
font-size: 20pt; font-weight: bold; font-style: italic;
}