WEBレイアウト

Webサイトのレイアウトはページ要素であるヘッダー、ナビゲーション、コンテンツ、フッターをどのうように配置するかで決まります。基本レイアウトは上部ナビゲーション型、左サイドナビゲーション型、右サイドナビゲーションなどあります。

例：[sample6-1.html]

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <style>
    #b01 {
        border:dashed 5px red;
        width:100%;
        height:70px;
        text-align: center;
        font-size:30px;
        color:red;
    }
    #b02 {
        border:dashed 5px blue;
        width:100%;
        position:relative;
        height:60px;
        margin:0 0 0 0;
        text-align: center;
        font-size:30px;
        color:blue;
    }
        #b03 {
        border:dashed 5px green;
        width:100%;
        position:relative;
        height:200px;
        margin:0 0 0 0;
        text-align: center;
        font-size:30px;
        color:green;
    }
    #b04 {
        border:dashed 5px gray;
        width:100%;
        height:70px;
        position:relative;
        text-align: center;
        font-size:30px;
        color:gray;
    }
    </style>
</head>
<body>
    <div id="b01">ヘッダー</div>
    <div id="b02">ナビゲーション</div>
    <div id="b03">コンテンツ</div>
    <div id="b04">フッター</div>
</body>
</html>

実行結果

ヘッダー

ナビゲーション

コンテンツ

フッター

<div>タグはそれ自身は特に意味を持っていませんが、 CSSを加えてウェブページのレイアウトを設定することができます。

例：[sample6-2.html]

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>   
</head>
<body>
    <div style="width:50px;height:50px;background-color:red;">div1</div>
    <div style="width:50px;height:50px;background-color:green;margin:0 0 0 50px;">div2</div>
    <div style="width:50px;height:50px;background-color:blue;margin:0 0 0 100px;">div3</div>
</body>
</html>

実行結果 　

div1

div2

div3

これまでCSSのセレクタは要素( <h1>、 <p>など)を指定していましたが、 <p>要素のように多用される要素の場合、同じ要素でも別なCSSを適用したい場合があります。そのような場合、HTMLの id属性と class属性を利用します。

id属性と class属性を利用することで同じ <p>要素に別々のCSSを適用することができます
id属性の値が重複してはなりません、CSSで要素のidを指定する際、id名の前 " #" を添加が必要です
class属性の値を何度でも用いることができます、CSSで要素のclassを指定する際、class名の前に " ." の添加が必要です

例：[sample6-3.html]

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <style>
    #I1 {
        font-size: 25px;
    }
    #I2 {
        color:red;
    }
    .C1 {
         font-size: 30px;
         color:green;
    }
    </style>
</head>
<body>
    <p id="I1">id要素1</p>
    <p id="I2">id要素2</p>
    <p class="C1">class要素1</p>
    <p class="C1">class要素2</p>
</body>
</html>

実行結果 　

id要素

class要素

positionプロパティは、HTML要素の配置方法を、 relative相対位置と absolute絶対位置を指定する際に使用します。
z-indexプロパティは、HTML要素の重なりの順序を指定する際に使用します。

<style>
セレクタ名{
    position: 位置種類;
    z-index: 数値;
}
</style>

z-indexの指定なり
例：[sample6-4.html]

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <style>
    .divSize   { width: 100px; height: 100px; border: 1px black solid; font-size: 40px;  }
    .divParent { width: 200px; height: 200px; border: 1px black dotted; position: relative; }
    /* 背景色付け */
    #div1 {background-color: #FF8550; }
    #div2 {background-color: #93ca76; }
    #div3 {background-color: #76b9ca; }
    /* z-indexの指定なし */
    #div1 { position: absolute; }
    #div2 {
        position: absolute;
        top: 40px;
        left: 40px;
    }
    #div3 {
        position: absolute;
        top: 80px;
        left: 80px;
    }
    </style>
</head>
<body>
    <div id="div1" class="divSize">A</div>
    <div id="div2" class="divSize">B</div>
    <div id="div3" class="divSize">C</div>
</body>
</html>

実行結果

z-indexの指定あり
例：[sample6-5.html]

<!DOCTYPE html>
<html>
<head>
    <title>タイトル</title>
    <style>
    .divSize   { width: 100px; height: 100px; border: 1px black solid; font-size: 40px;  }
    .divParent { width: 200px; height: 200px; border: 1px black dotted; position: relative;}
    /* 背景色付け */
    #z_div1 {background-color: #FF8550; }
    #z_div2 {background-color: #93ca76; }
    #z_div3 {background-color: #76b9ca; }
    /* z-indexの指定あり */
    #z_div1 {
        position: absolute;
        z-index: 3;
    }
    #z_div2 {
        position: absolute;
        top: 40px;
        left: 40px;
        z-index: 2;
    }
    #z_div3 {
        position: absolute;
        top: 80px;
        left: 80px;
        z-index: 1;
    }
    </style>
</head>
<body>
    <div id="div1" class="divSize">A</div>
    <div id="div2" class="divSize">B</div>
    <div id="div3" class="divSize">C</div>
</body>
</html>

実行結果

練習

問題 [Ex5_1.html]
二章で作ったウェブページにCSSを添加しましょう。

第６章 WEBレイアウト

WEBレイアウト

練習

第６章　WEBレイアウト