トップ > ★CSS基礎 > CSSとは

CSSとは

★CSS基礎

CSSとは

  • テキストP.066〜
  • Cascading Style Sheets
  • 構造化された文書をどのように表現するのかを指定するための言語
  • 文字の色、文字の大きさ、余白などのレイアウトの指定
CSSのコーディング規約（Google）
CSSの基本書式
  • テキストP.067

h1 { color: red; }

CSSをHTMLに適用

  1. style属性で局所的にスタイルを適用する
  2. style要素で文章単位で適用する（embed）
  3. link要素で外部CSSファイルを読み込んで適用する
style属性で局所的にスタイルを適用する
<p style="color: red;">style属性で文字色が赤になります。</p>
style要素で文章単位で適用する（embed）
  • テキストP.073
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<style>
p { color: red; }
</style>
</head>
<body>
<h1>見出し</h1>
<p>style要素でCSSが適用されて文字色が赤になります。</p>
</body>
</html>
link要素で外部CSSファイルを読み込んで適用する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>見出し</h1>
<p>link要素で外部CSSが適用されて文字色が赤になります。</p>
</body>
</html>


《 style.css 》

@charset "UTF-8";

p { color: red; }

セレクタの種類

タイプセレクタ

IDセレクタ
  • 要素に対し id属性として ID名を付与した場合、「# + ID名」をセレクタ名として指定する
  • ID名の重複はできません
<p id="blue">この文字色は青になります。</p>

#blue { color: blue; }
クラスセレクタ
  • 要素に対し class属性として ID名を付与した場合、「. + ID名」をセレクタ名として指定する
  • クラス名の重複は可能で、共通する修飾に利用します
  • 要素に対し、ID名とクラス名を同時に指定することは可能です。
<p class="blue">この文字色は青になります。</p>

.blue { color: blue; }
子孫セレクタ
<div class="content">
<p>この文字色は青になります。</p>

.content p { color: blue; }
子セレクタ
  • 親要素の直接の子要素のみにスタイルが適用されます
<div class="content">
<p>この文字色は青になります。</p>

.content>p { color: blue; }
複数（グループ）セレクタ
  • 複数の要素ににスタイルが適用されます
  • カンマ区切りで並べていきます
CSS内にコメント
  /* １行コメント */
  /*
  複数行の
  コメント
  */

CSSが適用されない場合

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

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

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

筆の線だけで制作された絵画であり、白画ともいう。
白描画は色彩をともなわず、あくまで筆線のみで完成された作品をさす。