振り返り
セレクタにはそれぞれ特典があるためどのセレクタが点数が高いのか理解しておこうと思った。理解しておかないと後からchromeでの表示がおかしくなるので、きちんと対応していこうと思う。
学びまとめ
HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用される。
コーディングの手順１
【マークアップ・HTMLファイルの作成①】
「!doctypehtml」「html」「head」「body」等骨組みのタグを整える。
【マークアップ・HTMLファイルの作成②】
「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップ。
【マークアップ・HTMLファイルの作成③】
「header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップ。
【マークアップ・HTMLファイルの作成⑤】
検証ツールを上手く使う。
【マークアップ・HTMLファイルの作成④】
デザインに合わせて「div」や「span」を追加して「id=””」「class=””」を付けていく。
コーディングの手順２
【CSSでデザインをする】
【CSSの記述①】
リセットCSSの設定
※CSSを上手くコントロールするためにリセットCSSを設定する。
【CSSの記述②】
セレクタ（selector）の記述を先にする。点数計算とセレクタの記述ルールに気を付ける。
【CSSの記述③】
ひたすらプロパティを書いていく。コツはデザインの上から作成していく。
【CSSの記述④】
スマーフォン対応「メディアクエリ」を足す。デベロッパーツールのシュミレーターなどを使って、実機検証を行っていく。
【CSSの記述⑤】
・SNSやjQueryの埋め込みは最後に行うのがコツ。
セレクタの得点について
セレクタには優先順位があり点数計算をして高得点のものが採用される。同じ得点の場合は後ろに書いてあるものが採用される。点数計算の結果によっては前に書いてあるセレクタが採用されてしまうことがあるので意図したスタイルにならない時は点数を確認する。
Chrome検証ツールについて
ブラウザに表示されるWebページの設定情報を参照したり、想定通りに表示されない場合の調査には、Chrome の検証ツールの使用が有効。また、スマートフォンやタブレットでの表示型式を確認できる。
RWD 対応のサイトについて
- 幅広デザインでの Web ページ作成
- viewport 定義の指定
- 横幅変動時のコンテンツ幅を設定
- Media Querie でデザインを整える
- 画面サイズに合わせた表示部品の導入
コメント