禿げてもええやないか!スキンヘッド男道20代半ばでスキンヘッドを決めたハゲの人生哲学という名目の雑記ブログ。ネットビジネス・副業は一通り試してきたフリーランス7年目。今年はweb系(マークアップ)言語へフルコミット。2020.01.14学習コースは答えがほぼ書いてあるので割とサクサク進んだものの...道場編ムズすぎ!という方が多いのではないでしょうか。GEN自身へのアウトプットとプログラミング初学者向け攻略記事としてまとめておきます。学習コースから一変して指示がなくなり、どこから手を付けたらいいかわからなくなります。10周こなして、効率的だった方法をまとめておきます。1プレビューと見本を確認しつつ、htmlを書くいきなり仕様書を見ても良いですが、font-sizeやpaddingなどcssに書く情報がほとんどなので、後回しでOK。htmlで宣言したクラス名に対応する指定をCSSで書いていくことになるので、順番としてはhtml→cssがわかりやすいです。見本を見つつ必要なhtmlを書いていきます。ちなみにこの作業をマークアップと呼んだりします。2仕様書を見つつ、CSSを書くcssで記述する文字サイズや色情報はいくら見本をがん見してもわかりません。みたいなやつです)詳細が載っている仕様書通りに正確に書いていきましょう。cssは具体的なプロパティを入力する前に、html内に登場する要素をすべて書いてしまいましょう。ヘッダーを作る場合ならこんな感じです。li{}3プレビュー・見本を見比べて、異なる点を調整する2まで終えたらもう仕様書は見なくてOKです。プレビューと見本を見比べつつ、微調整していきます。抜けていたり、別のクラスにcssを指定してしまっていたりするので修正しましょう。デュアルディスプレイ(2画面)限定の効率アップ方法をご紹介します。方法1:「仕様書を右クリック→画像として保存」して、片方の画面に仕様書を画像表示させる方法2:ブラウザを2画面で開いておく。仕様書にカーソルをあわせてドラッグした状態でもう片方の画面にドロップさせるこれで画面上にプレビュー・見本・仕様書がすべてある状態で進められるので非常に楽です。2の方法ならワンクリックでズームイン・アウトができるのでおススメです。なければ規約違反ではないっぽいです(プロゲートのヘルプページ)。小ネタ正解です!と言われても不正解なことがある・1pxや2pxのborderを要求される場面で、borderが短くても受理された。記入漏れしたが受理された→3あたりでやっぱり駄目ですと指摘されたこんなことが結構ありました。仕様書に指示はないが、記述しないと正解できない箇所がある・アイコンと文字の間に隙間を作る・角をちょっとだけ丸くする・カーソルを持っていくと色が変わる仕様書で説明しきれない部分やそもそも説明していない部分がかなりあります。見本とばっちり一緒であっても不正解判定されることがあるので、その際は答えを観てもOKです。詳細は以降の記事でまとめます。習ってない記述が答えにある超有名なタグですがbrが前触れなく出てきました笑ちょっとコアな英語class名や記述で出てくる、とっつきにくい・読みにくい英語をまとめました。英語が苦手な方や読みが微妙な方は参考にどうぞ。erがついたものです。ぐぐると「ラッパー」が何故か最初に出てきますが韻を踏む人ではありません。大体は大外の枠で使われるクラス名です。貨物輸送などで使われるコンテナです。wrapperより内側の枠で使われやすいクラス名です。意味:パソコンのカーソル(まんまくーそーではありません。意味:さまよう、うろつくホバリング移動とかのホバーです。カーソルが重なった時の演出を決めます。数学の授業でで円の面積や外周を出す公式で出てきた”r”です。いう記述で、ボタンの角を丸くするときなどに使います。GENラディアスちゃうよopacity読み:オパシティ。意味:不透明度、あいまいさ画像や文字を透かせたいときに使います。hoverとセットが多いです。プログラミングシェアするTwitterFacebookはてブPocketLINEコピーGENをフォローするGENのプロフィール(Youtubeにて毎週生放送中)意識の低いIT自営業7年目。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。twitterはこちら。学習・道場コース攻略Tips【2・3周でOKです】レスポンシブの基礎です。アコーディオン】LPでよく使う実装が多め。(7)GENのプロフィール(Youtubeにて毎週生放送中)意識の低いIT自営業7年目。2020年はかねてより準備していたプログラミング(マークアップ)事業にフルコミット。"https://sukinnheddootokomiti.com/wp-content/plugins/table-of-contents-plus/front.min.js-end");タイトルとURLをコピーしました。