HTML04_CSSとは

こんにちは! Ben@二日酔いです。
今回からHTMLの見栄えを決めるスタイルシートの言語CSSをノートします。はまさに今、会社のWEBサイトを一新すべく、CSSファイルを一から作り直しました。まだ完成ではないですが、この作業を経てCSSの重要性を改めて認識することになりました。

20160116a.PNG
古いバージョンのHTMLでは、文字の太字は<b>タグ、文字の大きさや色は<font>タグを使っていました。でもそうすると、HTMLファイルの中に内容とデザインがごっちゃになって含まれることになります。また、背景など各ページ共通のものを変更するとき、すべてのページを変更する面倒くささがあります。

そこで、デザインを切り離してHTMLは内容のみ、CSSにはデザインのみを記述する方式へと転換が進んでいます。上記の古いタグは段階的に廃止する方向で進んでいるので、このノートでも古い記述は極力使わないようにします。

20160116b.PNG
これはCSSの一番単純な書き方です。タグの中にstyle属性を含めて、値としてCSSを記述します。CSSの書き方は次の外部ファイルのときも同じですが、プロパティ名(上記ではwidth)とその値(同400px)をコロン(:)で区切ります。複数のプロパティを設定するときはセミコロンで区切ります。外部のCSSファイルにするときは値の後に必ずセミコロンを付けます。

20160116c.PNG
外部のCSSファイルを読み込むときの方法です。CSSファイルはセレクタと呼ばれる要素名それぞれについて、プロパティ名とその値をひたすら羅列しているファイルです。上記の例ではmenuというクラスについて幅を400pxにしなさいというものです。ちょっと飛びますが、クラスとIDのセレクタについて説明します。

クラスセレクタ
HTMLの特定の要素に対してスタイルを適用させるものです。ご覧のようにCSS内のmenuクラスのスタイルを設定して、HTMLではタグ内のclass属性でmenuという値を設定すれば適用されます。
IDセレクタ
クラスと同じく適用させたいところに作用させますが、IDはその名のとおりHTML内の中で1つに識別できるよう1か所のみに指定します。タグ内の記述はID="menu"となり、CSS内ではクラスは最初がドット(.)ですが、IDはシャープ(#)で始めます

クラスは飛行機のファーストクラスのように、同じ規格を複数指定できます。たとえばファーストクラスの座席シートの色を変えるとき、CSSを使わないとすべての座席のタグを変えなければなりませんが、外部CSSファイルでスタイルを指定すれば、「ファーストクラスの座席の色=緑」と指定するだけで、HTML内のファーストクラスが全て変わります。そのため、全体の見栄えの統一に便利です。

さらに、対検索エンジン(SEO)的にもやや有利になるなど、CSSの外部化は色々メリットがあります。よく使う記述については次回ノートします。

この記事へのコメント


この記事へのトラックバック