-本日のアジェンダ-
1限目
学科 CSS基礎①
マークアップ技術のコツについて
2限目
学科 CSS基礎①
セレクタ記述のコツについて
3限目
学科 CSS基礎①
間違い探しについて
4限目
学科 CSS基礎①
実践トレーニング
5限目
学科 CSS基礎①
実践トレーニング
本日のテーマ
整理整頓しましょう
マークアップ攻略・技術向上のポイント！
マークアップ 時に、HTMLのコードの誤りやミスを回避するコツとして、タグチェッカー等を利用しましょう。
そもそもマークアップの目的は、「検索エンジン」に内容を伝えることです。
ならば、正しいマークアップの正解があるとすれば、そこに教えてもらいましょう。
CSSの記述の攻略・技術向上のポイント！
CSSの基本文法
CSSは、「セレクタ」「プロパティ」「値」の3つで構成されます。
それぞれを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という命令文が成立します。
CSS攻略のポイントは「セレクタをコントロールする事」
おススメルール
- リセット（1点）をして後に書く記述は絶対適用されるようにする
- id（100点）各ブロックの管理
- class（10点）はエレメント（各パーツ）の分類
- 親子関係を明確にする
- 上から順番に記述する
間違い探しの攻略・ポイント！
まず、確認はブラウザが絶対であるという事
すなわちブラウザが認識しない場合は、必ず誤りがあります。
おススメの確認の順番
- 原因が マークアップ の可能性なら、タグチェッカー等を使う
- 原因がCSSの場合ならデベロッパーツールを使う
デベロッパーツールで見つからない場合の例
- セレクタ記述スペルミス
- 閉じタグ｛｝の誤り
- 全角スペースの誤記述
- コロン：セミコロン；の記述ミス
- 「ID#」「class.」の記述ミス
- id名class名の付け方・使用方法の誤り
- そもそもHTML（マークアップ）が間違えている
というところが良くある間違いです。
最後に、おまけWebサイトの作品のチェックポイントとしてこれらが整理整頓され、第3者でも理解しやすい記述がされていることが望ましいです。