　はじめに

タイトルの通り初めてWEBページを作りました。
この記事は、作成意図、作業中ハマったこと、今後の課題、をまとめた記事になります。
学習環境はProgateを利用していて、今回作成したページはProgateのHTML&CSS初級,中級,上級のレッスンで習った内容の復習です。

作成箇所（head,header,div,footerなど)ごとに所感をまとめてます。
また、Qiitaで記事を書くのも今回が初めてになりますのでこういった投稿サービスの利用方法を勉強する目的も兼ねて記事を書いています。

開発環境

使用ツール
　　　Atom 1.38.2
動作確認
　　　Google Chrome 75.0.3770.100（Official Build）（64 ビット）
OS
　　　Windows 10 pro 10.0.17134

WEBページ概要

ページレイアウトはProgate:HTML&CSS初級コースの作成目標を参考に作っていて、初級のレイアウトに中級,上級で習う内容を組み込んでみました。

作成ページURL(https://tbtyof.github.io/HTML_-_CSS_TR/)
ソースコード(DMM WEBCAMPの学習でGitHubのアカウント使うので掲載中止)
ProgateのURL(https://prog-8.com)

< head >

意図したこと
metaタグでviewportを読み込んでスマホやタブレットに画面サイズ合わせる準備をしてます。
（この部分の作成過程はレスポンシブデザインの項目に後述）

トライアンドエラー
Atomで作成中は”stylesheet”のhref内をフルパスで指定していましたが、GitHubにUPする際にそのままでは適応することができませんでした。
フルパスをどんどん削っていってどうやって指定したら読み込めるか試しましたが、最終的にファイル名だけでよかった事に気づきました（笑）
この指定の仕方は相対パス？っていうそうです。

パスについて参考サイト(https://techacademy.jp/magazine/5801)

課題
head内は定型文（だと思ってる）なのでコピペで済む作業ではありますが、metaタグの持つ意味まで理解してないのでなんでそうなるのか？が分からないです。
こういったモヤモヤを取り払うのも今後の課題ですね。

< head >

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TBATYOF</title>
    <link rel="stylesheet" href="stylesheet.css">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="responsive.css">
  </head>

また、ページ全体に掛けるCSSもあらかじめ書いていきました。

< CSS >

li{
  list-style: none;
}

a{
  text-decoration:none;
}

*{box-sizing: border-box;}

< header >

意図したこと
習った事の再現として、
・画面上部にヘッダーを固定する
・背景のみを透明にする

また試みとして
・”学べるレッスン”、”お問い合わせ”のアンカーにページ内リンクを設定する

を意識して作りました。

< header >

<header>
     <div class="logo">TBATYOF</div>
       <a href="#">プログラミングとは</a>
       <a href="#main-page">学べるレッスン</a>
       <a href="#contact">お問い合わせ</a>
     <div class="header-icon">
　　　　<!--↓はレスポンシブデザインで触れます-->
       <i class="fa fa-bars" aria-hidden="true"></i>
     </div>
</header>

< CSS >

/*  header  */
header{
  background-color: rgba(38, 208, 201, 0.9);
  height:90px;
 width:100%;
  color:white;
  position: fixed;
  top:0;
}

header .logo{
  font-size: 36px;
  padding:20px 40px;
  float: left;
}

header a{
  color: white;
  font-size: 16px;
  float: left;
  padding:33px 20px;
}

header a:hover{
  color:blue;
}

/*  レスポンシブデザインのところで触れます  */
header .fa-bars{
  font-size: 50px;
  line-height: 90px;
  padding-right: 5%;
  float: right;
  display: none;
}

トライアンドエラー
ヘッダー部分は・・・正直に話すと三時間くらいかかりました汗

原因はこちら

width:100%;とか試してもなぜか余白ができたり、line-heightとかdisplayとか設定してもheaderの親要素よりはみ出てしまう現象が発生して、これを修正するのにめちゃくちゃ時間かかりました。
試行錯誤の末にProgateのレッスンでデフォルトでCSSに書き込まれていたコードを思い出しなんとか修正できました。

< 修正箇所 >のコード

html, body,ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div,input,textarea,a{
  margin: 0;
  padding: 0;
}

課題
”プログラミングとは”に別ページのリンクを張ることです。
なので別ページを制作してそこにリンクを張る予定ですが、別ページ張るだけなら誰かが作ったページのURL張るだけで終了になっちゃいますし、なにか新しい試みを思いついたら別ページ作るのでその時まで塩漬けの課題です。

< HELLO WORLD. >

意図したこと
ここは特記するべきことはないかと。
HELLO WORLD!!

トライアンドエラー
画面の左端に文字がべた付けだとかっこ悪かったので余白をつけようと思いました。
レスポンシブデザインの設定を考えていたのでページのサイズに合わせて見え方が少しでも変わればと思いpaddingはピクセル単位ではなく％で余白を作ってます。

課題
作り終えて気づきましたがfont-familyのプロパティをいじってないです。
フォントがデフォルトのままのＷＥＢサイトなんてないでしょうし、今度はフォントの種類を探してみようと思います。

< HTML >

    <div class="page-title">
      <h1>HELLO WORLD<span>.</span></h1>
      <!--idの設定は”学べるレッスン”で触れます-->
      <h2  id="main-page">プログラミングの世界へようこそ</h2>
    </div>

< CSS >

*PAGE-TITLE*/
.page-title{
  padding:100px 0 50px 0;
  padding-left: 3%;
}

.page-title h1{
  font-size: 140px;
  color:black;
}

.page-title span{
  color:orange;
}

.page-title h2{
  font-size: 40px;
  color:black;
}

< 学べるレッスン >

意図したこと
アンカーを使い”学べるレッスン”へのページ内リンクを作ること
ページのサイズが変わってもアイコンが干渉しあわないように配置すること

トライアンドエラー
当初は学べるレッスンのh3タグにidを指定していましたが、

このようにヘッダー部分に隠れてしまってます。スケスケなのもマイナスポイント。
なのでここは一段上の”プログラミングの世界へようこそ”のh2タグにidをつけたらそれっぽくなりました。

次にこのdivの作成で最も苦労した箇所となるfloatの設定です。
clearの仕様が分からんちんで最初はfloatの真下に書いていたので全く上手くいきませんでした（笑）
この辺りを書いてるときにはもう設定してたと思いますが、

・CSS全体に向けてbox-sizingを設定
・float解除のためにclearを呼び出せる様に設定

しています。

また、displayプロパティの設定の仕方もよく理解できてなかったです。
要素に広くかかるのかなぁ～なんて思ってたら全然imgがblockにならず・・・

解決策として、
・直接imgタグにclass付けてdisplayプロパティの書き換え成功

画像の元サイズが大きかったのか最初コード書いてた時は、アイコンが上段３個の下段１個に表示が分かれてました。
怪我の功名ですがimgにclass付けたお陰で画像のサイズをCSSでいじれるのわかってwidthを80％に設定したことで当初思っていた感じで画面に表示できるようになりました。

あとアイコンに使用した画像についてはProgateのものがCoolなんで使いたかったんですが、著作権的にOKなのか分かりませんでしたのでPaintで代用してます。

参考にしたサイト
displayについて(https://saruwakakun.com/html-css/basic/display)
clearについて(https://60pablog.com/css-clear/)

課題
形になったけどなんで上手くいってるかよくわかってません。（そういうのしかない笑）
このやり方がベストなのか？無駄な記述はないのか？など判断がつくはずもなく・・・
この辺りは皆さんが作られたWEBページをみてインプットしていくしか思いつかないですねぇ。

< HTML >

  <div class="main-page">
      <div class="heading">
        <h3>学べるレッスン</h3>
      </div>
      <div class="contents">
        <img class="icon" src="HTML & CSS.jpg" >
        <p>HTML & CSS</p>
      </div>
      <div class="contents">
        <img class="icon" src="PHP.jpg" >
        <p>PHP</p>
      </div>
      <div class="contents">
        <img class="icon" src="Ruby.jpg" >
        <p>Ruby</p>
      </div>
      <div class="contents">
        <img class="icon" src="Swift.jpg" >
        <p id="contact">Swift</p>
      </div>
      <div class="clear">  </div>
    </div>

< CSS >

*main-page*/
.main-page{
  padding-left: 3%;
  padding-rigth:3%;
  margin-bottom: 100px;
}

.main-page h3{
  font-size:28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
  border-bottom: 2px solid gray;
}

.contents .icon{
  display: block;
  width:80%;
}

.main-page .contents{
  float:left;
  width: 20%;
  padding-right: 20px;
}
.contents p{
  font-size: 24px;
  text-align: left;
  padding-bottom: 50px;
}

< 全体向け >

*{box-sizing: border-box;}

.clear{
  clear: both;
}

< お問い合わせ >

意図したこと
復習のポイントとしては、

・ボタンを押せる機能実装
・SNSのリンク（見た目のみ）の実装

です。

トライアンドエラー
SNSのアイコンが　□　となっていて正しく表示できませんでした。
直接の原因箇所は、

< i class="fa fa-facebook" >と書いてましたがclassを、

fa⇒fab

に変更したらうまくいきました。
また原因について調べる中で、SNSのアイコン使うならフォントも変えたほうがいいと記載があったのでこの箇所はフォントをいじってます。

あとこのdivを作ってるときに気になっていたのですが、

ボーダーラインが画面の端まで行ってしまっているのがきになりました。
結論から言うとbox-sizingしてるのでpaddingやmarginを設定すればいいだけだったのですが、最初は親要素のwidthを決めてその中でだけボーダーラインが表示されるようにピクセルで調整を繰り返していました。
なので各親要素ごとに幅が違っていたりしてページがガチャガチャになってしまいました。

解決策としては、

・ピクセルで指定していた親のwidthを全部消す
・余白はpaddingやmarginで調整する

でなんとか整いました。

**アイコンの参考サイト(https://saruwakakun.com/html-css/basic/font-awesome)

< HTML >

    <div class="contact">
      <div class="heading">
        <h3>お問い合わせ</h3>
      </div>
      <div class="e-mail">
        <p>メールアドレス<span>（必須）</span></p>
        <input type="text" name="e-mail" value="">
      </div>
      <div class="contact-form">
        <p>お問い合わせ内容<span>（必須）</span></p>
        <textarea name="contact-form" rows="8" cols="80"></textarea>
      </div>
      <div class="contact-btn">
        <p>※<span>必須項目</span>は必ずご入力ください</p>
        <input class="btn" type="submit" name="contact-submit" value="送信">
      </div>
      <div class="btn-wrapper">
        <a href="" class="facebook btn-sns"><i class="fab fa-facebook" ></i> Facebook</a>
        <a href="" class="twitter btn-sns"><i class="fab fa-twitter"></i>Twitter</a>
      </div>

< CSS >

*contact*/
.contact{
  margin-left: 3%;
  padding-right:3%;
}

.contact h3{
  font-size:28px;
  padding-bottom: 15px;
  margin-bottom: 50px;
  border-bottom: 2px solid gray;
}

.contact p{
  font-size: 16px;
}
.contact span{
  color:red;
}

.contact input, .contact textarea{
  border: 1px solid #dee7ec;
  margin: 10px 0 30px 0;
  padding: 20px;
  width: 400px;
}

.contact .btn{
  border-radius: 4px;
  background-color: #dee7ec;
  color: #889eab;
  box-shadow: 0 7px #889eab;
  margin-bottom:90px;
  cursor: pointer;
}
.contact .btn:active{
  position: relative;
  top: 7px;
  box-shadow: none;
}

.btn-wrapper{
  margin-bottom: 50px;
}

.btn-wrapper .btn-sns{
  font-family: "Font Awesome 5 Brands";
  color:white;
  font-size: 20px;
  padding: 5px 40px;
  border-radius: 4px;
}

.btn-wrapper .facebook{
  background-color: rgba(59, 89, 152,0.7);
  margin-right: 20px;
}
.twitter{
  background-color: rgba(85, 172, 238,0.7);
}

.btn-wrapper .fab{
  padding-right: 10px;
}

.btn-wrapper .facebook:hover{
  background-color: rgba(59, 89, 152,1)
}

.btn-wrapper .twitter:hover{
  background-color: rgba(85, 172, 238,1);
}

課題
HELLOW　WORLDでも触れましたが余白は％で付けてます。
作業していくうちにピクセルが悪、みたいになって使うの忌避しちゃってましたが冷静になるとピクセルで指定しても作れるんじゃね？って思ってます。
今回理解が浅くてうまく配置できませんでしたが、余白の付け方はどうやんだ！って試行錯誤に時間を使いましたが、次回以降はそこをスキップして単純に見た目はこっちのがいいかな？ってレイアウトに時間使えるようしてきます。

あとは単純に実装したい機能として、

・本物のSNSのリンク、送信ボタンの実装

ですね、見た目だけじゃなくてサイトとしての機能をつけれるようにステップアップしたいです。

< footer >

意図したこと
background-colorを画面端まで表示

トライアンドエラー
フッター部分は余白の付け方で悩んでるときに同時に作っていたのですが、画面端までいかなかったり、他のdivは幅がそろったのにフッターだけ逆に飛び出たりして、一番邪魔して上手く作れなかった真犯人です（笑）

解決策は親要素のwidthを削除した件を上述してるので割愛します。

課題
Progateのレッスンだとレスポンシブデザインを使ったページは”text-align”を使ったり”margin auto”を使って要素を中央に配置させてます。

今回ここの部分をまるまる省いて制作したのでスマホサイズの時はフッターの配置を変える、みたいなことに挑戦できてません。

要素の中央寄せと合わせて次回の課題ですね。

< HTML >

    <footer>
      <div class="container">
        <div class="footer-logo">
          <h2>TBATYOF</h2>
        </div>
        <div class="footer-list">
          <a href="#">会社概要</a>
          <a href="#">採用</a>
          <a href="#contact">お問い合わせ</a>
        </div>
      </div>
      <div class="clear"></div>
    </footer>

< CSS >

/*footer*/
footer{
  background-color: #2f5167;
  height:160px;
  color: white;
  padding: 25px;
}

footer .container{
  width: 100%;
}

.footer-logo{
  float: left;
}

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

.footer-list{
  float: right;
}

.footer-list a{
  font-size: 16px;
  color: white;
  margin-bottom: 20px;
  display: block;
}

.footer-list a:hover{
  color:blue;
}

< レスポンシブデザイン >

意図したこと
Progateの上級レッスンの再現として、アイコンの配置のされ方を

・ＰＣ⇒横一列
・タブレット⇒上下二個ずつ
・スマホ⇒縦一列

にする。
（max-widthの値は上級レッスンを参考に指定）

また、正しく反映されているか動作確認をし易くするためにHELLOW WOLDのcolorを画面の横幅で変わるようにしてあります。

width (px)	color
1001 ～	black
671 ～ 1000	blue
～ 670	red

あとはヘッダー部分でnomeにしていたアイコンをスマホ画面で表示される様に設定してます。

トライアンドエラー
自分のスマホで縦向き、横向きしたときは問題ありませんでしたが、PCブラウザで画面を徐々に狭めていくとヘッダー部分のメニューが枠を飛び出してしまってました。

メニューが枠内に横一列表示になるための解決策として、

・font-sizeを小さくする
・paddingで余白を狭める

で調節しました。

課題
今回はmax-widthの値をもろパクリしましたが、どのサイズで区切るのがいいか自分で判断できてません。値を変えたら表示され方がどう変化するのか？詰める余地が残ってます。

@ media の後ろに付く　”all”　や ”and”　の使い方がいまいちピンときてない、というよりそのまま書き写したのでそれ以外のscreenにしたらどう変わるのか？を試してないって感じですね。
意味としては all だと@ mediaの条件満たしたらすべてに適応します～ってところだと思いますが、今回は深く突っ込まなかったところになります。

あと、アイコンもちゃんとした機能つけたいですね(笑)

< CSS >


/*タブレット向け*/
@media all and  (max-width:1000px) {

  header .logo{
    padding:20px 20px 20px 40px;
  }

  header a{
    padding:33px 10px;
  }

  .main-page .contents{
      width: 44%;}

.page-title h1{
  color:blue;
}

}


/*スマホ向け*/
@media all and  (max-width:670px) {
  .page-title h1{
    font-size: 80px;
    color:red;
  }
  .page-title h2{
    font-size: 20px;
  }
  .main-page h3, .contact h3{
    font-size: 23px;
  }

  .contact input, .contact textarea, .btn-wrapper .btn-sns{
    width: 97%;
  }
  .btn-wrapper .btn-sns{
    display: block;
  }
  .btn-wrapper .facebook{
    margin-right: 0;
    margin-bottom: 10px;
  }

header a{
  display: none;
}
header .fa-bars{
    display: block;
  }

  .main-page .contents{
    width: 97%;
  }

}

終わりに

今回作ったWEBページは1日で出来ましたが、かかった時間は途中休憩をはさんで12時間近いです(笑)
マジで時間掛かった・・・最大の課題はそこですね。

HTML&CSSの復習ということで作成を決めましたが、たったの一度作っただけでマスターしました！とはなりませんし、今後PHPやJavaScriptを学習して実装する機能の幅を増やすなのども検討できますが、今作れる最低限のものはできたかなぁと満足してます。

とりあえず、完成した！と呼べるものが作れた喜びと疲労感を味わいながらつらつらとまとめさせていただきました。