Table of Contents
ページの見栄えを良くする
これまで自己紹介のページを作ってきましたが、色数も少なく、画面が左に寄っていたりと、見た目がちょっと…と思われた方もいるかもしれません。
今回はページのレイアウトや装飾を行う CSS (Cascading Style Sheet: カスケーディング・スタイル・シート) という新しい言語を紹介します。
CSSを使えば、余白を設定したり、文字や背景の色を変えたり、マウスが乗った時のアクションを設定したりできます。
新しい言語ではありますが、HTMLソース内に記述することができます。
CSSを書く <style> 〜 </style>
CSSはstyleタグの中に書きます。
注意していただきたいのは、styleタグはheadタグやbodyタグの中ではなく外側に書くことです。
具体例として、前回作ったtop.htmlのh1タグの文字色を赤色にしてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>家野ペイジのホームページ</title></head><!-- CSS --><style> h1 { color: red; }</style><body> <h1>私のホームページへようこそ！</h1> <h2>このページについて</h2> <p>家野ペイジが、好きなことを発信するページです。<a href="page1.html">私の自己紹介</a>をご覧ください。</p></body></html> |
サンプルページです。bodyタグ内のh1タグには何も加えていませんが、文字色が赤くなりました。
styleタグの中に書かれている、見慣れないプログラムがCSSです。これが何をしているか詳しく見ていきましょう。
CSSの書き方
上の例の、CSSの部分だけをもう一度見てみましょう。styleタグの中がCSSです。
1 2 3 | h1 { color: red;} |
CSSの書式は次のようになっています。
1 2 3 | セレクタ { プロパティ: 値;} |
スタイル（見た目）を変えたいタグなどを指定する部分がセレクタです。今回のように、セレクタとしてh1タグを指定すれば、ページ内のすべてのh1タグが対象になります。
セレクタのあとに波括弧 { } を書きます。波括弧の中に、そのセレクタで変更したいプロパティとその値を書きます。
プロパティとは、どんな風に見た目を変更するかを決定する部分です。具体的に言うと「文字の大きさ」「文字の色」「表示位置」などがプロパティです。
プロパティと値は :(コロン) で区切られ、文の終わりには ;(セミコロン) を書きます。
１つのセレクタに対して、複数のプロパティを指定することができます。例えば3つのプロパティを同時に適用する書き方は以下のようになります。
1 2 3 4 5 | セレクタ { プロパティ1: 値1; プロパティ2: 値2; プロパティ3: 値3;} |
プロパティには膨大な種類があり一度に紹介するのは難しいので、必要になったときに解説していきます。
文字の色を変える
先ほどの例のように、文字の色を変えるプロパティはcolorです。
colorプロパティの値として指定できるものの１つに、色の英語名があります。先ほどはred（赤）を指定しましたが、これをblue（青）に変えると、文字の色が青くなることが確認できると思います。
top.htmlに、以下のようにpタグを１つ追加して、今度はpタグの色を変えてみてください。どうなるでしょうか。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>家野ペイジのホームページ</title></head><style> p { color: blue; }</style><body> <h1>私のホームページへようこそ！</h1> <h2>このページについて</h2> <p>家野ペイジが、好きなことを発信するページです。<a href="page1.html">私の自己紹介</a>をご覧ください。</p> <p>私の趣味のページを作成中です。</p></body></html> |
サンプルページです。pタグ内のテキストが青くなっていることが確認できます。
リンクのテキストの色に関しては少し特殊ですので、後ほど説明します。
背景色を設定する
ページの背景色を変えるには、セレクタにbodyタグを指定し、プロパティにbackground-colorを設定します。今回は薄い灰色（lightgray）にしてみます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <title>家野ペイジのホームページ</title></head><style> h1 { color: red; } body { background-color: lightgray; }</style><body> <h1>私のホームページへようこそ！</h1> <h2>このページについて</h2> <p>家野ペイジが、好きなことを発信するページです。<a href="page1.html">私の自己紹介</a>をご覧ください。</p> <p>私の趣味のページを作成中です。</p></body></html> |
ページサンプルです。
おさらい
CSSついて今回学んだことをおさらいをしましょう。
- CSSはstyleタグで囲まれた領域に書きます。
- CSSはセレクタ（対象）とプロパティ（何を変えるか）の組み合わせです。
セレクタにタグ名を指定した場合、そのタグ全てが変更対象となります。ですが、そのタグの1つだけにスタイルを適用したいという場合はどうしたらいいのでしょうか。
次回は、CSSについてさらに解説します。