Webページの見た目を作ってみる１

#Webページの見本をみる
<img width="500px" alt="webpage8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/871a1495-4259-d085-3752-96e3a09eae3e.png">



このようなページを作ってみます。
##HTMLを記述する
HTMLを記述していきます。<br>まずはHTML文の構成を確認しながらおおよそのグループ分けをしていきましょう。

```html
<!DOCTYPE HTML>
<html>
 <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Travel Park</title>
  </head>
  <body>
    <header>
     ヘッダー
    </header>

    <div class="contents">
      <div class="first-view">
        <!-- 『トップ画像』を表示する -->
      </div>
      <div class="upper-content">
        <!-- 『旅のプラン』を表示する -->
      </div>
      <div class="middle-content">
        <!-- 『ギャラリー紹介』を表示する -->
      </div>
      <div class="bottom-content">
        <!-- 『フォーム』を表示する -->
      </div>
    </div>

    <footer>
　　　フッター
    </footer>
  </body>
</html>
```

<head>要素の中に<b>meta要素等</b>を追加していきます。<br>次に<body>要素の中を <b>\<header> , contentsクラス , \<footer></b> に分け、<br>さらにcontentsを４つに分けていきます。

##リセットCSS
ブラウザにはデフォルトで余白など設定されています。<br>そういった設定をあらかじめ打ち消すのに<b>リセットCSS</b>というものを記述します。

```css
/* リセットCSS */
body {
  font-size: 14px;
  color: #333;
  margin: 0 auto;
}
h1,h2,h3,h4,h5,h6,p {
  padding: 10px 0;
  margin: 0;
}

ul,li {
  padding: 0;
  margin: 0;
}
```

次にそれぞれの要素に色をつけ、可視的にみやすくします。

```css
header {
  height: 50px;
  background-color: #f0f0f0;
}

.contents {
  background-color: white;
}

.first-view{
  background-color: pink;
}

.upper-content{
  height: 450px;
  background-color: aqua;
  margin: 0 160px;
}

.middle-content{
  height: 450px;
  background-color: aquamarine;
  margin: 0 160px;
}

.bottom-content {
  height: 800px;
  background-color: lightgreen;
  margin: 0 160px;
}

footer {
  height: 50px;
  background-color: #f0f0f0;
}
```
ブラウザを確認しましょう。
<img width="500px" alt="webpage2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/0e262a08-77da-6ead-af18-4b3e659632dd.png">
「upper-content」,「middle-content」,「bottom-content」に「marginオプション」を設定しています。<br>これでおおまかなページの形が見えてきたと思います。
この背景色を消し、content要素のなかに情報を記述していきます。

------
##ヘッダーの実装
ヘッダーをrightとleftで分けていきます。
div要素は<b>ブロック要素</b>なので「display: flex;」で横並びにします。

```html
<header>
  <div class="header-right">
  </div>
  <div class="header-left">
  </div>
</header>
```
```css
header {
  height: 50px;
  background-color: #f0f0f0;
  padding: 10px 0;
  display: flex;
}
```
これでヘッダーを右側と左側で分けることができました。<br>それぞれの要素に文字を入力していきます。

```html
<header>
  <div class="header-left">
    <h1 class="title">Travel Park</h1>
  </div>
  <div class="header-right">
    <ul class="header-list">
      <li>メニュー</li>
      <li>ギャラリー</li>
      <li>お問い合わせ</li>
    </ul>
  </div>
</header>
```
右側のリストは\<li>要素で作ります。<br>また、\<li>要素を横並びにするために\<ul>要素に「display: flex;」を指定します。

```css
header {
  height: 50px;
  background-color: #f0f0f0;
  padding: 10px 0;
  display: flex;
}
.header-left{
  width: 50%;
  margin-left: 30px;
}
.header-right {
  width: 50%;
  padding: 20px;
}

.header-list {
  display: flex;
  justify-content: space-around;
}
```
ブラウザを確認してみましょう。
<img width="500px" alt="webpage3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/1f195e27-e6ed-a22c-ccb5-a002385118d4.png">

##フッター
続いてフッターを書いていきます。<br>HTMLにテキスト記述し、CSSのプロパティも指定します。

```html
<footer>
  <p>Copyright(C) Travel Park ALL RIGHTS RESERVED.</p>
</footer>
```
```css
footer {
  height: 50px;
  background-color: #f0f0f0;
  text-align: center;
  color: gray;
}
```
「text-alignプロパティ」で文字を真ん中に持ってきます。文字の色もグレーにします。<br>これでヘッダーとフッターができました。<br>ブラウザで確認しましょう。
<img width="500px" alt="webpage4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/0aac1100-b24a-157e-3858-899896681df6.png">
----
####次はメインページとフォームページを作成していきます。