CSS(Cascading Style Sheets)とは、ホームページの見た目を定義する為の仕様です。
昔はHTMLに色やフォント等の見た目を決める指定を直接書いていたのですが、本来HTMLは構造と「文章・画像・数値」等の伝えたいものを書くためのものです。
その為、最近は「見た目はCSSに任せよう」というのが当たり前になっています。
今からホームページ作成を勉強する皆さんは、見た目はCSSで記述する癖をつけておきましょう。
CSSの基礎
CSSの記述は、大きく分けて3種類あります。
- タグの属性としてCSSを記述する。
- HTMLのhead内にまとめて記述する。
- HTMLファイルとは別のCSSファイルにまとめて記述する。
この3つは用途に応じて使い分けると、ホームページ作成がぐんと楽になります。
1)タグの属性としてCSSを記述
[用途]ここ一箇所でしかその指定をしない場合に使う。
記述の仕方は、タグ内にstyle=”CSS指定”と書きます。
このCSS指定部分は、CSSリファレンスページで色々紹介しています。
一回に限り一部分の文字の色を緑にする
<span style=”color:green;”>ここが緑にしたい文字</span>
このように、HTMLファイル内の一部の見た目を簡単に変えることが出来ます。
一番手軽ですが、繰り返し出てくる要素の見た目を皆同じように変更するのには向いていません。
(出てくるたびに同じ記述をしなければいけないので。)
2)HTMLのhead内にまとめて記述
[用途]記述したページ内全てに適用する見た目指定を記述したい場合に使う。
記述の仕方は、<head>～<head>の間に
<style type=”text/css”><!–
CSS記述
–></style>
と書きます。
このCSS指定部分は、CSSリファレンスページで色々紹介しています。
ページ内の全てのリンクの文字色を赤くする
<head>
…中略…
<style type=”text/css”><!–
a {color:red;}
–></style>
…中略…
</head>
<body>
<p>
日本における2大検索エンジン<a href=”http://www.yahoo.co.jp”>Yahoo</a>と<a href=”http://www.google.co.jp”>Google</a>。
</p>
</body>
上の例だと、YahooとGoogleの2箇所にリンクを張っていますが、Yahoo・Googleの両方とものリンク文字色が赤くなります。
もし1)の方法で同じことを再現しようとすると、各aタグの中にstyleを書かなければいけなくとても面倒です。
このように、記述したHTMLファイル内に出てくる全ての特定タグ等の見た目を一気に変えることが出来ます。
その1ページでしか使わないような見た目を指定したい時はこの方法を使うといいでしょう。
3)HTMLファイルとは別のCSSファイルにまとめて記述
[用途]ホームページ内の複数ページで何回も同じ見た目を指定したい時に使う。
これは、xxx.css(xxx部分は任意の半角英数名)のテキストファイルを作って、その中にCSS記述をしていくというものです。
(2)の例で出ていたa {color:red;}のような記述をファイル内に必要なだけ書きます。
ただし、その指定を適用したいページはhead部でCSSを読み込むという記述をしなければなりません。
なお、CSS指定部分はCSSリファレンスページで色々紹介しています。
ホームページの全ページにある全てのリンクの文字色を赤くする
<head>
…中略…
<link rel=”stylesheet” href=”style.css” type=”text/css” />
…中略…
</head>
<body>
<p>
日本における2大検索エンジン<a href=”http://www.yahoo.co.jp”>Yahoo</a>と<a href=”http://www.google.co.jp”>Google</a>。
</p>
</body>
上の例では、head部の赤字の部分でstyle.cssというファイルを読み込んでいます。それにより、style.cssというCSSファイル内に記述したCSS指定をそのページに適用することが出来ます。
この場合、複数ページの見た目に関して一箇所で指定できるのがメリットです。つまり、CSSファイルを変更すれば、そのCSSファイルを読み込むよう指定した全ページの見た目を一気に変更出来るということです。
メニューやタイトル等、ホームページ内で見た目を統一したいものをCSSファイルにまとめて書いておくといいでしょう。