シャフト株式会社

cssの基本

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の読み込み方法が間違っているかの、どちらかのパターンが多いです。

Copyright c SCHAFT Inc. All Rights Reserved.