pictureタグ

画面幅によってファーストビューを切り替えるとき
1. スマホ用とPC用の画像を用意する
2. pictureタグを使う
3. 768pxをブレイクポイントとするとタブレットサイズ以下は画像が切り替わる

共通クラスをつける

完成形を確認し、同じ部分を見つけたら、同じクラスをつける
(CSSの記述が減る)
共通クラスでは分かりやすい名前を付ける
section-heading section-heading-main section-heading-sub

共通クラスで作ったパーツだが、色だけ変えたいなどのときは、半角あけてクラス追加するとよい

共通クラスのメリット

  • 同じスタイルを書かなくて済む
  • 複数の要素に同じスタイルを適用
  • デザイン変更の際、1か所の修正でOK
  • 適切なクラス名をつけると、管理がしやすい

HTML,CSSにはこれが絶対正解というものはないので、いろいろな書き方を考える

form関連

form関連タグは bodyで指定したCSSが適応されないものがある
input buttonなどそれぞれ個別に適応させる必要がある
字体など確認忘れがちなので注意

スペルミス

スペルミスは時間を大幅にロスする
手打ちを信じない

  • Emmetのショートカットを使う
  • エディタの予測変換を使う
  • コピーペーストを使う

投稿者 sochankun

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です