iSARA模写 第4回です。
前回はこちら↓
今回はこちらを作成します↓
今回のポイントは、
既に使ったcssを使うこと。
いつもの手順で
①レイアウトの確認
②HTMLの書き出し
③CSSで整えます。
①レイアウトの確認
②HTMLを書く
上から順にHTML要素を作っていく。
pタグ内の文書は、原文をコピペします。
＜div＞はレイアウトを確認しつつ作っておかないと、
後で配置が難しくなります。
③CSSで見た目を整える
今回のポイントは、
☑️同じCSSの使い回し
でしょうか・・・
例えば、
・鍵カッコ「」を作る疑似要素や
・divを横並びにする{display:inline-box;}
・imgを下方に動かすpositionなどは
全て第③回目で出てきました↓
class名を計画的に付けておくことで、後で出てきた時も使いまわせます。
私もクラス名の付け方については、勉強中です。
第4回はここまで。さらにスピードアップしていきたいです。
