HTML&CSS_02 【RESTART】

#HTML＆CSS_02
今回のテーマは「progate」の「HTML＆CSS中級編」を使って作れたものについて
※前回の記事

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

#お役立ちメモ
<details><summary>メモ</summary><div>

```
Google Drive　からの画像参照方法
https://drive.google.com/file/d/画像ID/view?usp=sharing
⇒　https://drive.google.com/uc?export=view&id=画像ID
```

</div></details>

#フェーズ１_学習
<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
<!DOICTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>サンプルページ２</title>
    /*アイコンを参照出来る外部サイトのリンクを読み込む*/
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <header>
      <div class="container">
        <div class="header-left">
          <img class="logo" src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa">
          <span class="page-title">サンプルページ２</span>
        </div>
        <div class="header-right">
          <a href="#" class="login">ログイン</a>
        </div>
      </div>
    </header>
    <div class="top-wrapper">
      <div class="container">
        <h1>サンプルトップ</h1>
        <h1>サンプル内容</h1>
        <p>サンプルトップページです</p>
        <p>がんばって作成してゆきます</p>
        <div class="btn-wrapper">
          <a href="#" class="btn signup">新規登録はこちら</a>
          <p>SNSでも登録できます</p>
　　　　　　/*fa fa-~ でアイコンを表示出来る*/
          <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
          <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
        </div>
      </div>
    </div>
    <div class="middle-wrapper">
      <div class="container">
        <div class="heading">
          <h2>サンプルキャラクター集</h2>
        </div>
        <div class="characters">
          <div class="character">
            <div class="cha-icon">
              <img src="https://drive.google.com/uc?export=view&id=1NectTNTeasZrUQKYTBoyUP1iJiuUUpVa">
              <p>モコ</p>
            </div>
            <p class="txt-contents">定期的にトリミングされる猫</p>
          </div>
          <div class="character">
            <div class="cha-icon">
              <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ">
              <p>ちび</p>
            </div>
            <p class="txt-contents">枝豆が好物らしい</p>
          </div>
          <div class="character">
            <div class="cha-icon">
              <img src=https://drive.google.com/uc?export=view&id=1VPQ7F6JnlLt2Q76G55IopA-IpJ43lCar>
              <p>ヨシ猫</p>
            </div>
            <p class="txt-contents">好きなもの：ストロングゼロ Alc.9%</p>
          </div>
        </div>
      </div>    
    </div>
    <div class="lower-wrapper">
      <div class="container">
        <div class="heading">
          <h2>このページに関するお問い合わせはこちらから</h2>
        </div>
        <span class="btn message">お問い合わせ</span>
      </div>
    </div>
    <footer>
      <div class="container">
        <img src="https://drive.google.com/uc?export=view&id=1hN832R-ykLCA1qIwKHhtqmrr5WK_QqHZ">
        <p>サンプルページ２</p>
    </footer>
  </body>
</html>
```

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

```css
body {
  margin: 0;
  font-family: "Meiryo UI";
}

a {
  text-decoration: none; /*テキストの装飾を消す*/
}

.container {
  width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}

header {
  height: 70px;
  width: 100%;
  background-color: rgba(34,49,52,0.9); /*色のRGB指定と透過度*/
  position: fixed; /*表示の固定*/
  top: 0; /*ポジションの位置指定*/
  z-index: 10; /*要素の重なりの設定*/
}

.logo {
  width: 68px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255,255,255,0.3);
  transtion: all 0.5s; /*変化後の状態から指定秒数で変化させる*/
}

.header-right:hover { /*カーソルを合わせた際に適用*/
  background-color: rgba(255,255,255,0.5);
}

.header-right a {
  line-height: 70px; /*インラインブロックの高さ*/
  padding: 0 25px;
  color: white;
  display: block;
}

.page-title {
  color: white;
  font-weight: bold;
  font-size: 40px;
  display: inline-block;
  height: 65px;
  padding: 20px;
}

.top-wrapper {
  padding: 180px 0 100px 0;
  /*背景画像の設定*/
  background-image: url(https://drive.google.com/uc?export=view&id=1rHHnCRJBd5AzWO68m710F3eg05jZkQ_0);
  background-size: cover;
  text-align: center;
  color: rgb(255,204,0);
}

.top-wrapper h1 {
  font-size: 45px;
  letter-spacing: 5px;
  text-shadow: 2px 2px 2px black; /*テキストに影を付けて強調*/
}

.top-wrapper p {
  text-shadow: 2px 2px 2px black;
}

.btn-wrapper {
  margin: 20px 0;
}

.btn-wrapper p {
  margin: 10px 0;
}

.signup {
  background-color: #239b76;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8; /*透過度*/
  border-radius: 4px; /*過度の丸み*/
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

.middle-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #e6ffe9;
  text-align: center;
}

.heading {
  padding-top: 60px;
  padding-bottom: 30px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.character {
  float: left;
  width: 25%;
}

.cha-icon {
  position: relative; /*重ね表示する際の起点とする設定*/
}

.cha-icon p {
  position: absolute; /*起点から以下のプロパティ分をオフセット*/
  top: 190px;
  width: 160%;
  font-weight: bold;
}

.txt-contents {
  display: inline-block;
  margin-top: 20px;
  font-size: 15px;
}

.lower-wrapper {
  border-bottom: 1px solid #eee;
  padding-bottom: 80px;
  text-align: center;
}

.message {
  padding: 15px 40px;
  background-color: #5dca88;
  cursor: pointer; /*カーソルが乗った際にポインターに変わる*/
  box-shadow: 0 7px #1a7940; /*ボックスに影を付けて立体的に表示*/
}

.message:active { /*クリックされた際に適用*/
  position: relative;
  top: 7px;
  box-shadow: none;
}

footer img {
  width: 50px;
}

footer p {
  color: white;
  font-size: 12px;
  float: right;
}

footer {
  background-color: rgba(34,49,52,0.9);
}
```

</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="mdMVWme" 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/mdMVWme">
  サンプルページ２</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