スタイルシートの補足

スタイルシートを理解するには、最低限知っておかなければならないことがまだもう少しあります。

ブロック要素とインライン要素

HTMLにも関係するんですが、ブロック要素というのは見出しや段落などのように文の本文を構成する部品のことです。 それに対してaタグやstrongタグなどはインライン要素といって、ブロックの中で役割や機能を担うものです。 単純な見分け方としては、ブラウザで表示された時に前後が改行されるのがブロック要素、 改行されないのがインライン要素です。

<div>〜</div>と<span>〜</span>

HTMLのところでは触れませんでしたが、divとspanというタグがあります。 divで囲われた部分は1つのブロック要素として扱います。 spanで囲われた部分はインライン要素として扱います。 例えば、段落の中にあるHTMLタグで指定されていないテキストのスタイルを変えたい場合、 そこをspanタグで囲っておくことでスタイルシートを使ってテキストのスタイルを変更出来るわけです。 divもspanもブロックとインラインという以上の意味はなく、 HTMLの文章構造には影響を与えません。

スタイルシートで使う色や単位

スタイルシートで使う色については、 rgbやシステムカラーによる指定方法がありますが、全部説明しだすとキリが無いので、 詳しいことは関連書籍や他のホームページを参照して下さい。 単純にblackやred、blueなどの色名でも指定できるので、いろんな色名を入力して遊んでみて下さい。 スタイルシートで使う単位についてもいくつか種類がありますが、px(ピクセル)や%を使うことが一般的です。

ボックスという概念を理解しよう

HTMLタグに囲われた部分というのは箱(ボックス)になっていますが、 スタイルシートを適用しなければ見ることができません。 ボックスは内容を表示する部分とマージン、パディング、 そして枠線(ボーダー)から構成されています。 これらの幅や大きさ、そして色などを様々に変えることでホームページのデザインやレイアウトをしていくわけです。
ボックス

スタイルシートの基本についてのまとめ

ということでスタイルシートは組み合わせが何通りもあるし、色々覚えることがあって少しややこしいです。 セレクタと属性と値の組み合わせを変えることで、HTMLのスタイルをかなり細かく指定することができます。 なので、ホームページのレイアウトやカスタマイズの幅が相当広がりますが、 自分の思うようなレイアウトを実現しようと使いこなすには結構時間がかかると思います。

スタイルシートを使ってボーダーの枠線や背景、 テキストの色などをちょっと変えるだけでもホームページの見た目はだいぶ変わります。 スタイルシートの初心者は、そういう手がつけやすいところからホームページのレイアウトを変更するというのも1つの手です。

以上はスタイルシートに関する基本的なことだけですが、 この基本を使いこなすだけでも十分ホームページのデザインやレイアウトは豊かになります。 ホームページのデザインを少し複雑にしようと思うとHTMLでは追いつかないので、 スタイルシートの基本だけでもマスターすることをオススメします。
スタイルシートの本

<<スタイルシートとHTML
スタイルシートの属性>>