HTML&CSS_01　【RESTART】

#HTML＆CSS_01
今回のテーマは「progate」の「HTML＆CSS初級編」を使って作れたものについて
※学習サイクルの詳細について知りたい方は前記事を参照ください

https://qiita.com/yuta-proto-biz/items/d84ff5acf66844e7675f

#フェーズ１_学習
<img width=500 alt="フェーズガイド_学習.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/59a12d09-ac64-d2bb-1d40-1e3bbdec1613.png">
「progate」「HTML＆CSS初級編」を学習

#フェーズ２_記録
<img width=500 alt="フェーズガイド_記録.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/9d211634-86ec-6d88-2283-c6f3d578983d.png">
テキストファイル化し以下のコードに手記入でメモ書き
<details><summary>HTML</summary><div>

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">Sample</div>
      <div class="header-list">
        <ul>
          <li>Contents_01</li>
          <li>Contents_02</li>
          <li>Contents_03</li>
        </ul>
      </div>
    </div>
    
    <div class="main">
      <div class="copy-container">
        <h1>サンプルページへようこそ<span>!</span></h1> /* span や a はインライン要素の為、改行が行われない*/
        <h2>色々なページのベースとして使う予定です</h2>
      </div>
      
      <div class="contents">
        <h3 class="section-title">画像イメージ一覧</h3>
        
        <div class="contents-item">
          <img src="https://pbs.twimg.com/profile_images/1421736526812041217/NYH8RA2G_400x400.jpg">
          <p>img_01</p>
        </div>
        
        <div class="contents-item">
          <img src="https://1.bp.blogspot.com/-mjkfErtfCTU/XXXObIPmwBI/AAAAAAABUto/0dQq-cQ5v64RR0IWbDgdlc10CgK2Or0jACLcBGAs/s1600/cat_wink_gray.png">
          <p>img_02</p>
        </div>
        
        <div class="contents-item">
          <img src="http://4.bp.blogspot.com/-1865joK51EI/Wb8gnbhjDpI/AAAAAAABGy4/ByWIh6Zt-hM-CCEzYWBxcuTJOOWz26kYwCLcBGAs/s800/pet_omocha_neko.png">
          <p>img_03</p>
        </div>
      </div>
      
      <div class="contact-form">
        <h3 class="section-title">お問い合わせ</h3>
        <p>メールアドレス（必須）</p>
        <input>
        <p>お問い合わせ内容（必須）</p>
        <textarea></textarea>
        <p>※必須内容は必ずご入力ください</p>
        <input class="contact-submit" type="submit" value="送信">
      </div>
    </div>
    
    <div class="footer">
      <div class="footer-logo">Sample</div>
      <div class="footer-list">
        <ul>
          <li>サンプル内容</li>
          <li>サンプル画像引用先</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>
  </body>
</html>
```

</div></details>
<details><summary>CSS</summary><div>

```css
body { /*タグ指定*/
  font-family: "Meiryo UI"; /*フォント名*/
}

li {
  list-style: none; /*リストの点消し*/
}

.header { /*クラス指定*/
  background-color: #26d0c9; /*背景色*/
  color: #fff; /*文字色*/
  height: 90px; /*縦のサイズ*/
}

.header-logo {
  float: left; /*寄せ（左寄せ）*/
  font-size: 36px; /*文字サイズ*/
  padding: 20px 40px; /*パディング（ボックスの内側の余白）*/
}

.header-list li { /*クラス内のタグ指定*/
  float: left;
  font-size: 33px 20px;
}

.main {
  padding: 100px 80px;
}

.copy-container h1 {
  font-size: 100px;
}

.copy-container h2 {
  font-size: 50px;
}

.copy-container span {
  color: red;
}

.contents {
  height: 500px;
  margin-top: 100px; /*マージン（ボックスの外側の余白）*/
}

.section-title {
  border-bottom: 2px solid #dee7ec; /*罫線*/
  font-size: 28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
}

.contents-item {
  float: left;
  margin-right: 40px;
}

img {
  width: 250px; /*横の幅（画像も自動で調整される模様）*/
}

.contents-item p {
  font-size: 24px;
  margin-top: 30px;
}

.contact-form {
  margin-top: 100px;
}

input, textarea { /*タグ複数指定*/
  width: 800px;
  margin: 10px 0 30px 0;
  padding: 20px;
  font-size: 18px;
  border: 1px solid #dee7ec;
}

.contact-submit {
  background-color: #dee7ec;
  color: #889eab;
}

.footer {
  background-color: #2f5167;
  color: #fff;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  font-size: 32px;
}

.footer-list {
  float: right;
}

.footer-list li {
  padding-bottom: 20px;
}
```

</div></details>
<details><summary>メモ書き</summary><div>

```
HTML
・span a はインライン要素の為、改行されない
CSS
・font-famiry フォント名
・list-style: none; リストの点消し
```

</div></details>

#フェーズ３_実践
<img width=500 alt="フェーズガイド_実践.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/d1dfa8b4-68ae-bc5d-8eba-babb239eb06f.png">
「codepen」を使って実際にページ作成
メモ書きを行ったテキストファイルを使用する
※「0.25x」推奨
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="NWvPeQJ" data-user="yuta-proto-biz" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yuta-proto-biz/pen/NWvPeQJ">
  サンプルページ</a> by yuta-proto-biz (<a href="https://codepen.io/yuta-proto-biz">@yuta-proto-biz</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

#フェーズ４_発信
<img width=500 alt="フェーズガイド_発信.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1792140/22bd737c-7f55-be0b-340e-3f4b457af002.png">
この記事自体が「フェーズ４_発信」であるのでこの欄は「所感」とします

```
「フェーズ２_記録」にてテキスト出力し、メモ書きを行ったことで
理解が深まると共に「フェーズ３_実践」を行う際の「設計図」になりました
格段に作成がしやすくなったと感じます
```
#過去記事へのリンク
https://qiita.com/yuta-proto-biz/items/89f8bee634d99067dbeb

https://qiita.com/yuta-proto-biz/items/b27ce48596a995ac7058