< 戻る

CSS3 リファレンス

公式サイト：CSS current work - W3C

目次
  1. CSSのスタイルシートをHTML文書に適用する3つの方法
  2. カスケードアルゴリズムが適用されるCSSプロパティを決定する
  3. CSSのコメント
  4. KnotTextでのCSSの分類

1. CSSのスタイルシートをHTML文書に適用する3つの方法

CSS の全体像 - ウェブ開発を学ぶ | MDN#外部スタイルシート

CSS の全体像 - ウェブ開発を学ぶ | MDN#内部スタイルシート

CSS の全体像 - ウェブ開発を学ぶ | MDN#インラインスタイル

1-1. 外部スタイルシート

外部スタイルシートとは、CSSのスタイルシートをCSSファイル(.css)というHTML文書と分離させた別のファイルで管理する方法。

リンク要素 <link>にそのCSSファイルへの参照を記述することで、そのCSSファイルを読み込むことができる。

<html>
   <head>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
   </body>
</html>

selector {
   property: value;
}

1-2. 内部スタイルシート

内部スタイルシートとは、HTML文書内のスタイル要素 <style>内にCSSのスタイルシートを記述する方法。

特定のスタイルシートをそのHTML文書だけに記述したい場合に有効な手法。

<html>
   <head>
      <style>
         selector {
            property: value;
         }
      </style>
   </head>
   <body>
   </body>
</html>

1-3. インラインスタイル

インラインスタイルとは、全てのHTML要素が持つグローバル属性の1つであるstyle属性にCSSのスタイルシートを記述する方法。

特定のスタイルシートをそのHTML要素だけに記述したい場合に有効な手法。ただ、限定的な使用でなければCSSの利点が失われるため注意。

<html>
   <head>
   </head>
   <body>
      <div style="selector { property: value; }"></div>
   </body>
</html>

2. カスケードアルゴリズムが適用されるCSSプロパティを決定する

参考：カスケードと継承 - ウェブ開発を学ぶ | MDN

参考：CSS カスケード入門 - CSS: カスケーディングスタイルシート | MDN

参考：継承 (inheritance)

Webページには、いくつかのスタイルシートが読み込まれるため、CSSプロパティの適用範囲が重なった場合に、適用されるCSSプロパティの優先順位を決定する必要がある。これを決定する仕組みがカスケードアルゴリズムである。

「ユーザーエージェントスタイルシート」と呼ばれる、Webブラウザーがデフォルトのスタイルを与えるために用意しているスタイルシートがある。

親要素の計算値(computed value)が設定される継承プロパティと、そのCSSプロパティ自体の初期値(initial value)が設定される非継承プロパティという違いがあることに留意する必要がある。

CSSプロパティの継承は、CSSプロパティの値である4つのキーワード(inherit, initial, unset, revert)によって、コントロールできる。

CSSプロパティの値#1-1. 「initial」キーワード

CSSプロパティの値#1-2. 「inherit」キーワード

CSSプロパティの値#1-3. 「unset」キーワード

CSSプロパティの値#1-4. 「revert」キーワード

2-1. CSSプロパティの勝敗を決める詳細度(Specificity)

参考：詳細度 - CSS: カスケーディングスタイルシート | MDN

どのCSSプロパティが適用されるかの勝ち負けが存在し、CSSセレクターがより詳しい指定の方が適用される。

インラインスタイルであるstyle属性は常に1000点 > IDセレクターは1つに付き100点 > クラスセレクターもしくは属性セレクターもしくは擬似クラス1つに付き10点 > タイプセレクターもしくは擬似要素1つに付き1点 > ユニバーサルセレクターは0点

同じ点数の場合、より後に記述されたものが適用される。

IDセレクターとクラスセレクターの組み合わせでより詳細に指定した場合、合計110点になるため、IDセレクター単体の100点に勝つことができる。

しかし、10点であるクラスセレクターを11個組み合わせて110点にしても、IDセレクター単体の100点に勝つことはできないルールになっている。

「IDセレクター1個 vs クラスセレクター11個」の例 
<p id="idname" class="class1 class2 class3 class4 class5 class6 class7 class8 class9 class10 class11">text</p>
#idname {
	color: red; //クラスセレクターをいくつ連ねても、IDセレクターに勝つことはできない
}

.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10.class11 {
	color: darkgray;
}

text

※「!important」宣言によって、これらの詳細度をほぼ無視して第一優先にすることができるが、限定的な使用に留めることが推奨される。

CSSプロパティの値#5. 「!important」宣言

3. CSSのコメント

参考：コメント - CSS: カスケーディングスタイルシート | MDN

参考：CSS の整理 - ウェブ開発を学ぶ | MDN#CSS にコメントを書いておく

参考：CSS の全体像 - ウェブ開発を学ぶ | MDN#コメント

コメントは、Webブラウザーからは無視されるため、ソースコード内に書いておくメモに用いられたり、コメントアウトと呼ばれるソースコードの1部を一時的に無効にしておく手法に使われる。

/* コメント */

/*
複数行の
コメント
も可能
*/

2. KnotTextでのCSSの分類

参考：CSS reference - CSS | MDN

2-1. CSSセレクター

2-1-1. ベーシックセレクター

ユニバーサルセレクタ―* { }
タイプセレクタ―element { }
クラスセレクタ―.classname { }
IDセレクター#idname { }
属性セレクタ―selector[attribute] { }

2-1-2. グルーピングセレクター

セレクターリストdiv, p { }

2-1-3. コンビネーター(結合子)

子孫結合子div a
子結合子div > a
一般兄弟結合子p ~ a
隣接兄弟結合子p + a

2-1-4. 疑似クラスと疑似要素

疑似クラスdiv:hover { }
疑似要素div::before { }

2-2. CSSプロパティ

3Dperspective, backface-visibilityなど
animationanimation, transform, transitionなど
boxmodeloutline, margin, border, padding, background, overflow, z-index, height, width, positionなど
countercounter-increment, counter-reset, counter-setなど
custom--*
elementbox-shadow, box-sizing, object-fit, object-position, opacity, mix-blend-mode, visibility, content, display, text-overflow, float, clear, empty-cells, caption-side, list-styleなど
graphicsbackdrop-filter, filter, shape-image-threashold, shape-margin, scale, image-rendering, aspect-ratio, mask, clip, clip-path, inset, outsetなど
internationalizationline-break, writing-mode, text-orientation, text-combine-upright, direction, unicode-bidi, block-size, inline-sizeなど
layoutcolumn-rule, flex, grid, align-content, align-items, align-self, align-tracks, justify-content, justify-items, justify-self, order, column-count, column-fill, column-gap, columns, column-span, column-width, gap, row-gap, place-content, place-items, place-self, vertical-alignなど
performanceforced-color-adjust, text-rendering, content-visibility, will-change, color-scheme, contain, color-adjustなど
textword-spacing, text-shadow, text-transform, text-underline-offset, text-underline-position, white-space, shape-outside, text-align, text-align-last, text-indent, text-justify, letter-spacing, line-height, line-height-step, widows, word-break, word-wrap, color, hanging-punctuation, hyphens, initial-letter, orphans, quotes, font, text-decoration, text-emphasis, break-after, break-before, break-insideなど
user-interfacescroll-margin, scroll-padding, overscroll-behavior, user-select, touch-action, caret-color, cursor, resize, pointer-events, scrollbar-color, scrollbar-gutter, scrollbar-width, scroll-behavior, scroll-snap-align, scroll-snap-typeなど
その他のCSSプロパティ

2-3. CSSプロパティの値

キーワードinitial, inherit, unset, revert
単位長さ(em, rem, %, px...)、角度(deg...)、時間(s, ms)
関数attr(), calc(), clamp(), max(), min()...
!important!important
その他の値

2-4. @ルール

@font-faceカスタムフォントの指定
@mediaメディアクエリによるデバイスごとの指定
@supportsブラウザーのサポートごとの指定
@charset文字エンコーディングの指定
@keyframesアニメーションにおけるキーフレームの指定
その他の@ルール

W3C CSS Validation Service は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。

端末のディスプレイ情報を調べる (responsive web design で役立ちます)

CSS を使ってよくある問題を解決する

CSS レイアウト料理帳