投稿者: admin

-本日のアジェンダ-

1限目
学科 HTML基礎⑦
マークアップ技術のコツについて

2限目
学科 HTML基礎⑦
セレクタ記述のコツについて

3限目
学科 HTML基礎⑦
間違い探しについて

4限目
学科 HTML基礎⑦
実践トレーニング

5限目
学科 HTML基礎⑦
実践トレーニング

本日のテーマ

上手に間違い探しをする為に…

マークアップ攻略・技術向上のポイント！

マークアップ 時に、HTMLのコードの誤りやミスを回避するコツとして、タグチェッカー等を利用しましょう。
そもそもマークアップの目的は、「検索エンジン」に内容を伝えることです。
ならば、正しいマークアップの正解があるとすれば、そこに教えてもらいましょう。

• HTML・CSSの参考サイト

CSSの記述の攻略・技術向上のポイント！

CSSの基本文法

CSSは、「セレクタ」「プロパティ」「値」の3つで構成されます。
それぞれを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という命令文が成立します。

CSS攻略のポイントは「セレクタをコントロールする事」

• セレクタの得点 | HTML・CSSの基礎 |トレーニング用 Sample

おススメルール

1. リセット（1点）をして後に書く記述は絶対適用されるようにする
2. id（100点）各ブロックの管理
3. class（10点）はエレメント（各パーツ）の分類
4. 親子関係を明確にする
5. 上から順番に記述する

間違い探しの攻略・ポイント！

まず、確認はブラウザが絶対であるという事
すなわちブラウザが認識しない場合は、必ず誤りがあります。

おススメの確認の順番

• 原因が マークアップ の可能性なら、タグチェッカー等を使う
• 原因がCSSの場合ならデベロッパーツールを使う

デベロッパーツールについて

デベロッパーツールで見つからない場合の例

• セレクタ記述スペルミス
• 閉じタグ｛｝の誤り
• 全角スペースの誤記述
• コロン：セミコロン；の記述ミス
• 「ID#」「class.」の記述ミス
• id名class名の付け方・使用方法の誤り
• そもそもHTML（マークアップ）が間違えている　

というところが良くある間違いです。
最後に、おまけWebサイトの作品のチェックポイントとしてこれらが整理整頓され、第3者でも理解しやすい記述がされていることが望ましいです。