ブログカスタマイズに必要なCSS基礎知識のまとめ（初級者向）
スタイルを適用するHTML対象を記述するのが「セレクタ」ですが、「パターン」と呼ばれる選択条件が40種類以上あるので、よく使うであろう10数種類を選びました。
CSSの書式と名称
セレクタがスタイル適用の対象になります。
プロパティがスタイル属性です。
空白や改行をプロパティや値の前後に記述できます。
セレクタ {
プロパティ: 値;
プロパティ: 値;
プロパティ: 値;
}
複数のプロパティに値を設定する場合、最後のセミコロンは省略可能ですが、省略しないほうが追記等で不具合を防げます。
よく使うセレクタパターン一覧表
| セレクタパターン | 例 | 補足 | |
|---|---|---|---|
| 1 | 全指定 | *{ } | 全体が対象 |
| 2 | タグ指定 | p{ } | 特定の要素 |
| 3 | 子孫指定 | ul li{ } | スペース区切り 親下の子孫指定 |
| 4 | 子指定 | P>strong{ } | >区切り 親下の子指定 子孫は適用外 |
| 5 | 直後要素指定 | H2+P{ } | +区切り 直後要素のみ |
| 6 | id指定 | #lead{ } | 前＃ |
| 7 | class指定 | .notice｛ ｝ | class名前にピリオド |
| 8 | class付タグ指定 | a.totice｛ ｝ | タグclass間にスペース不可 |
| 9 | 複数指定 | p , li ,ol{ } | カンマ区切り |
| 10 | リンクテキスト指定 | a:hover { } | hover マウスをのせた状態 link通常のリンク active クリックした状態 visitedアクセス済み |
| 11 | 特定の属性付要素 | TD [width]{ } | タグ[属性] |
| 12 | 特定の属性で値が一致 | P[align="right"]{ } | タグ[属性＝"値"] |
| 13 | 最初の兄弟要素 | table tr td:first-child{ } | 表の項目行指定など |
| 14 | 奇数/偶数行指定 | table tr:nth-child(odd/even){ } | 表の奇数/偶数行指定 |
適用されるHTML例
class指定 <h2 class="notice"> class属性の追加方法</h2>
iｄ指定 <h3 id="lead"> id属性の指定方法</h2>
クラス名と異なり、同じHTML内で複数の要素が同じID名をもつことは許されません。
特定の属性
<TS width="50"> 日付 </TD>
<P align="right"> ～</P>
複数class名の注意❗
要素は複数のclassを同時に持つことができます、その場合class名を半角スペースで区切ります。
例 <h2 class="post-body entry-content"> ～</h2>
この場合、h2要素は「post-body」と「entry-content」のclass 名持っています。
この要素の指定は、.post-bodyまたは.entry-contentで行えます。
どちらか一方でなく、「post-body」と「entry-content」の両方を持った要素で指定する場合は、.post-body.entry-content{ ... }とclassセレクタを続けて記述します。
セレクタ間にスペースを入れると、子孫要素指定になるので、スペースを空けてはいけません。
CSSの記述箇所は以下の３つです
- タグに直接style属性を記述する。
例 <h1 style="font-size:16px;">見出し１</h1> - styleタグをhtml <head>タグ内に記述する。
例 <head> ...<style> h2 {color: blue;}</style>...</head> - CSSファイルをhtmlからリンクする。
例 <head>タグの間に
<link rel="stylesheet" href="css/style.css">
CSSの約束
- 1つの要素に対して同じプロパティが複数定義されている場合、後から出てきたほうが優先する。 上書き規則
- 記述場所での優先順位は
タグに直接記述したstyle属性 ＞ <head>タグ内styleタグ ＞ 外部CSSファイル - コメントは /* コメント */
- @charset "UTF-8"などの @ルールが存在する
- CSSの単位 px % em
CSSのボックスモデル
要素が生成する範囲をボックスとして、以下のスタイルを指定できます。
コンテンツ
widthプロパティとheightプロパティで指定する領域です。
この部分にテキストや画像などの要素内容が表示されます。
Padding
paddingプロパティで指定する内側余白です。
Border
borderプロパティで指定する境界線です。
太さ・線種・色を指定することができます。
Margin
marginプロパティで指定する外側余白です。
Padding-left,top,right,bottomで四編を指定して値を指定できます。が
値を1つ指定した場合： [上下左右]の指定。
値を2つ指定した場合： [上下] [左右]の指定
値を3つ指定した場合： [上] [左右] [下]の指定
値を4つ指定した場合： [上] [右] [下] [左] と時計回りで指定します。
CSSは実際に使ってみて慣れるのが一番ですね。
コメント
コメントを投稿