学科 CSS基礎①

-本日のアジェンダ-

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

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

3限目
学科 CSS基礎①
間違い探しについて

4限目
学科 CSS基礎①
実践トレーニング

5限目
学科 CSS基礎①
実践トレーニング

本日のテーマ

整理整頓しましょう

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

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

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

CSSの基本文法

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

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

おススメルール

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

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

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

おススメの確認の順番

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

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

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

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