学習コースは答えがほぼ書いてあるので割とサクサク進んだものの…
道場編ムズすぎ！
という方が多いのではないでしょうか。
GEN自身へのアウトプットとプログラミング初学者向け攻略記事としてまとめておきます。
つまづいている方の参考になれば幸いです
html/css 道場コース おススメ手順
学習コースから一変して指示がなくなり、どこから手を付けたらいいかわからなくなります。
10周こなして、効率的だった方法をまとめておきます。
①プレビューと見本を確認しつつ、htmlを書く
いきなり仕様書を見ても良いですが、font-sizeやpaddingなどcssに書く情報がほとんどなので、後回しでOK。
htmlで宣言したクラス名に対応する指定をCSSで書いていくことになるので、順番としては
html→css
がわかりやすいです。
見本を見つつ必要なhtmlを書いていきます。
ちなみにこの作業をマークアップと呼んだりします。
②仕様書を見つつ、CSSを書く
cssで記述する文字サイズや色情報はいくら見本をがん見してもわかりません。
（30px #dee7ec みたいなやつです）
詳細が載っている仕様書通りに正確に書いていきましょう。
cssは具体的なプロパティを入力する前に、html内に登場する要素をすべて書いてしまいましょう。
ヘッダーを作る場合ならこんな感じです。
③プレビュー・見本を見比べて、異なる点を調整する
②まで終えたらもう仕様書は見なくてOKです。プレビューと見本を見比べつつ、微調整していきます。
慣れないうちは float:left;、display:inline-block; が抜けていたり、別のクラスにcssを指定してしまっていたりするので修正しましょう。
方法①：「仕様書を右クリック→画像として保存」して、片方の画面に仕様書を画像表示させる
方法②：ブラウザを２画面で開いておく。仕様書にカーソルをあわせてドラッグした状態でもう片方の画面にドロップさせる
これで画面上にプレビュー・見本・仕様書がすべてある状態で進められるので非常に楽です。
②の方法ならワンクリックでズームイン・アウトができるのでおススメです。
画像のダウンロード商用利用・二次配布でなければ規約違反ではないっぽいです（プロゲートのヘルプページ）。
Progate html/css 道場コース 小ネタ
正解です！と言われても不正解なことがある
こんなことが結構ありました。
仕様書に指示はないが、記述しないと正解できない箇所がある
仕様書で説明しきれない部分やそもそも説明していない部分がかなりあります。
見本とばっちり一緒であっても不正解判定されることがあるので、その際は答えを観てもOKです。
詳細は以降の記事でまとめます。
習ってない記述が答えにある
超有名なタグですがbrが前触れなく出てきました笑
ちょっとコアな英語
class名や記述で出てくる、とっつきにくい・読みにくい英語をまとめました。
英語が苦手な方や読みが微妙な方は参考にどうぞ。
wrapper
「こちらの商品ラップ（ラッピング）しときますねー」のときの wrap にerがついたものです。
wrapper でぐぐると「ラッパー」が何故か最初に出てきますが韻を踏む人ではありません。
大体は大外の枠で使われるクラス名です。
container
貨物輸送などで使われるコンテナです。wrapperより内側の枠で使われやすいクラス名です。
cursor
くーそーではありません。
progateでは cursor:pointer: だけ覚えればＯＫです。
hover
ホバリング移動とかのホバーです。
カーソルが重なった時の演出を決めます。
radius
数学の授業でで円の面積や外周を出す公式で出てきた”r”です。
border-radius という記述で、ボタンの角を丸くするときなどに使います。
ラディアスちゃうよ
opacity
画像や文字を透かせたいときに使います。hoverとセットが多いです。
