３ ボックスの作成

[戻る]

CSSを使うと、罫線で囲われた長方形を作成し、中に好きな文字や画像を配置できます。このような箱状のもののことを通称 ボックス（box）と呼びます。

作成例のように表示されるページ rensyu3.html を作成してください。

注意 このメッセージに気をつけてください！

作成手順

  1. 先の問題と同様に rensyu3.html と rensyu3.css を rensyu フォルダ内に作成します。


    新たなファイルを作成

    ひとつ前の課題と同様に、rensyu2.html を複製して rensyu3.html を作り、rensyu3.html の本文（<body>～</body>の内部）の内容を削除し、rensyu3.css を読み込むよう修正します。

    <link rel="stylesheet" href="rensyu2.css">
                             ↓ 書き換える ↓ 
<link rel="stylesheet" href="rensyu3.css">
    スタイルシート rensyu3.css に関しては、内容が全く異なるので、中身を全て削除します。

  2. HTMLファイル内に好きなメッセージを記入し、スタイルシートを設定しやすいようにクラスをつけます。ここでは「message」というクラス名にします。

    <div class="message">注意 このメッセージに気をつけてください！</div>


    まだ、画面の左上にメッセージが表示されるだけです。

  3. メッセージの先頭部分に、注意をうながすアイコンとして、以下の画像を表示させます。

    exq.gif ← ここからダウンロード（ 幅 12ピクセル  高さ 12ピクセル ）

    上の画像を「右クリック」→「名前をつけて画像を保存」などで保存し、使用してください。

    画像は <img> を使ってメッセージの先頭部分に表示してください。

    <div class="message"><img src="exq.gif"> 注意 このメッセージに気をつけてください！</div>


    小さな赤いアイコンが付きました。

  4. CSSファイルを編集します。<div>の背景色に好きな色を設定してください。ここでは、message クラスに対して背景色 background-color プロパティで設定します。

    .message { background-color: orange; }


    背景に色が付きました。

  5. メッセージの周囲に余白がありません。そこでメッセージの周囲に２０ピクセル分の余白を作ります。ここでは message クラスに対して padding （パディング）プロパティを追加して余白を作ります。

    .message { background-color: orange;
           padding:20px; }


    背景色の部分に20px分の余白が作られ、太くなりました。

  6. <div>の周囲に罫線を追加します。ここでは message クラスに対して罫線 border プロパティを追加して罫線を引きます。罫線は、２ピクセルの幅の実線を引くものとします。色は好きな色を設定してください。

    ここでは罫線の種類を実線（solid）、太さを２ピクセル（2px）、色をグレー（gray）としています。

    .message{ background-color: orange;
          padding:20px;
          border: solid 2px gray; }


    周囲に罫線(border)が付きました。

  7. ボックスの横方向が長すぎます。最大幅を400ピクセルに制限します。messageクラスに対して max-width で 「400px」と設定します。
    （もし書き込んだメッセージが長くてはみ出してしまうなど問題があれば適宜、横幅を調整してください）

    .message{ background-color: orange;
          padding:20px;
          border: solid 2px gray;
          max-width: 400px; }


    最大横幅(max-width)が400ピクセル(400px)に制限されました。

    これで完成です。

解説

色と罫線で「ボックス」を作る

CSS の background-color や border プロパティを使うと、HTMLタグの背景部分に色を塗り、周囲に罫線を引くことが出来ます。


罫線と背景色

<div>などのブロック要素に背景色や罫線が付くことで、箱に見えるようになります。WORD の「テキストボックス」にも似た見た目を持つこの箱を「ボックス（box）」と呼びます。

ボックスは width や height プロパティを使って、幅や高さを調整できます。コラムなどを記入するための箱として使ったり、二段組などをする際のレイアウト枠として使ったりできるので、大変便利です。


幅 width と 高さ height

余白(padding)

CSSで作れる主な余白には、２種類あります。 それは margin（マージン）と padding（パディング）で、それぞれ余白ができる場所が違います。


ボックスの外側にできるのが margin、内側にできるのが padding

罫線や背景色が無いと、ボックスの内側と外側の区別がしにくいので分かりづらいですが、罫線や背景色を設定してボックスが可視化されると、その違いがよく分かります。

ボックスの中に文字を書く場合は、一般的にはボックスの縁ぎりぎりから文字を書くより、padding で少し余白を設けておいたほうが読みやすいです。