Html CSS 基礎・基本　webページを作る！ #9

今回は今までの勉強ノートの内容を使ってwebページを作っていくものです。
今回も気楽に見ていただければと思います。

##全体のHTML構造をつくる

###ヘッダーの作成
ヘッダーなどを作る際それを大きな要素として扱うために`div`を使って箱として扱う。htmlの構造とcssによるデザインの調整が容易になる。また、作った際にそれに応じてidやclassを設定して扱いやすくする。
<div id="header>

  </div>


###コンテンツ部分の作成
次にメインコンテンツを入れる場所を作成。
`<div id="main"> </div>`

###フッターの作成
最後にフッター部分を作成します。
`<div id="footer"> </div>`

###まとめ_1

```html:index.html
<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="header">

    </div>
    <div id="main">

    </div>
    <div id="footer">

    </div>
  </body>
</html>
```

##コンテンツをいれてゆく！

###サイト名を入れる！
h1を使用してページのタイトルをページの上に入れる。そうすることでサイトの名前がページの上に存在するので、入ったときに目的のページにいることを安心付けられます。
`<div id="header"> <h1>Sample website</h1> </div>`

###コンテンツを入れる！（見出し）
h2を使用して、コンテンツの見出しにいれていきます。divのmainとidを入れたときに入れときます。
`<div id="main"> <h2>Heading</h2> </div>`

###コンテンツを入れる！（本文）
p要素を使用して、本文をコンテンツとして入れていく。本文は段落を示す`p`タグで入れていく。同様にフッターにも`p`たぐをつかう。
`<div id="main"> <h2>Heading</h2> <p> </p></div>`

###まとめ_2

```html:index.html
<!DOCTYPE html>
<html lang ="ja">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="header">
    </div>
    <div id="main">
      <h2>Heading</h2>
      <p> </P>
    </div>
    <div id="footer">
      <p> </p>
    </div>
  </body>
</html>
```

##ヘッダー部分を装飾！

###準備!
CSSでヘッダー要素を編集するための準備を行う！
`#header { }`

###背景色!
CCSにおいては一般的に、「スタイルを適用する:値;」という形で記述で行われる。
`#header { background-color: #C00; }`

###隙間！
要素の内側に上下左右10pxの隙間を入れる
要素の内側に余白を調整するには、`padding`属性を使用する。
`#header { background-color: #C00; padding: 10px;}`

###空白を埋める！
通常の場合は、ページの表示部全体とコンテンツ部分に余白が入ります。`margin`属性はある要素とほかの要素との間を調整するための属性。
`body { margin: 0px; }`

###ヘッダー内の見出しの装飾！
ID[header]を持つ要素の直下にあるh1要素を編集する場合は`要素名 > その要素の直下の要素名`というように記述する。
`#header > h1 {  } `

###見出しの文字色を変更！
`#header > h1 { color: #FFF; }`

###見出しのフォントの種類を変更！
フォントの種類を変更する場合は、`font-family`という属性を使用する。
`#header > h1 { color: #FFF; font-family: serif; }`

###見出しの余白を変更！
見出しの余白を0に設定。ある要素とほかの要素との余白を調整する。`margin`を使っていく。
`#header > h1 { color: #FFF; font-family: serif; maring: 0; }`

##コンテンツ部分の装飾！

###準備!
CSSでID名「main」の要素を編集するために準備を行う！
`#main {  }`

###枠!
CSSでID名「main」の要素に枠線をつかう。
枠線を指定する際は`border`という属性をつかう。
値の部分には、指定したい戦の色や太さを指定する。
代表的な線の種類として、`solid(通常の枠線)`、`dotted(破線)`がある。
`#main {border: 1px solid #FCC}`

###横幅!
ID名「main」の要素の横幅を80%にする。
要素の内側の隙間を調整する際は、widthという属性を使用する。
`#main {border: 1px solid #FCC width:80%;}`

###隙間!
ID名「main」の要素の内側に上下左右10pxの隙間を入れる。
ここでも隙間を入れるのには、`#main {border: 1px solid #FCC width:80%; padding: 10px;}`

###余白!
ID名「main」の要素のほかの要素との間隔を上下0にし中央に配置する。先同様、間隔の調整には`maring`という属性を使用。
``#main {border: 1px solid #FCC width:80%; margin:0 auto; padding: 10px;}`

###コンテンツ内の見出し部分の装飾！
ID名「main」を持つ要素の直下にあるh2要素を編集する準備を行う。先ほどと同様に準備する。
`#main > h2 {  }`

###見出しの部分の左に線を引く！
ID名「main」を持つ要素の直下にh2要素を装飾していく
左にのみ枠線を指定する際は`border-left`を使用する。
`#main > h2 { border-left: 5px solid #C00;}`

###見出し部分の左に枠線！
ID名「main」を持つ要素の直下にあるh2要素の内側で、左側に20pxの隙間を空ける。
`#main > h2 { border-left: 5px solid #C00; padding-left: 20px;}`

###見出しの文字のサイズを調整！
ID名「main」を持つ要素の直下にあるh2要素の文字の大きさを変更する。文字の大きさを変更するにはfont-size属性をつかう。
`#main > h2 { border-left: 5px solid #C00; font-size: 20px padding-left: 20px;}`

###コンテンツ内の本文の装飾！
ID名「main」を持つ要素の直下にあるp要素の文字を編集する準備を行う。
これも、今までの要素をもとに決めていく。
`#main > p{  }`

###本文の文字サイズを調整する
ID名「main」を持つ要素の直下にあるp要素の文字を編集する準備を行う。
`#main > p{ font-size: 14px;}`

###本文の余白を調整する！
ID名「main」を持つ要素の直下にp要素の余白を調整する。
これまで同様に、marginという属性を使用する。
`#main > p {font-size: 14px; margin: 10px 25px;}`

##フッター部分の装飾！

###準備！
CSSでID名「footer」の要素を編集するため準備する。
これも前回までと同様に進める。
`#footer {  }`

###余白！
ID名「footer」の要素のほかの要素との間隔を使う。
`#footer { margin: 10px; }`

###文字の中央揃え！
ID名「footer」の要素内にある文字を中央揃えにする。
`text-align`属性を使用し、その値を`center`にする。
`#footer { margin: 10px; text-align:center; }`

###フッタ内の装飾！
ID名「footer」を持つ要素の直下にあるp要素を編集する準備をする！
`#footer > p{  }`

###文字色
ID名「footer」を持つ要素の直下にあるp要素の文字色を変更！
`#footer > p{ color: #600; }`

###文字の大きさ
ID名「footer」を持つ要素の直下にあるp要素の文字の大きさを変更！
文字のサイズを変更するには、`font-size`という

###まとめ

```css:main.css
@charset "UTF-8";

body { 
    margin: 0;
}

#header {
    background-color: #C00;
    padding: 10px;
}

#header > h1 {
    color: #FFF;
    font-family: serif;
    margin: 0;
}

#main > h2 {
    border-left: 5px solid #C00;
    font-size: 20px;
    padding-left: 20px;
}

#main > p {
    font-size: 14px;
    text-align: center;
}

#footer {
    margin: 10px;
    text-align: center;
}

#footer > p {
    color: #600;
    font-size: 12px;
}
```

---

こんな感じで基礎基本としてはwebページを作成できます。
まだまだ、足りないところはたくさんありますが、そこらへんはまたこれからつき足していきます。