CSS リファレンス
CSS（ Cascading Style Sheets ）とは、web ページのコンテンツの配置、文字色や背景色、boder, CSS アニメーションといったレイアウトやデザイン部分を担う HTML に追加された機能です。
このデザイン部分の設定をスタイルシート、スタイルといいます。
スタイルシートは HTML テキスト自体と切り離すことができ、汎用性を保たせることができます。スタイルシートは CSS ファイルとして外部ファイルとして作成し、HTML に読み込むこともできます。
CSS によって、レイアウトやデザインに加えて、レスポンシブ web デザインといったアクセシビリティやユーザビリティに配慮した Web ページ作成ができるようになります。
<style> エレメントや CSS ファイルでスタイルを定義する際には、セレクターと呼ばれる方法で反映するべきエレメントを指定します。
このページでは CSS において重要なセレクタについて。さらに、レイアウトの方法、テキストとフォントの設定についてなどを概説しています。
用途別 INDEX
用途別一覧もあります。
セレクター（selecter）
セレクター（selecter）はCSSにおける基本となる記述方法です。セレクターによって対象のタグエレメントを指定します。
例えば以下のように記述します。
p.calss_name { /* selecter */
margin: 1em; /* property & property value */
padding: 1em;
background-color: black;
color: white;
}
{} 内の内容はセレクターによって指定されたエレメントの配置や色などを設定しています。これらをスタイルプロパティまたは CSS プロパティといいます。
詳しくは、セレクター（selecter）
ページを参照してください。
Tips
JavaScript で class 属性の値を取得するには、Element.className
です。
ページデザイン
以下はページデザインに関する CSS です。
- ページデザイン
- 表示内容をヘッダー、ナビメニュー、コンテンツ、フッターに分けてデザインする方法です。
- display:flex;
- ブロックエレメントを横に並べる方法。フレックスに関するプロパティの使用方法については
display: flex; の使い方
を参照してください。 - display:grid;
- ブロックエレメントを任意の位置とサイズで並べる。関するプロパティの使用方法については
display: grid; の使い方
を参照してください。 - @media
- ユーザーが使うディスプレイやデバイスによって表示方法を替える、印刷レイアウトを個別に定義
- min-height
- 最小の高さを設定してサイト全体の統一感を出す
- 余白について
- 見やすくするために領域の端から適度なクリアランスをとる方法。padding、 margin、 border について
- position
- タグエレメントの表示位置を任意に指定。エレメントをデフォルトの表示位置ではない場所で表示
- ナビゲーションメニューのレイアウト
- ULタグエレメントとCSSを使った、横並びのナビゲーションメニュー、トピックパスの作成方法
- 中央へ配置
- テキストはtext-align:center;で包括するエレメントのテキストを中央に配置
エレメント自体はpositionプロパティを使うか、margin-left:auto;、margin-right:auto;がある - 段組みを複数列で表示
- columns または column-count によって段組を複数列に分割表示する
- スクロールバーを付加
- スクロールバーを付加するには、まず height 、width プロパティでサイズを固定します。 さらに overflow で auto または scroll を指定します。
ブロックライン（display:block;）、インライン（display:inline;）、インラインブロック（display:inline-block;）で padding の扱いが変わることがあります。
テキストとフォント
CSSでは、テキストとフォントは別に扱われます。文字についてがフォント、複数の文字列でテキストです。 テキストとフォントは概念に明確な違いがありますが、CSS において、その扱いは混じり合っているので複雑に感じるかもしれません。
- フォントの色
- color
- フォントのプロパティ（フォントスタイル、太さ、大きさ）
- font、 font-style、 font-weight、 font-size
- フォントファミリ（書体）
- font-family
- 行間
- line-height
- テキストの配置操作
- text-align、vertical-align
- マーカーでラインを引いたような装飾
- background{ linear-gradient() }
- filter プロパティを使って、背景色に対してテキストは反対色で表示
- filter: invert() grayscale() contrast();
- 背景色に対してテキストは反対色で表示
- mix-blend-mode: difference; または exclusion
- 縦書き
- writing-mode:vertical-rl;、 text-orientation、 direction、 text-combine-upright
- 文章の体裁
- font-feature-settings、 letter-spacing
リンク <a>
リンク <a> タグエレメントの装飾に関するCSSです。
<a href="example.html">リンク</a>
<style>
a {
color: black;
text-decoration: none;
}
a:hover {
color: #0000ee;
text-decoration: underline;
}
</style>
詳しくはExample
を参照してください
詳しくはリンク <a> のスタイル
を参照してください。
画像（image）
画像の扱いには、大きさと余白、回り込み、そして背景として表示する方法があります。
印刷
印刷用のスタイルシートには @import または @media を使います。
@import url("./css/printout.css") print
詳しくは印刷用スタイルシート（印刷用CSS）
を参照してください。
擬似クラス（pseudo-class）、擬似エレメント（pseudo-elements)
擬似クラス（pseudo-class）は、エレメント（要素）の変化や状態を表すセレクターです。 エレメントの変化や状態によってスタイルを定義できます。
さらに、擬似クラスに似た擬似エレメントがあります。擬似エレメントはエレメントに文字などのエレメントを自動で追加することができます。
擬似クラス（pseudo-class）
| pseudo-class name | 概要 | 種類 |
|---|---|---|
| :active | ユーザーの操作で要素がアクティブになったときにスタイルを反映。a:activeは“クリックされてから離されるまでの状態” | <a> |
| :link | 未訪問リンクにスタイルを反映 | <a> |
| :nth-of-type() | リストの背景色を交互にするのに便利 | エレメント全般 |
| :visited | 訪問済みリンクにスタイルを反映 | <a> |
擬似エレメント（pseudo-elements)
| pseudo-elements name | 摘要 |
|---|---|
| ::after | 対象エレメントの後に追加 |
| ::before | 対象エレメントの前に追加 |
| ::selection | テキスト選択時の背景色などを変更 |
| 関数名 | 摘要 |
|---|---|
| linear-gradient() | ２色以上の線形グラデーションを生成する |
CSS と JavaScript
JavaScript で CSS 、スタイルシート情報を取得、操作するには以下のプロパティやメソッドを使用します。
スタイルシート情報の取得
スタイルシート情報は Document.prototype.styleSheets または HTMLElement.protorype.style プロパティで取得できます。
console.log( document.styleSheets );
console.log( document.getElementsByTagName( 'p' )[0].style );
エレメントのスタイルシート設定
各エレメントのスタイルシートは HTMLElement.style.* で設定することができます。
JavaScript から CSS、style 属性を直接操作する方法は以下のような構文を使います。* にプロパティ名が入ります。JavaScript ではプロパティ名はキャメルケースになります。
document.getElementsByTagName( 'p' )[0].style.color = "green";
class 属性の変更
エレメントの class 属性は Element.classList.add() で追加、 Element.classList.remove() で削除することができます。
document.getElementsByTagName( 'p' )[0].classList.add( 'exampleclass' );
document.getElementsByTagName( 'p' )[0].classList.remove( 'exampleclass' );
詳しくはCSS の取得と設定
ページを参照してください。
その他
初期化
CSSプロパティはデフォルトの値に戻すことができます。値はinitialを指定します。
allプロパティで一括して指定することもできます。
p {
all: initial;
}
CSSプロパティを個別に初期化することもできます。
p {
color: initial;
}
最優先
CSSプロパティの値に!importantを付けることで、値を優先順位を変更することができます。
p {
color: red !important;
}
全ての<p>タグの文字色がredになります。別の場所で!importantを付けてcolorプロパティを指定し、それが優先されるならその値が反映されます。
設定色と大きさの単位
ベンダープリフィックスについて
ブラウザによっては使用通りのCSSのプロパティ名では機能しないが、ベンダープレフィックスを先頭に付加すれば機能する場合があります。
ベンダープレフィックスは、予定されているCSSの仕様を先行して各ベンダー（ブラウザの開発元）が実装していることをいいます。