CSS基礎

CSSとは

  • テキストP.066〜
  • CSSは、Cascading Style Sheetsの略
  • HTML同様にwebサイトを作成するために使用される言語
  • CSSを使うことで、HTMLの要素に対し、
    • 要素の大きさ
    • 要素の並び
    • 余白

    などの見た目を追加することができる

CSSの書き方
  • テキストP.067

CSSファイルとHTMLファイルの紐付け

  • テキストP.070〜071
内部参照(embed)
  • HTMLのhead要素内に「style要素」を作成し、その中に記述する
  • テキストP.073
  • HTMLのhead要素内に「link要素」を作成し、その中にCSSファイルのある位置を記述する
<link rel="stylesheet" href="css/style.css">

CSSが適用されない場合

  • 色などの指定が変更されない場合
  1. デベロッパーツールを開き<head>タグを見つける
  2. <link>タグのhref属性を確認
  3. CSSファイルが開くか確認する

この作業は、コンテクストメニュー(右クリック)で「ページのソースを表示」でも同様の操作を行うことができる。

CSSの記述ミスの調べ方
  1. CSSを適用させたはずの要素を選択する
  2. エラーが出ていないかを確認する
CSSが反映されない時に確認すべき項目
  • CSSファイルが読み込めてない
  • パスの指定が間違っている
  • ”.” や ”#” を忘れている
  • スペルミス
  • 全角スペースが入ってしまっている
  • ブラウザのキャッシュが残っている
  • セレクタの詳細度が競合している