CSSの基本

HTML

書き方

書き方は３パターン。

① htmlタグ内に記述する

<p style="color:blue">
    hogehoge
</p>

② html内にstyleタグを作成して記述する

<style>
    p{ color: blue; }
</style>
<body>
    <p>hogehoge</p
</body>

③ CSSファイルに記述し、htmlから参照する

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　CSS (ex. css/default.css)
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
p{ color: blue; }

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　HTML
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<head>
    <link rel="stylesheet" href="css/default.css"/>
</head>
<body>
    <p>hogehoge</p
</body>

セレクタ

どのHTML要素にスタイルを適用するのかを指定するために記述する。

  • 要素
body{ プロパティ }
⇒body要素全体にプロパティの設定が適用される

body p{ プロパティ }
⇒body要素内のp要素にプロパティの設定が適用される
　(要素と要素の間を半角スペース)

h1, h2{ プロパティ }
⇒h1要素とh2要素にプロパティの設定が適用される
　(要素と要素の間をカンマ半角スペース)

他にも、＞や＋がある
＞　⇒　div > span　div直下のspan要素のみ適用
＋　⇒　p + p　　　 pの次にくるp要素に適用
  • class
.zoo{ プロパティ }
⇒zooのclass要素にプロパティの設定が適用される

p.zoo{ プロパティ }
⇒p要素かつ、zooのclass要素にプロパティの設定が適用される
  • id
#tiger{ プロパティ }
⇒tigerのid要素にプロパティの設定が適用される

属性セレクタ

  • 指定した属性が設定されているものに適用
a[title] { プロパティ }
⇒aタグのうち、title属性が設定されているものにプロパティの設定が適用される
  • 属性に特定の値が設定されているものに適用
a[href="http://google.com] { プロパティ }
⇒aタグのうち、href属性にgoogleが設定されているものにプロパティの設定が適用される
  • 要素内に指定したクラス属性が設定されているものに適用
a[class˜="search"] { プロパティ }
⇒aタグのうち、class要素にsearchが含まれるものにプロパティの設定が適用される

疑似クラス

  • 最初の子要素のみ適用
<ul>
　<li>東京</li>
　<li>大阪</li>
　<li>福岡</li>
</ul>

ul li:first-child { プロパティ }
⇒東京のみプロパティの設定が適用される
  • aタグの状態に応じて適用
a:link { プロパティ }
⇒未訪問の場合、プロパティの設定が適用される

a:visited { プロパティ }
⇒訪問済みの場合、プロパティの設定が適用される

a:hover { プロパティ }
⇒マウスオーバー時、プロパティの設定が適用される

a:active { プロパティ }
⇒マウスクリック時、プロパティの設定が適用される
  • フォーカスの状態に応じて適用
input:focus { プロパティ }
⇒テキストボックスにフォーカスがあたった時、プロパティの設定が適用される

疑似要素

p:before {
        content:  "-->";
}
⇒p要素の前に文字列を表示

p:after {
        content:  "<--";
}
⇒p要素の後に文字列を表示

※before, after 共にcontentプロパティは必須

ボックスモデル

  • margin 他の要素との間のスペース
  • border 要素の枠線
  • padding 枠線と子要素の間のスペース
  • height 子要素の縦サイズ
  • width 子要素の横サイズ