Chapter-01

Chapter-02

Chapter-03

Chapter-04

ボックスを使ったデザイン

webページのレイアウトをするうえで、ボックスの使用は避けられません。
逆に言うと、ボックスをうまく使えるようになればデザインの幅はかなり広がります。

今回も、前回までに作成したindex.htmlとstyle.cssを加工して進めていきましょう。

前回打った文章をボックス（DIVタグ）で囲もう

前回のindex.htmlに入力した4つのpタグを、以下のように<div>～</div>要素で囲ってみましょう。<div>タグには「container」というID名をつけておきます。

index.html
<div id="container">

  <p id="logo">これはロゴです</p>
  <p>これは文章です。</p>
  <p class="red">これは赤い文字です。</p>
  <p class="red">これも赤い文字です。</p>

</div><!-- container END -->

</div>でしっかり閉じるのを忘れないようにしましょう。

DIVボックスは、レイアウトのために1ページで何度も登場します。
そのため、8行目のように、「<!-- ID名 END -->」などとコメントアウトをつけておくと、どのDIVタグの閉じタグかが分かりやすくなります。

DIVボックスにスタイルを適用してみよう

style.cssを開き、前回入力したコードの下に以下を追加しましょう。

style.css
#container{
    background:rgb(20%,20%,20%);
    color:rgb(100%,100%,100%);
    width:400px;
    border:4px solid rgb(40%,40%,40%);
}
background:○;背景色を指定します。
width:○px;幅を指定します。
height:○px;高さを指定します。（指定しなければ内容に合わせて可変するので、今回のような場合書かなくて構いません）
border:○px ○ ○;枠線を設定します。値はそれぞれ、線の太さ、スタイル、色です。
スタイルは、solid（実線）、dashed（破線）、dotted（点線）などがあります。
border-top:○;
border-right:○;
border-bottom:○;
border-left:○;
ボックスの枠線を上,右,下,左,個別にを設定します。
見本ページを新しいタブで開く

背景色や幅が適用されました。

さらに、colorを指定したことで、pタグに入っていた黒だった文字も白になりました。 このように、上の要素（div）に指定したスタイルが、その下の要素（p）にも継承されていることが分かります。 しかし、赤い文字は赤のままです。これは、classで色をしたものが優先されているためです。

※赤は見づらいためrgb(100%,30%,0%)に調整しています

PAGE TOP