レイアウト

はじめに


世の中にあるWEBサイトのほとんどは「ヘッダー」「メイン」「フッター」の3つの構成が元に制作されています。
その基本である3つの構成を学び、下記画面になるように作成してみましょう。

要素


レイアウトは「div」要素で構成されています。
「div」は「division(ディヴィジョン)」の略で要素をグループ化する際に使用されます。

今までタグの中に「class」属性を入れることを学びましたね。
実はクラス以外にも「id」属性を指定することができます。
それぞれの違いを知っておきましょう。

classとidの違い


まずはソース上の違いについて比べてみます。

ー classを使用する場合 ー

【HTML側】

<div class="main">メイン</div>

【CSS側】
属性を指定する際にドット「.」を使用

.main { 
// 装飾する内容を記述
}

ー idを使用する場合 ー

【HTML側】

<div id="main">メイン</div>

【CSS側】
属性を指定する際にシャープ「#」を使用

#main { 
// 装飾する内容を記述
}

ここでブラウザ上の違いを見てみると・・・実はブラウザ上では全く同じ表示なんです。
では何が異なるのか。

もっとも違うことが「id名は1ページ中に1回しか使用ができない」それに比べて同じ名前の「class名は1ページの中で何回も使用することができる」のです。

このように使わけを行うことで他の人がソースを見たときにこの要素はここでしか使用しないんだと分かりやすくなります。

カラムの作成


以下ではdivタグの中にそれぞれ「header」「main」「footer」 という名前のクラスを持っています。

【ヘッダーを生成するためのdiv要素】

<div class="header">ヘッダー</div>

【メインを生成するためのdiv要素】

<div class="main">メイン</div>

【フッターを生成するためのdiv要素】

<div class="footer">フッター</div>

ではそれぞれの要素の区別がつけやすいようにボーダーで周りを囲みましょう。

枠(ボーダー)


ボックスの周りの線をつける場合はボーダーを使用します。
例では「solid」を使用していますが、他にも「dotted」でドットの線にしたりすることもできます。

border: solid 1px #999;

上記はボーダー: ボーダーの種類 太さ 色;
を記しています。

背景色


要素に対して色を付ける場合は「background-color」プロパティを使用します。
「:」の右側にはつけたい色を指定します。

background-color: yellow;

原色であれば英語で記述しても色が反映されますが、それ以外の色を使用する場合は、16色から組み合わせた色を使用するため表記が異なります。
(例:#FF0(蛍光イエロー))
詳しくはネットで「css カラーコード」で調べると出てきます。

高さと幅


高さを指定する場合は「height」を使用し、幅を指定する場合は「width」を使用します。

.header {
    width: 400px;
    height: 100px;
}

 

共通の処理(wrapper)


いままで様々な属性を学んできましたね。
次は共通の属性を設定する場合に使用される「wrapper」を紹介します。

例えばwebサイトのページで横幅は共通に設定します。
理由はそれぞれの要素でいちいち横幅を指定することは大変ですし、もし幅の変更があった場合には全ての属性に対して修正を行わなければなりません。
そのような場合に使用する「wrapper」は共通の幅を指定することができます。

【HTML側】

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper"> 
        <header class="header"> 
           <h1>ヘッダー</h1>
        </header>
        <main class="main">
            <h2>メイン</h2> 
        </main>
        <footer class="footer">
            <h2>フッター</h2> 
        </footer>
   </div>
</body>
</html>

【CSS側】

#wrapper { /* 共通の処理 */
    width:800px;
}

.header { 
    border: solid 1px #999;
    background-color: yellow;
}

.main {
    height:500px;
    border: solid 1px #999; 
    background-color: skyblue;
}

.footer {
    border: solid 1px #999;
    background-color: pink;
}

 

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami