はじめに
この記事は駆け出しエンジニアの最初の難関であるProgateの道場コースを今まさに挫折しかけている人に向け、ひとつひとつ実践と解説を交え、一緒に攻略しようという趣旨のものとなります。
できるようになること
道場コースHTML & CSS初級編をクリアできます。
全体像の確認
まずは全体像を把握しましょう。
とりあえず大きく３つのdiv要素に分けてみましょう。
header、main、footerに分けることができました。
道場コースの手順通り、最初はheaderから攻めていくことにします。
headar
headarを各div要素ごとに分けるとこんな感じです。
<divclass="header"><divclass="header-logo"></div><divclass="header-list"></div></div>header-list内はul要素で構成されています。
そこに文字を入れちゃいましょう。
<divclass="header"><divclass="header-logo">Progate</div><divclass="header-list"><ul><li>プログラミングとは</li><li>学べるレッスン</li><li>お問い合わせ</li></ul></div></div>現状はこんな感じです。
※Progateではデフォルトでli要素に対しlist-style: none;が適用されているので頭の「・」は無くなっています。本来は手動でlist-style: none;を付ける必要があります。
ではCSSを付けていきましょう。
まずはheaderクラスの背景色を付けます。
.header{background-color:#26d0c9;}
divはブロック要素なのでwidth（幅）とheight(高さ)を指定しなければ、
・幅は親要素のwidth(ここではbody)に依存します。
・高さは含まれる内容の高さ分追加されます。
では次に要素を横並びにしましょう。
ここで初級道場コースの番人こと、「float」が登場します。
「float」の機能を簡単に説明します。float: left; ＝ 左に寄せるfloat: right; ＝ 右に寄せる
まずheader-logoに対してfloat: left;を適応させましょう。
.header{background-color:#26d0c9;}.header-logo{float:left;}すると
「ん？なんで「Progate」と「プログラミングとは」が横並びになってるの？？」
と思った方がいるかも知れません。
float: left;は「左に寄せる」ですが、正確には「浮かせて左に寄せる」です。
ではこれの見る角度を変えて見ましょう
header-logoに対してfloat: left;を適応させると・・・
header-logoが浮きました！
しかしこのままでは文字が被ってしまうので自動的に文字が移動します。
ではfloatの仕様がわかったところで次はheader-listのそれぞれのli要素にfloat: left;を適用させましょう。
.header{background-color:#26d0c9;}.header-logo{float:left;}.header-listli{float:left;}これでheader-list内のそれぞれのli要素が上から順番に浮いて左に寄るはずです。
できました！
・・・が背景色が消えてしまいました。
これはブロック要素の中身が無ければ高さが無くなるという性質が原因となっています。
仕様書の指定通り、header-logoに高さを指定して上げましょう。
.header{background-color:#26d0c9;height:90px;}.header-logo{float:left;}.header-listli{float:left;}
いい感じですね！
続いてheader内のスタイルを整えて行きましょう。
まずはmarginを使って間隔を空けます。
.header{background-color:#26d0c9;height:90px;}.header-logo{float:left;margin:20px40px;}.header-listli{float:left;margin:33px20px;}
間隔を開ける方法としてmarginとpaddingがあります。
最初はこれがどっちがどっちか分からなくなるものなので、ここで詳しく解説しておきます。
header-logoを例にとってみましょう
わかりやすくする為header-logoに対しborderを指定します。
.header-logo{float:left;margin:20px40px;border:1pxsolidblack;}
では、まずはmarginを変更してみます。
上下のmarginを40pxにします。
.header-logo{float:left;margin:40px40px;border:1pxsolidblack;}
するとボーダーラインごとheader-logoが動きましたね。
続いてpaddingを指定してみます。
.header-logo{float:left;margin:40px40px;padding:10px;border:1pxsolidblack;}
今度はボーダラインの内側の間隔が空いたのがわかります。
要はmarginはボーダーラインの外側に間隔を空けるpaddingはボーダーラインの内側に間隔を空ける
ということになります。
ではheaderを完成させましょう。
あとはheader-logoのfont-sizeとテキストの色を変えればOKです。
.header{background-color:#26d0c9;height:90px;color:#fff;/*親要素に指定すれば子要素にも適用されます*/}.header-logo{float:left;margin:20px40px;font-size:36px;}.header-listli{float:left;margin:33px20px;}
これでheaderの完成です！
main
次にmainを作っていきます。
mainはたくさんの要素がありますが、ひとつひとつ落ち着いて見ていきましょう。
とりあえず、mainを大きく3つのdiv要素に分けてみます。
<divclass="header"><divclass="header-logo">Progate</div><divclass="header-list"><ul><li>プログラミングとは</li><li>学べるレッスン</li><li>お問い合わせ</li></ul></div></div><!-- ↓ここから --><divclass="main"><divclass="copy-container"></div><divclass="contents"></div><divclass="contact-form"></div></div>さて、ではcopy-containerから攻めて行きます。
ここは簡単です、各テキストはｈ1、ｈ２タグで構成されています。
そして、「 . 」のみが赤色になっているので、あとでスタイルを付ける為にspanタグで囲ってあげましょう
<divclass="copy-container"><h1>HELLO WORLD<span>.</span></h1><h2>プログラミングの世界へようこそ</h2></div>
現状こんな感じです。
次に仕様書の通りスタイルを付けていきます
.header-listli{float:left;margin:33px20px;}/* ↓ここから */.main{padding:100px80px;}.copy-containerh1{font-size:140px;}.copy-containerh2{font-size:60px;}.copy-containerspan{color:#ff4a4a}
こんな感じになったと思います。
mainのpadding-bottomは最終的に100pxになるので今のうちに付けています。
ではcontentsに移ります。
ここはまたfloatが入ってくるので少しややこしく感じるかも知れません。
とりあえず、contentsを各要素に分けてみます。
<divclass="main"><divclass="copy-container"><h1>HELLO WORLD<span>.</span></h1><h2>プログラミングの世界へようこそ</h2></div><!-- ↓ここから --><divclass="contents"><h3class="section-title"></h3><!-- item1 --><divclass="contents-item"><imgsrc=""><p></p></div><!-- item2 --><divclass="contents-item"><imgsrc=""><p></p></div><!-- item3 --><divclass="contents-item"><imgsrc=""><p></p></div><!-- item4 --><divclass="contents-item"><imgsrc=""><p></p></div></div>急に記述が長くなるとどれがどれだか分からなくなりますよねｗ
落ち着いてコメントアウトを活用しつつ、少しでも見やすくしましょう。
さぁ、雛形はできたので、あとは必要な項目を入れていくだけです。
画像のURLはProgateのヒントからコピペしましょう。
<divclass="contents"><h3class="section-title">学べるレッスン</h3><!-- item1 --><divclass="contents-item"><imgsrc="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"><p>HTML & CSS</p></div><!-- item2 --><divclass="contents-item"><imgsrc="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"><p>PHP</p></div><!-- item3 --><divclass="contents-item"><imgsrc="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"><p>Ruby</p></div><!-- item4 --><divclass="contents-item"><imgsrc="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"><p>Swift</p></div></div>
材料は揃いました。
スタイルを付けて行きましょう。
まず、横並びから片付けましょう。
flaotの概念を理解したあなたにはもう解りますよね？
.copy-containerspan{color:#ff4a4a}/* ↓ここから */.contents-item{float:left;}
できました！
しかし、flaotの処理はこれで終わりではありません。
確かflaotで浮いた分だけ、親要素の高さ(height)は消えてしまうのでしたね？
現状、親要素contentsの高さはcontentsの中にあるsection-titleの高さ分しかありません。
このままだと次の要素を追加してもレイアウトが崩れてしまいます。
↓角度をかえると・・・
Progateの仕様書通り、contentsのheightを500pxにしてあげましょう。
.copy-containerspan{color:#ff4a4a}.contents{height:500px;}.contents-item{float:left;}
OKです！
さぁ、ここまでできたらもう少しです。
あとは仕様書通りにスタイルを付けましょう。
.contents{height:500px;}.contents-item{float:left;}.section-title{font-size:28px;border-bottom:2pxsolid#dee7ec;/* ↓paddingとmarginを上手く使い分ける必要があります */padding-bottom:15px;margin:100px050px;}.contents-item{margin-right:40px;}.contents-itemp{font-size:24px;margin-top:30px;}
いいですね！
ここまで来るとあとは折り返しです！
頑張りましょう！
main部の最後contact-formに入ります。
例のごとく、各要素ごとに分けていきます。
<!-- item4 --><divclass="contents-item"><imgsrc="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"><p>Swift</p></div></div><!-- ↓ここから --><divclass="contact-form"><h3class="section-title">お問い合わせ</h3><p>メールアドレス（必須）</p><inputtype="text"><p>お問い合わせ内容（必須）</p><textarea></textarea><p>※必須項目は必ずご入力ください</p><inputtype="submit"value="送信"class="contact-submit"></div>深く考えずにポンポンと置いていけば良いですね。
送信ボタンにはcontact-submitクラスを付けてあげましょう。
現状はこんな感じです。
スタイルに関しても仕様書通りにやればいけそうです
section-titleには前にスタイルを付けているので触る必要はないですね。
.contents-itemp{font-size:24px;margin-top:30px;}/* ↓ここから */input,textarea{width:400px;padding:20px;margin:10px030px;border:1pxsolid#dee4ec;}.contact-submit{font-size:18px;background-color:#dee7ec;color:#889eab;}
これでmainは終わりです！
次でいよいよラストです！
footer
footerの構成はこんな感じです。
ここでもfloatを使う必要がありそうですね。
とりあえずHTMLを置いて行きます。
<p>※必須項目は必ずご入力ください</p><inputtype="submit"value="送信"class="contact-submit"></div></div><!-- ↓ここから --><divclass="footer"><divclass="footer-logo">Progate</div><divclass="footer-list"><ul><li>会社概要</li><li>採用</li><li>お問い合わせ</li></ul></div>そして、float以外のスタイルは付けてしまいますね。
.contact-submit{font-size:18px;background-color:#dee7ec;color:#889eab;}/* ↓ここから */.footer{color:#fff;height:120px;background-color:#2f5167;padding:40px;}.footer-logo{font-size:32px;}.footer-list{}.footer-listli{margin-bottom:20px;}こんな感じになっているはずです。
ここからやりたいことはfooter-listを右に持っていくことですね。
ではfooter-listにfloat: right;を適用させてやれば良さそうです。
.footer{color:#fff;height:120px;background-color:#2f5167;padding:40px;}.footer-logo{font-size:32px;}.footer-list{float:right;}.footer-listli{margin-bottom:20px;} すると・・・
header-listの位置が少し下にズレていますね。
これだけでは足りないようです。
header-logoにもfloatを適用させましょう。
.footer-logo{font-size:32px;float:left;}.footer-list{float:right;}.footer-listli{margin-bottom:20px;}
完成！
ここまでお疲れ様でした！
良いProgateライフを！！