備忘録的プログラミングリファレンス

CSS リファレンス

 CSS( Cascading Style Sheets )とは、web ページのコンテンツの配置、文字色や背景色、boder, CSS アニメーションといったレイアウトやデザイン部分を担う HTML に追加された機能です。 このデザイン部分の設定をスタイルシート、スタイルといいます。
 スタイルシートは HTML テキスト自体と切り離すことができ、汎用性を保たせることができます。スタイルシートは CSS ファイルとして外部ファイルとして作成し、HTML に読み込むこともできます。

 CSS によって、レイアウトやデザインに加えて、レスポンシブ web デザインといったアクセシビリティやユーザビリティに配慮した Web ページ作成ができるようになります。

 <style> エレメントや CSS ファイルでスタイルを定義する際には、セレクターと呼ばれる方法で反映するべきエレメントを指定します。

 このページでは CSS において重要なセレクタについて。さらに、レイアウトの方法、テキストとフォントの設定についてなどを概説しています。

セレクター(selecter)

 セレクター(selecter)はCSSにおける基本となる記述方法です。セレクターによって対象のタグエレメントを指定します。

例えば以下のように記述します。

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 プロパティの値には以下のようなキーワード値があります。

キーワード値機能
initial仕様で決められた設定値
inherit親エレメントの設定値を継承
revertブラウザで設定された値
unset継承値が優先される。値が継承値されるプロパティでは inherit に同じ。継承されない場合は revert に同じ

 指定値を固定化する場合は !important 宣言を加えます。

 詳しくは各キーワード値のページを参照してください。

ページデザイン

 以下はページデザインに関する CSS です。

ページデザイン
表示内容をヘッダー、ナビメニュー、コンテンツ、フッターに分けてデザインする方法です。
display:flex;
ブロックエレメントを横に並べる方法。フレックスに関するプロパティの使用方法についてはdisplay: flex; の使い方を参照してください。
display:grid;
ブロックエレメントを任意の位置とサイズで並べる。関するプロパティの使用方法についてはdisplay: grid; の使い方を参照してください。
@media
ユーザーが使うディスプレイやデバイスによって表示方法を替える、印刷レイアウトを個別に定義
min-height
最小の高さを設定してサイト全体の統一感を出す
余白について
見やすくするために領域の端から適度なクリアランスをとる方法。paddingmarginborder について
position
タグエレメントの表示位置を任意に指定。エレメントをデフォルトの表示位置ではない場所で表示
ナビゲーションメニューのレイアウト
ULタグエレメントとCSSを使った、横並びのナビゲーションメニュー、トピックパスの作成方法
中央へ配置
テキストはtext-align:center;で包括するエレメントのテキストを中央に配置
エレメント自体はpositionプロパティを使うか、margin-left:auto;、margin-right:auto;がある
段組みを複数列で表示
columns または column-count によって段組を複数列に分割表示する
スクロールバーを付加
スクロールバーを付加するには、まず heightwidth プロパティでサイズを固定します。 さらに overflow で auto または scroll を指定します。

 ブロックライン(display:block;)、インライン(display:inline;)、インラインブロック(display:inline-block;)で padding の扱いが変わることがあります。

テキストとフォント

 CSS では、テキストとフォントは別に扱われます。文字についてがフォント、複数の文字列でテキストです。 テキストとフォントは概念に明確な違いがありますが、CSS において、その扱いは混じり合っているので複雑に感じるかもしれません。

フォントの色
color
フォントのプロパティ(フォントスタイル、太さ、大きさ)
fontfont-stylefont-weightfont-size
フォントファミリ(書体)
font-family
行間
line-height
テキストの配置操作
text-alignvertical-align
マーカーでラインを引いたような装飾
background{ linear-gradient() }
filter プロパティを使って、背景色に対してテキストは反対色で表示
filter: invert() grayscale() contrast();
背景色に対してテキストは反対色で表示
mix-blend-mode: difference; または exclusion
縦書き
writing-mode:vertical-rl;text-orientationdirectiontext-combine-upright
記述方向
directionunicode-bidi
文章の体裁
font-feature-settingsletter-spacing

 テキストの体裁について詳しくはテキストの体裁ページを参照してみてください。

画像(image)

 画像の扱いには、大きさと余白、回り込み、そして背景として表示する方法があります。

大きさと余白
画像の大きさの調整と余白の付けます
回り込み
画像にテキストを回り込ませます
背景
画像を背景として表示します

table エレメント

 <table> エレメントに関する CSS プロパティには主に以下があります。

セル
empty-cellstable-layout
罫線
borderborder-collapseborder-spacing
キャプション
caption-side
行ごとの背景
:nth-child()疑似クラス:nth-of-type()疑似クラス

 詳しくは表のスタイルページを参照してください。

ol、ul、dl エレメント

 <ol>、<ul>、<dl> で使用できる主な CSS プロパティ、@ルール、ファンクション、擬似クラスには以下があります。。

リストのマーカー
list-stylelist-style-imagelist-style-positionlist-style-type@counter-style
番号付け
counter-incrementecounter-resetcounter-set@counter-stylecounter()counters()
擬似クラス
:first-child:first-of-type:last-child:last-of-type:nth-child():nth-of-type()

 詳しくはリストのスタイルページを参照してください。

印刷

 印刷用のスタイルシートには @import または @media を使います。

印刷用CSS の読み込み
@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()2色以上の線形グラデーションを生成する

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() で削除することができます。

class 属性の追加
document.getElementsByTagName( 'p' )[0].classList.add( 'exampleclass' );
class 属性の削除
document.getElementsByTagName( 'p' )[0].classList.remove( 'exampleclass' );

 詳しくはCSS の取得と設定ページを参照してください。

その他

初期化

CSSプロパティはデフォルトの値に戻すことができます。値はinitialを指定します。
 allプロパティで一括して指定することもできます。

<P>エレメントのCSSプロパティを一括初期化
p {
	all: initial;
}

 CSSプロパティを個別に初期化することもできます。

<P>エレメントのフォント色を初期化
p {
	color: initial;
}

最優先

 CSSプロパティの値に!importantを付けることで、値を優先順位を変更することができます。

値を優先的に適用
p {
	color: red !important;
}

 全ての<p>タグの文字色がredになります。別の場所で!importantを付けてcolorプロパティを指定し、それが優先されるならその値が反映されます。

設定色と大きさの単位

ベンダープリフィックスについて

 ブラウザによっては使用通りのCSSのプロパティ名では機能しないが、ベンダープレフィックスを先頭に付加すれば機能する場合があります。
 ベンダープレフィックスは、予定されているCSSの仕様を先行して各ベンダー(ブラウザの開発元)が実装していることをいいます。

ベンダープレフィックスについて