Progate html/css 初級編 道場コース攻略【仕様書だけでは厳しい人向け】

学習コースから一変、一気に難易度が上がります。

HTMLを一通り書いてからCSS記述に移るという行程を徹底しましょう。

道場コース全般の基本事項・攻略Tipsについては以下の記事もご覧ください。

Progate html/css 道場コース攻略Tips おススメ手順 コアな英語
超初心者向けです。

この記事ではhtml/css 初級編を攻略していきます。

プロゲート側の回答やGENが勝手に名付けたクラス名は div class=”~” としています。

html/css 道場コース 初級編 攻略

1.ヘッダーを作ろう

HTML記述

使うタグ・要素は以下4つです。 bodyタグの間に書いていきましょう。

【header】
ヘッダー全体。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 とli に float:left; を記述
header-logo(pでも可)にも float:left; を付与するのがポイント。

ロゴ単品に変化は起きないが、ロゴが最左に寄っていないとメニューが次行に行ってしまう。これを避けるため定義上最左に寄せておく。 

・header-logo にfloat:left;、li に display:inline-block; を記述
liをインラインブロック要素に変更する。これにより改行なく横に並ぶようになる。

ブロック要素・インライン要素については前回記事( 18. メインのレイアウト)もご参照下さい。

Progate html/css 初級編 学習コース攻略【初心者向けに解説】
詰まった際の参考にどうぞ
header の CSS で hight:90px; を定義せずに進めても正解できますが、仕様書通りに定義していないので厳密な正解ではありません。

2.トップ部分を作ろう

HTML記述

使うタグ・要素・セレクタの一例です。

【div class=”top”】
トップ部分全体を示す。
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記述

使うタグ・要素の一例です。

 

【div class=”contents-wrapper”】
コンテンツ全体。

【h3】
「学べるレッスン」の箇所。

【div class=”contents-item”】
画像と文章をひとくくりにしたもの。

【img】
contents-item内の画像。

【p】
画像下の文章。

contents-itemは4つ作ることになります。画像とテキストをセットのひとくくり作ってから3回コピペすると楽です。こんな感じで↓

<div class=”contents-item”>
<img src=””>
<p></p>
</div>

(これを4つ作ってから画像URL、テキストを入力)

imgのURLはヒントに書いてあります。文末のファイル名以外は共通なので、1つ目のURLを4か所にコピペして残り3つの文末だけ訂正すると時間短縮できます。

CSS記述

仕様書の上から順に作っていくと混乱しにくくて楽です。おススメ記述順はこちら↓

①.contents-wrapper{}
②.contents-wrapper h3{}
③.contents-item{}
④.contents-item img{}
⑤.contents-item p{}

contents-wrapper のheight:500px;はなくても正解になりますが、そのまま進めると4でズレを指摘されるので注意しましょう。

4.お問い合わせフォームを作ろう

HTML記述

初級道場編最大の鬼門です。用意すべきタグ・要素が多いです。

一例を示しておきます。必ずしもこれに準ずる必要はないですからね。

【class=”contact-form”】
コンテンツ全体。
【h3】
「お問い合わせ」部分。
【p】
「メールアドレス」「お問い合わせ内容」「必須項目は~」 の部分。
【input】
メールアドレス入力フォーム。1行なのでinput。
【textarea】
お問い合わせ内容入力フォーム。複数行なのでtextarea。
【class=”sousin”】
送信ボタン部分にクラス名を付与しておく。背景と文字色を独立して指定するため。
最後の送信ボタンは若干難易度高めかもしれません。
・送信ボタンの記述例
<input type=”submit” value=”送信” class=”sousin(クラス名は自由)”> 
これくらいは暗記しても良いと思います。

CSS記述

混乱しにくいおススメ記述順を示しておきます。

①.contact-form{}
②.contact-form h3{}
③.contact-form p{}
④input,textarea{}
⑤.sousin{}

contact-form の padding-topは0px でOK。ステージ3ですでに定義しているからです(仕様書には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
GEN

余談ですが、このパートだけ日本語入力するときにちょっとずれるんですよね。GENだけ?汗

5.フッター部分を作ろう

HTML記述

4が難しかった分、一気に簡単になります。以下、タグ・要素の一例です。

【footer】
フッター全体。header同様タグとして用意されているのでクラス名で宣言する必要がない。
【div class=”footer-logo”】
Progateを囲む。pなどで代用可。
【li】
「会社概要」「採用」「お問い合わせ」それぞれを囲む。
【ul】
3つのliを囲む。

CSS記述

ロゴを左に寄せれば、ロゴとメニューが横並びになります。この状態でリスト全体)を右に寄せれば見本通りの配置になります。

つまり footer-logo にfloat:left; 、ulにfloat:right;を指定されれば正解です。

道場初級編クリアです!お疲れさまでした。

道場コースとの向き合い方

「Progateは周回しても意味がない」という声が多いですが、道場コースは別です。

ほぼ答え状態の手順がないので仕様書を見てゼロからコードを書くという実践に近い経験を積むことができます。

これは割と良いトレーニングになると思います。


学習コースに比べて歯ごたえがある分、道場コースははるかにスキルアップにつながります。

GEN
GEN

ゲーム解説実況プレイの要領でやってみると良いです。
人に教える気持ちで喋りながらさくさく進められればばっちりです!

学習コースの方が楽なので後回しにしがちですが、それなりに自信がつき次第道場コースをやりこんで行きましょう!

Progate html/css 中級編 学習コース攻略【そこそこに道場やりましょう】
初級と比べると新たに教わる内容は少なくなっています。 半分近くは初...