CSS入門3（ページのレイアウト）

自己紹介ページのレイアウトを整える

前回は特定のタグのスタイルを変えるためにclass属性が利用できることを解説しました。これで様々なタグの装飾を行えるようになりました。

今回は、自己紹介のページ（page1.html）のデザインを見やすくしていきたいと思います。

タイトル見出しを装飾する

ページで一番目立つ見出しを華やかにしてみましょう。

h1タグにclass属性を追加し、値をtitleHeaderとします。

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>自己紹介のページ</title>
    </head>

    <style>

      .titleHeader {
        font-size: 32px;
        color: white;
        background-color: red;
        text-align: center;
      }
    </style>

    <body>

      <h1 class="titleHeader">私の自己紹介</h1>

      <!--
      自己紹介の項目は
        1. プロフィール画像
        2. 基本情報
        3. 好きなもの・嫌いなもの
        4. 一言
      -->

      <h2>プロフィール画像</h2>
      <img src="images/profile.png">

      <h2>基本情報</h2>

      <!-- リストを作る -->
      <ul>
        <li>18歳</li>
        <li>男性</li>
        <li>東京在住</li>
      </ul>

      <h2>好きなもの・嫌いなもの</h2>

      <!-- 4行4列のテーブル -->
      <table>
        <tr>
          <th>項目</th><th>好き</th><th>嫌い</th>
        </tr>
        <tr>
          <td>生き物</td><td>金魚</td><td>ムカデ</td>
        </tr>
        <tr>
          <td>食べ物</td><td>ステーキ</td><td>なすび</td>
        </tr>
        <tr>
          <td>飲み物</td><td>リンゴジュース</td><td>青汁</td>
        </tr>
        <tr>
          <td>季節</td><td>夏</td><td>冬</td>
        </tr>
      </table>

      <h2>一言</h2>

      <!-- ここをもう少し内容を充実させたいかも -->

      <p>はじめまして！<br>
      私は家野ペイジと言います。<br>
      私のことをみなさんに知っていただきたかったので、<br>
      このホームページを作りました。</p>

      <p>これから色々な情報を発信していきたいと考えています。<br>よろしくお願いします！</p>
    </body>
    </html>

こちらがCSSを適用したページです。見出しの背景と色、文字サイズが変わりました。

文字を表示するタグに対してbackground-colorを指定すると、文章の後ろの色が変わります。

ページの幅を変える

h1の背景を赤くしてみましたが、画面の端から端まで伸びていて少し不格好です。

見出しのタグ（h1 〜 h6）や、pタグなどは、横幅が親タグと同じになります。親タグとは、そのタグを囲っているタグのことです。

上記の例の場合、h1タグの親タグはbodyタグです。なので、h1の横幅はbodyタグの横幅と同じになります。bodyタグの横幅は、何も設定しなければブラウザの画面いっぱいの大きさになります。

それでは、h1タグの横幅を縮めるために、bodyタグの横幅を短くしてみましょう。幅を変えるにはCSSの width（幅）プロパティを設定します。

    ...
    <style>

      body {
        width: 800px;
      }

      .titleHeader {
        font-size: 32px;
        color: white;
        background-color: red;
        text-align: center;
      }
    </style>
    ...

（styleタグ以外は省略しています）

幅を変えた例がこちらです。幅は変わりましたが、左に寄ってしまっていますね。

ページ全体を中央寄せにするには margin というプロパティを使用します。marginプロパティを使えば、上下左右好きな位置に好きな大きさの余白を設定できますが、詳しい使い方は後ほど説明いたします。

このプロパティをつけたセレクタが中央に来るよう自動的に余白を計算してくれる書き方があるので、今回はそれを使ってみます。

    ...
    <style>

      body {
        width: 800px;
        margin: 0 auto;
      }

      .titleHeader {
        font-size: 32px;
        color: white;
        background-color: red;
        text-align: center;
      }
    </style>
    ...

中央に寄せたページがこちらです。

marginの値に 0 auto と指定すると、そのセレクタが画面中央に来るようになります。

枠線を付ける

自己紹介が表示されている領域全体を線で囲ってみましょう。要素に枠線をつけるには、borderプロパティを使います。borderとは「境界線」という意味です。

    ...
    <style>

      body {
        width: 800px;
        margin: 0 auto;
        border: 1px solid black;
      }

      .titleHeader {
        font-size: 32px;
        color: white;
        background-color: red;
        text-align: center;
      }
    </style>
    ...

borderプロパティの値が少し複雑なので、詳しく解説します。

borderの使い方

  <!-- borderの値の書き方 -->
  border: 枠線の太さ 枠線のタイプ 枠線の色;

枠線の太さ

1つ目に設定する値です。ピクセルで太さを指定できます。ここの数値を大きくすると、太い線になります。

枠線のタイプ

2つ目に設定する値です。普通の線以外にも、二重線や点線などのスタイルを設定できます。設定できるタイプの一例を下の表にまとめます。

値	見た目
solid	1本線
double	2本線
dashed	破線
dotted	点線
none	非表示

値を変えて色々試してみましょう。

他にも、線を浮き上がらせて立体的に見せるタイプなども指定できます。

枠線の色

3つ目に設定する値です。文字と同じように、線の色をここで設定できます。

さて、実際にどのような線ができたかこちらで確認してみてください。

枠線はできましたが、枠線内の余白が気になりますね。その設定は次回行いましょう。

おさらい

class属性ついて今回学んだことをおさらいをしましょう。

background-colorプロパティで、文字の背景色を変えることができます。
タグを囲っているタグを、親タグと呼びます。
pタグや見出しタグの幅は、親タグの同じ幅に設定されます。
横幅の大きさを指定するにはwidthプロパティを設定します。
要素を水平方向中心に配置するにはmargin: 0 auto;を設定します。
枠線を描くにはborderプロパティを設定します。

次回はページの余白を設定する方法について詳しく見ていきたいと思います。