CSSの基本構造

CSSの役割

CSSの３つの働き

設定内容 名称 役割
どこに セレクタ スタイルを設定する場所を指定するところ

どんな
スタイルを

 プロパティ どのようなスタイルかを設定するところ
「色を変えたい」「大きさを変えたい」など
どれだけ バリュー(値) プロパティに対して値を指定する
「赤色にしたい」「大きくしたい・小さくしたい」など

CSSの記述ルール

CSSの宣言の数はいくつでも設定できる

セレクタの基本

CSSを記述する場所
  • テキストP.65
  • 外部ファイルに記述する
  • headタグ内にstyleタグを設定する（エンベッド）
  • HTMLタグに直接スタイルを記述する（インライン）

Webページで使われる単位

px
（ピクセル）		 ディスプレイの表示単位のpxを使って設定する単位
em
（ピクセル）		 １文字分の高さを１emとして設定する単位
（アルファベッドの大文字 M が文字のスペースになっている）
rem
（ピクセル）		 「root」+「em」という意味で、root要素（html要素）
に対して相対的にフォントサイズを指定する単位
%
（ピクセル）		 基準になる数値に対して何％で表示するかを指定する相対単位
数字が
「0」のとき		 単位は、記述しない

※幅の固定には「px」、幅の可変には「%」、文字サイズには「em」と決めておくと迷わずに指定できます。

CSSで使われる色

  • 光には階調がある（RGBそれぞれに256階調あります）
  • 256階調を16進数で表現
  • 16進数には、６桁と３桁の表記がある

CSSの基本概念

Webページのテキスト

  • 情報を伝える文字
  • デフォルトスタイルシート（ユーザーがスタイルを指定しなくても初期設定でスタイルが設定されています）User Agent Style Sheets
文字のサイズを指定
  • font-size プロパティ
文字色を指定
  • color プロパティ
フォントの種類を指定
  • font-family プロパティ
文字の太さを指定
  • font-weight プロパティ
行の高さを指定
  • line-height プロパティ
文字の字間を指定
  • letter-spacing プロパティ
水平方向の位置を指定
  • text-align プロパティ
テキストリンクの色を指定
  • 擬似クラスを使ってテキストリンクの状態をごとに色を変える
文字に線をつける
  • text-decoration プロパティ
文章の一部だけスタイルを変更
  • span要素を使って一部の文字を変更する
一行目の字下げを指定
  • text-indent プロパティ
  • １文字単位で「em」で設定する

注意