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

#Webページのメイン部を作る
再度、作成するWebページをみてみましょう。!
<img width="500px" alt="webpage8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/61c571c2-711b-61c4-1cca-1b276888d2b3.png">


ヘッダーとフッターは前回作ったので今回はメイン部を作りましょう。
##トップイメージを表示する
画像ファイルの表示には<b>image要素</b>を使います。<br>HTMLに記述し、画像ファイルを指定しましょう。

```html
<div class="contents">
  <div class="first-view">
    <!-- 追加します -->
    <img src="images/sample.jpg" alt="トップ画面" class="top-image">
  </div>
  <div class="upper-content">
    <!-- 『旅のプラン』を表示する -->
  </div>
  <div class="middle-content">
    <!-- 『ギャラリー紹介』を表示する -->
  </div>
  <div class="bottom-content">
    <!-- 『フォーム』を表示する -->
  </div>
</div>
```
ディレクトリが違うときはsrcに<b>「ディレクトリ/ファイル名」</b>を記述します。
次にCSSを記述します。

```css
.top-image {
  height: 100%;
  width: 100%;
}
```
ブラウザを確認してみます。
<img width="500px" alt="webpage5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/2ba0f41e-3352-e882-2dcb-0464ccff9609.png">
<br>
<br>
##リスト構造の実装
\<li>要素を用いてHTMLを記述していきます。

```html
<div class="contents">
 <div class="first-view">
   <!-- 追加します -->
   <img src="images/sample1.jpg" alt="トップ画面" class="top-image">
 </div>
 <div class="upper-content">
   <!-- 追加します -->
   <h2 class="heading-name">旅のプラン</h2>
   <ul class="messages">
     <li class="message">
       <div class="message-date">2020/10/01</div>
       <div>成田駅発、現地に到着し、ホテルへ向かいます。</div>
     </li>
     <li class="message">
       <div class="message-date">2020/10/02</div>
       <div>気球に乗りに行きます。</div>
     </li>
     <li class="message">
       <div class="message-date">2020/10/03</div>
       <div>ラフティング体験をしてもらいます。</div>
     </li>
     <li class="message">
       <div class="message-date">2020/10/04</div>
       <div>旅の疲れをゆっくり癒してもらいます。</div>
     </li>
     <li class="message">
       <div class="message-date">2020/10/05</div>
       <div>15時に成田駅に到着予定です。</div>
     </li>
   </ul>
  </div>
  <div class="middle-content">
    <!-- 『ギャラリー紹介』を表示する -->
  </div>
  <div class="bottom-content">
    <!-- 『フォーム』を表示する -->
  </div>
</div>
```
次にCSSを記述していきます。<br>見本をみるとh2要素の下に「borderプロパティ」が設定されています。

```css
.heading-name {
  text-align: center;
  border-bottom: 1px solid red;
  width: 200px;
  margin: 40px auto;
}

.messages {
  width: 50vw;
  margin: 0 auto;
}

.message {
  display: flex;
  font-size: 18px;
  margin: 0 0 16px 70px;
}

.message-date {
  padding-right: 40px;
}
```
\<li>要素内の要素を横並びにするため<b>「display: flex;」</b>を指定しています。
さらに文字を中央へ配置するため、親要素に<b>「text-align: center;」</b>を指定しています。
ブラウザをみてみます。
<img width="500px" alt="webpage6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/68b841c7-3fcd-9ecd-ac2f-7cda73d9b495.png">

##ギャラリーリストを表示
HTML文を記述します。。今回は<b>li要素の中</b>に<b>image要素</b>と<b>p要素</b>を入れます。

```html
<div class="middle-content">
 <!-- 追加します -->
 <h2 class="heading-name">ギャラリー紹介</h2>
 <ul class="gallery-list">
   <li>
     <img src="images/sample4.jpg"  class="gallery-image">
     <h4 class="description">優雅な空の旅をご官能いただけます。</h4>
   </li>
   <li>
     <img src="images/sample5.jpg"  class="gallery-image">
     <h4 class="description">永遠と続く渓谷は絶景です。</h4>
   </li>
   <li>
     <img src="images/sample6.jpg"  class="gallery-image">
     <h4 class="description">トレーニングとしても使える階段です。</h4>
   </li>
 </ul>
</div>
```
CSSを記述します。

```css
.gallery-list {
  display: flex;
  justify-content: space-around;
  margin: 60px 0;
  text-align: center;
}

.gallery-image {
  height: 300px;
}

.description {
  font-size: 10px;
}
```
主に画像の大きさを変更しました。また、画像、説明ともに真ん中に寄せるため、「text-alignプロパティ」を設定しています。<br>ブラウザを確認します。
<img width="500px" alt="webpage7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/ff429d64-3e57-985f-53df-f47a65fa4fad.png">

##フォームの実装
最後にフォームを実装します。<br>フォームは<b>form要素</b>で囲みます。
HTMLを記述していきます。

```html
<div class="bottom-content">
 <form class="contact-form">
   <h2 class="heading-name">メールで予約</h2>
   <input type="text" placeholder="name" class="small-field">
   <input type="text" placeholder="e-mail" class="small-field">
   <textarea placeholder="message" class="large-field"></textarea>
   <input type="submit" value="SEND" class="send">
 </form>
</div>
```
nameとemailのフォームは<b>input要素</b>を使っています。<br><b>placeholder</b>を指定すると入力欄に仮文字が表記されます。
CSSを表記します。

```css
.bottom-content {
  height: 800px;
  margin: 0 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-field, .large-field {
  width: 800px;
  font-size: 16px;
  padding: 15px;
  border: 1px solid #b5aaaa;
  display: block;
}

.small-field {
  margin: 0 auto 15px;
}

.large-field {
  height: 200px;
  margin: 0 auto 30px;
}

.send {
  width: 200px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid white;
  background-color: lightblue;
  color:white;
  display: block;
}
```
input,textarea要素は<b>インライン要素</b>です。<br>見本をみると縦にならんでいるので「displayプロパティ」で<b>ブロック要素</b>にしています。
これで完成しました。最後にブラウザを確認してみましょう。
<img width="500px" alt="webpage8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1076167/c6a6ff83-c6fc-10c1-b551-802cf0202edc.png">
----