次のおさらいを実施しました

総復習｜index.html

総復習｜index.css

おさらい結果


CSSの組み込み方

CSSの適用方法

  • 要素セレクタ
    →　要素　{表示方法}　
  • クラスセレクタ
    1. クラス（"．"で始まる任意の名前を指定）　{表示方法}　
    2. 適用させたいタグ内にて、class属性で指定する
  • IDセレクタ
    1. ID（"#"で始まる任意の名前を指定）　{表示方法}　
    2. 適用させたいタグ内にて、id属性で指定する
  • 子孫セレクタ
    1. Aというタグの中にBというタグがある場合、AからみてBは「子孫」
      →A△B {表示方法}　※△は半角スペース
    2. Cと指定したID・クラス名のタグの中にDというタグがある場合、CからみてDは「子孫」
      →#C（あるいは.C）△D {表示方法}　※△は半角スペース

CSSのバージョン

リンクについて

リンク部分は、以下のとおりセレクタで指定することで、個別に設定することができる

a:link 通常時（未訪問）のリンクの設定
a:hover マウスオーバー（マウス矢印を載せた）時のリンクの設定
a:visited 訪問済みのリンクの設定
a:action クリック時のリンクの設定

以下に設定例を示す

a:link {
　　　　　　　color:#AAAAFF;
}
a:hover {
　　　　　　　color:#f6ffbd;
}

ID・クラスセレクタを使用したい場合は、以下のように使用する

  1. クラスで指定したい

    .sample:link {
    　　　　　　　color:#AAAAFF;
    }
  2. IDで指定したい

    sample#hover {
    　　　　　　　color:#f6ffbd;
    }

セル内の文字の位置について

セル内の表示位置については、以下のとおり設定することができる

水平の表示位置設定／text-align
left 左揃え
right 右揃え
center 中央揃え
justify 均等に配置
垂直の表示位置設定／vertical-align
top 上揃え
bottom 下揃え
middle 中央揃え
baseline ベースラインでそろえる

色の指定について

CSSの指定について

上から順番に適用され、古い設定は新しい設定に上書きされる。

しかし、同時に指定された場合は、優先度は次の順番になる

  1. IDセレクタの指定
  2. クラスセレクタでの指定
  3. 要素名で指定