Progate html/css 道場コース攻略Tips おススメ手順 コアな英語

学習コースは答えがほぼ書いてあるので割とサクサク進んだものの…

道場編ムズすぎ!

という方が多いのではないでしょうか。

GEN自身へのアウトプットとプログラミング初学者向け攻略記事としてまとめておきます。

GEN
GEN

つまづいている方の参考になれば幸いです

html/css 道場コース おススメ手順

学習コースから一変して指示がなくなり、どこから手を付けたらいいかわからなくなります。

10周こなして、効率的だった方法をまとめておきます。

①プレビューと見本を確認しつつ、htmlを書く

いきなり仕様書を見ても良いですが、font-sizeやpaddingなどcssに書く情報がほとんどなので、後回しでOK。

htmlで宣言したクラス名に対応する指定をCSSで書いていくことになるので、順番としては

html→css

がわかりやすいです。

見本を見つつ必要なhtmlを書いていきます。

ちなみにこの作業をマークアップと呼んだりします。

②仕様書を見つつ、CSSを書く

cssで記述する文字サイズや色情報はいくら見本をがん見してもわかりません。

(30px #dee7ec みたいなやつです)

詳細が載っている仕様書通りに正確に書いていきましょう。

cssは具体的なプロパティを入力する前に、html内に登場する要素をすべて書いてしまいましょう。

ヘッダーを作る場合ならこんな感じです。

header{

}

.header-logo{

}

header ul{

}

header li{

}

③プレビュー・見本を見比べて、異なる点を調整する

②まで終えたらもう仕様書は見なくてOKです。プレビューと見本を見比べつつ、微調整していきます。

慣れないうちは float:left;、display:inline-block; が抜けていたり、別のクラスにcssを指定してしまっていたりするので修正しましょう。

デュアルディスプレイ(2画面)限定の効率アップ方法をご紹介します。

方法①:「仕様書を右クリック→画像として保存」して、片方の画面に仕様書を画像表示させる

方法②:ブラウザを2画面で開いておく。仕様書にカーソルをあわせてドラッグした状態でもう片方の画面にドロップさせる

これで画面上にプレビュー・見本・仕様書がすべてある状態で進められるので非常に楽です。

②の方法ならワンクリックでズームイン・アウトができるのでおススメです。

画像のダウンロード商用利用・二次配布でなければ規約違反ではないっぽいです(プロゲートのヘルプページ)。

Progate html/css 道場コース 小ネタ

正解です!と言われても不正解なことがある

・1pxや2pxのborderを要求される場面で、borderが短くても受理された。

・btn クラスのdisplay:inline-block; を記入漏れしたが受理された
→3あたりでやっぱり駄目ですと指摘された

こんなことが結構ありました。

仕様書に指示はないが、記述しないと正解できない箇所がある

・アイコンと文字の間に隙間を作る
・角をちょっとだけ丸くする
・カーソルを持っていくと色が変わる

仕様書で説明しきれない部分やそもそも説明していない部分がかなりあります。

見本とばっちり一緒であっても不正解判定されることがあるので、その際は答えを観てもOKです。

詳細は以降の記事でまとめます。

習ってない記述が答えにある

超有名なタグですがbrが前触れなく出てきました笑

ちょっとコアな英語

class名や記述で出てくる、とっつきにくい・読みにくい英語をまとめました。

英語が苦手な方や読みが微妙な方は参考にどうぞ。

wrapper

読み:ラッパー 意味:包むもの

「こちらの商品ラップ(ラッピング)しときますねー」のときの wrap にerがついたものです。

wrapper でぐぐると「ラッパー」が何故か最初に出てきますが韻を踏む人ではありません。

大体は大外の枠で使われるクラス名です。

container

読み:コンテーナー 意味:入れ物

貨物輸送などで使われるコンテナです。wrapperより内側の枠で使われやすいクラス名です。

cursor

読み:カーソル 意味:パソコンのカーソル(まんま

くーそーではありません。

progateでは cursor:pointer: だけ覚えればOKです。

hover

読み:ホバー 意味:さまよう、うろつく

ホバリング移動とかのホバーです。

カーソルが重なった時の演出を決めます。

radius

読み:レイディアス 意味:半径

数学の授業でで円の面積や外周を出す公式で出てきた”r”です。

border-radius という記述で、ボタンの角を丸くするときなどに使います。

GEN
GEN

ラディアスちゃうよ

opacity

読み:オパシティ。 意味:不透明度、あいまいさ

画像や文字を透かせたいときに使います。hoverとセットが多いです。

プログラミング
GENをフォローする

GENのプロフィール

(Youtubeにて毎週生放送中)

意識の低いIT自営業7年目。ネットを用いた物販・広告・金融業が得意。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。 twitterはこちら

禿げてもええやないか!スキンヘッド男道
タイトルとURLをコピーしました