CSSとは

CSS(Cascading Style Sheets)とはHTMLを装飾するために使用する新たな言語です。一般にスタイルシートとも呼ばれています。HTMLでは基本的にレイアウトの指定を避け、CSSを使って指定するのが良いとされています。このCSSではHTMLでもできる文字色、背景色、サイズ指定など様々なことに加え、さらに多くのことが出来ます。

なぜ、HTMLでレイアウトをすることを避けるべきなのでしょうか。例えばページ内の複数の場所でフォント色を変えるHTMLを書いたとします。しかし、メンテナンスをしたときこの色を変えたいと思いました。HTMLの記述では変更部分を全て書き換えなければなりません。大変面倒な作業です。しかし、CSSはそれらを一括で行う優れものなのです。

CSSを使用することは大きなメリットではありますが、HTMLについて良く理解しておく必要があります。HTMLが使いこなせて、初めてレイアウトの段階に踏み込みましょう。

id,class属性

CSSを使い始める前にまずはidとclassについて知っておいていただく必要があります。これは、任意のタグに印をつけるために使用します。ここで任意のタグと言うのは、CSSの指定を受けるタグになります。これを行うことで、ページ内のどこにあるかも分からない特定のタグを簡単に後から装飾できるようになります。

書き方にルールがあるので注意です。1つのidはページに1つだけ、classはいくつでも指定することができます。また、id名、class名は任意のアルファベットから始まる半角英数字で記述します。以下は記述例です。

サンプルコード

<a href="./" id="link1">
<a href="./" id="link2">
<img src="../img1.gif" class="image">
<img src="../img2.gif" class="image">

span,divタグ

id、classに続いて、spanとdivを紹介します。これらはHTML4.01までインライン・ブロックと明確な定義がされていましたが、HTML5でその定義が廃止されました。しかしながら、インライン・ブロックを多少理解していないと使いにくいかもしれません。

端的に上記のタグを説明しますと、任意の場所を括りたいときに使います。インライン。ブロックを単純に考えるならば、spanは行内を、divは段落より大きなものを括ると考えてください。HTML5ではfontタグが非推奨です。文字の一部だけフォントを変えたいときはspanを使いましょう。

サンプルコード

<div><p>
文章の<span style="color: #00f">ここだけ</span>色を変えてみる。
</p></div>

実行結果


文章のここだけ色を変えてみる。

上記ではCSSを使用して色を変えています。詳しいことは次項で紹介していきます。span、divは必ずしも必要な要素ではありませんが、CSSを使う上ではなくてはならないタグです。