色々なセレクタ

授業

セレクタ

idセレクタ

サイトをレイアウトするためのdiv要素など、
ページ内で１回しか出てこない部分を指定するようにする。

<h1 id="colorgreen">大見出し要素</h1>


.

クラスセレクタ

同じ要素の中で特定の部分にだけスタイルを適用させたい場合に使う。
同じページ内で複数の場所に指定が可能。

<h2 class="colorgreen">中見出し要素</h2>

wrapperとcontainer

html文書のケースの役割。
優先順位はないが、英語圏では基本、container＞wrap



擬似クラス

  • link：（未訪問）
  • visited：（訪問済み）
  • fover：（カーソルがリンクに重なったとき）
  • active：（リンクに対してアクティブな瞬間）



<li>と<li a>の違いの把握が必要

<li>
文字にかかわる部分。文字の大きさ、文字の並びなど。
<li a>
マウスの受ける条件。ボタンの範囲、色など。




入力メモ

  • float:（〜）; ＝文字並びを指定。（〜）には方向を入れる。leftなど。
    （<li>にかかる）
  • display: block ; ＝選んだ範囲がボタンになるようにディスプレイする。
    （<li a>にかかる）
  • list-style-type: none; ＝<li>の黒丸をなくすこと。
  • text-decoration: none; ＝アンカーを外すこと。
  • "#"＝リンク先を＃に指定すると、飛ぶ場所がなくてもボタンが反応するようにできる。




画像背景をつけてみよう

<style>
body{
     background-image: url("○○");
     background-repeat:〜〜〜〜
}
</style>

  • ○○はファイルの場所を入力。（例）img/01.jpg
  • background-repeat：のあとに、
    repreat-yで縦並びにリピート。repeat-xで横に並べる。