cssとは
css(Cascading Style Sheets)(カスケーディング・スタイル・シート)とは、ウェブページの「スタイル」を指定するための言語です。
従来はデザイン部分(例えば、文字の色を赤にするとか、文字サイズを大きくするとか)も、すべてhtmlの中で記述していました。しかしhtmlはあくまで文書構造で、デザイン部分はhtmlから切り離すことになり、cssが生まれました。cssでデザインを規定することができるため、たとえ数万ページに及ぶような膨大なhtmlを抱えていたとしても、cssファイルを一箇所修正するだけで、全ページのスタイルを瞬時に切り替えることができるようになる、大変便利な言語です。現在のウェブページ作成では、htmlとcssは切っても切り離せない、重要な関係性を持っています。
cssの記述場所
cssが記述できる場所は、インラインcss、ヘッダーcss、外部cssと3箇所あるのですが、インラインやヘッダは使用する機会がほとんどありません。ですので、最重要な外部cssについてまとめます。
外部cssというのは、読んで字の如く、htmlファイルとは別にcssファイルを作成する方法です。htmlファイルとは別に保存した「●●●.css」というファイルにスタイル部分を記述しておき、各htmlファイルからそのcssファイルを読み込むようにします。
外部cssの読み込み方
<link rel="stylesheet" href="●●●.css" type="text/css" media="screen">
上記コードを、cssを読み込ませたいhtmlファイルの、headタグ内に記述します。
cssの書き方
p{
color:green;
font-size:24px;
}
上記はcssの書き方の一例です。このように記述したcssファイルをhtmlで読み取ると、「pタグ」で囲われた文字色は「緑」になり、フォントサイズも「24px」になります。ページ内のpタグで囲われた全箇所に一括で適用されます。
書き方のポイントとしては、各命令行の最後に「;」が入っていることに注目してください。命令の最後は、必ずセミコロンで閉めなければなりません。これはルールとして決まっていますので、理屈ではなく覚えてしまいましょう。cssがうまく反映されない、という場合は、大抵はこの「;」忘れか、外部cssの読み込み方法が間違っているかの、どちらかのパターンが多いです。