学習コースから一変、一気に難易度が上がります。
HTMLを一通り書いてからCSS記述に移るという行程を徹底しましょう。
道場コース全般の基本事項・攻略Tipsについては以下の記事もご覧ください。
この記事ではhtml/css 初級編を攻略していきます。
プロゲート側の回答やGENが勝手に名付けたクラス名は div class=”~” としています。
html/css 道場コース 初級編 攻略
1.ヘッダーを作ろう
HTML記述
使うタグ・要素は以下4つです。 bodyタグの間に書いていきましょう。
ヘッダー全体。div class=”header” とする必要はない。
headerタグとして最初から用意されているので<header></header>でOK。
【div class=”header-logo”】
Progate というテキストロゴの部分のクラス名。普通に p でも可。
pにした場合のCSS記述は header p{ }。
【ul】
メニュー全体を司る。liを囲うように記述する。CSS記述の際は header ul{ }。
【li】
個々のメニューテキストをくくる。CSS記述の際は header li{ }。
CSS記述
header の CSS を書く際は文頭ピリオドが不要になる点に気をつけてください。
ロゴとメニューの並べ方についてはパターンが複数あるので2つご紹介します。
header-logo(pでも可）にも float:left; を付与するのがポイント。
ロゴ単品に変化は起きないが、ロゴが最左に寄っていないとメニューが次行に行ってしまう。これを避けるため定義上最左に寄せておく。
liをインラインブロック要素に変更する。これにより改行なく横に並ぶようになる。
ブロック要素・インライン要素については前回記事（ 18. メインのレイアウト）もご参照下さい。
2.トップ部分を作ろう
HTML記述
使うタグ・要素・セレクタの一例です。
トップ部分全体を示す。
headerと異なり新たに宣言したので、関連するCSSには文頭ピリオドがつく。
【h1】
HELLO WORLD の箇所。.
CSSは .top h1{} で記述。
【h2】
プログラミングの世界へようこそ の部分。
CSSは.top h2{}で記述。
【span】
HELLO WORLDの右のピリオド（.）。
CSSは .top span{} で記述。
CSS記述
仕様書に表記はないですが、見本にのみtop全体のpadding-bottomが100pxあります。
これは次ステージのcontents全体のpadding-top で指定される部分なので気にしなくてOK。
仕様書通りに作ると見本にある余白ができないので不安になりますがちゃんと正解できます。
3.コンテンツ部分を作ろう
HTML記述
使うタグ・要素の一例です。
コンテンツ全体。
【h3】
「学べるレッスン」の箇所。
【div class=”contents-item”】
画像と文章をひとくくりにしたもの。
【img】
contents-item内の画像。
【p】
画像下の文章。
contents-itemは４つ作ることになります。画像とテキストをセットのひとくくり作ってから3回コピペすると楽です。こんな感じで↓
<img src=””>
<p></p>
</div>
（これを４つ作ってから画像URL、テキストを入力）
imgのURLはヒントに書いてあります。文末のファイル名以外は共通なので、１つ目のURLを4か所にコピペして残り３つの文末だけ訂正すると時間短縮できます。
CSS記述
仕様書の上から順に作っていくと混乱しにくくて楽です。おススメ記述順はこちら↓
②.contents-wrapper h3{}
③.contents-item{}
④.contents-item img{}
⑤.contents-item p{}
contents-wrapper のheight:500px;はなくても正解になりますが、そのまま進めると４でズレを指摘されるので注意しましょう。
4.お問い合わせフォームを作ろう
HTML記述
初級道場編最大の鬼門です。用意すべきタグ・要素が多いです。
一例を示しておきます。必ずしもこれに準ずる必要はないですからね。
コンテンツ全体。
「お問い合わせ」部分。
「メールアドレス」「お問い合わせ内容」「必須項目は～」 の部分。
メールアドレス入力フォーム。1行なのでinput。
お問い合わせ内容入力フォーム。複数行なのでtextarea。
送信ボタン部分にクラス名を付与しておく。背景と文字色を独立して指定するため。
<input type=”submit” value=”送信” class=”sousin(クラス名は自由)”>
CSS記述
混乱しにくいおススメ記述順を示しておきます。
②.contact-form h3{}
③.contact-form p{}
④input,textarea{}
⑤.sousin{}
contact-form の padding-topは0px でOK。ステージ３ですでに定義しているからです（仕様書には2回書かれています）。
入力フォームが左半分になるときは inputとtextareaにwidth:400px; を指定してください。
フォーム周囲が良い感じに透明にならないときは、border:1px solid #dee7ec; 。4方向に薄い枠線を用意することでいい感じに仕上がります。
この状態でも「正解です！」と言われますが、結構な方がお問い合わせ下のボーダーが400px で固定されてしまっているのではないでしょうか。
これはcontact-formでwidthを指定したことが原因です。これによりh3のボーダーに対しても400pxの幅が指定されてしまうのです。
よってcontact-formのwidthを消して、input,textareaにのみ400pxのwidthを指定すれば見本通りになります。
もしくはhtmlファイルの方で、h3をcontact-form外に出してしまう形でもOKです。その際は直前のcontents-wrapper内のh3とかぶらないよう新たなクラスを指定してあげましょう。
余談ですが、このパートだけ日本語入力するときにちょっとずれるんですよね。GENだけ？汗
5.フッター部分を作ろう
HTML記述
4が難しかった分、一気に簡単になります。以下、タグ・要素の一例です。
フッター全体。header同様タグとして用意されているのでクラス名で宣言する必要がない。
Progateを囲む。pなどで代用可。
「会社概要」「採用」「お問い合わせ」それぞれを囲む。
３つのliを囲む。
CSS記述
ロゴを左に寄せれば、ロゴとメニューが横並びになります。この状態でリスト全体)を右に寄せれば見本通りの配置になります。
つまり footer-logo にfloat:left; 、ulにfloat:right;を指定されれば正解です。
道場初級編クリアです！お疲れさまでした。
道場コースとの向き合い方
ほぼ答え状態の手順がないので仕様書を見てゼロからコードを書くという実践に近い経験を積むことができます。
これは割と良いトレーニングになると思います。
progate html/cssの道場編をやりこみ中。
（ほぼ答えに近い）指示をくれる通常編に比べて仕様書のみで一気に難易度上がりますね汗
「progateは周回する意味なし」と言われがちですが、実際コーディング案件でpsd仕様書をもらうことも多いので、どのみちこのレベルはサクッとやれないと厳しそう。
— 仙人のGEN@毎週月曜18時youtube生放送 (@hagenogendesu) January 5, 2020
学習コースに比べて歯ごたえがある分、道場コースははるかにスキルアップにつながります。
ゲーム解説実況プレイの要領でやってみると良いです。
人に教える気持ちで喋りながらさくさく進められればばっちりです！
学習コースの方が楽なので後回しにしがちですが、それなりに自信がつき次第道場コースをやりこんで行きましょう！
