第7章　WEBレイアウト

# **WEBレイアウト**
***
レイアウトは必要な文字や画像などの素材を決まったスペースに配置する作業のことである。

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

#### **例**
上部ナビゲーション型

<div>
<div id="b01">ヘッダー</div>
<div id="b02">ナビゲーション</div>
<div id="b03">コンテンツ</div>
<div id="b04">フッター</div>
<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>
</div>
<br><br>

## **2.HTML```<div>```タグ**
```<div>```タグはそれ自身は特に意味を持っていませんが、```<div>```タグで、Webページレイアウトのページ要素を指定します。CSSでページ要素の位置が設定できます。

#### **例**
[sample7-1.html]
```
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <div id="d1">div1</div>
    <div id="d2">div2</div>
    <div id="d3">div3</div>
</body>
<style>
  
    #d1 {
        width:50px;
        height:50px;
        background-color:red;
    }
    #d2 {
        width:50px;
        height:50px;
        background-color:green;
        margin:0 0 0 50px;
    }
    #d3 {
        width:50px;
        height:50px;
        background-color:blue;
        margin:0 0 0 100px;
    }
</style>
</html>
```

#### **実行結果**
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="d1">div1</div>
<div id="d2">div2</div>
<div id="d3">div3</div>
<style>
    #d1 {width:50px; height:50px;background-color:red; }
    #d2 {width:50px;height:50px;background-color:green;margin:0 0 0 50px;}
    #d3 {width:50px;height:50px;background-color:blue;margin:0 0 0 100px;}
</style>
<br><br>
</body>
</html>

### **```id属性```と```class属性```**
これまでCSSのセレクタは要素(```<h1>```、```<p>```など)を指定していましたが、```<p>```要素のように多用される要素の場合、同じ要素でも別なCSSを適用したい場合があります。そのような場合、HTMLの```id属性```と```class属性```を利用します。
+ ```id属性```と```class属性```を利用することで同じ```<p>```要素に別々のCSSを適用することができます
+ ```id属性```は同じWebページ内で```id属性```の値が重複してはなりません、CSSで要素のidを指定する際、id名の前 "```#```" を添加が必要です
+ ```class属性```は同じWebページ内で同じ```class属性```の値を何度でも用いることができます、CSSで要素のclassを指定する際、class名の前に "```.```" の添加が必要です

#### **例**
[sample7-2.html]
```
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
    <p id="I1">id要素</p>
    <p id="I2">id要素</p>
    <p class="C1">class要素</p>
    <p class="C1">class要素</p>
</body>
<style>
    #I1 {
        font-size: 25px;
    }
    #I2 {
        color:red;
    }
    .C1 {
         font-size: 30px;
         color:green;
    }
</style>
</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要素</p>
    <p id="I2">id要素</p>
    <p class="C1">class要素</p>
    <p class="C1">class要素</p>
    <br>
</body>

## **3.CSSの```position```プロパティと```z-index```プロパティ**
```position```プロパティは、HTML要素の配置方法（基準位置）が、```relative```相対位置か```absolute```絶対位置かを指定する際に使用します。

```z-index```プロパティは、HTML要素の重なりの順序を指定する際に使用します。

<pre><code>{
    position: 位置種類;
    z-index: 数値;
}</code></pre>
<span color="red">※ z-indexを指定順位とき、positionは必ず設定すること。</span>   
<span color="red">※数値は大きければ大きいほど上層となります。</span>

#### **z-indexの指定なし**
#### **例**
[sample7-3.html]

<pre><code>
.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;
}

<div class="divParent">
    <div id="div1" class="divSize">A</div>
    <div id="div2" class="divSize">B</div>
    <div id="div3" class="divSize">C</div>
</div>
</code></pre>

#### **実行結果**
![06_5.png](https://i.loli.net/2019/09/12/fKxP71Rq2Iv3NBy.png)

<br>

#### **z-indexの指定あり**
#### **例**
[sample7-4.html]
<pre><code>
.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;
}

<div class="divParent">
    <div id="z_div1" class="divSize">A</div>
    <div id="z_div2" class="divSize">B</div>
    <div id="z_div3" class="divSize">C</div>
</div>
</code></pre>

#### **実行結果**
![06_6.png](https://i.loli.net/2019/09/12/sYPI73f6DHynQck.png)

***

>**練習**
>> **問題**[ex7-1.html]
下記の画面を作成してみよう

![002.png](https://i.loli.net/2019/08/07/TsMUHfliY4tzXVu.png)

<details><summary>クリックして、解答を見る[ex7-1.html]</summary><div>
<pre><code><!DOCTYPE html>
<html>
    <head>
        <title>DIV練習</title>
        <style>
            #d10 {
                color:red;
                font-size:30px;
                text-align: center;
                width:100%;
                height:70px;
                border:dashed 2px red;
            }
            #d11 {
                color:blue;
                font-size:30px;
                text-align: center;
                width:20%;
                height:200px;
                border:dashed 2px blue;
                position:absolute;
            }
            #d12 {
                color:green;
                font-size:30px;
                text-align: center;
                width:78.8%;
                height:200px;
                border:dashed 2px green;
                position:absolute;
                margin:0 0 0 20%;
            }
        </style>
    </head>
    <body>
        <div id="d10">ヘッド</div>
        <div id="d11">リスト</div>
        <div id="d12">本文</div>
    </body>
</html>
</code></pre>
</div></details>

content

第7章 WEBレイアウト

第7章　WEBレイアウト