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

CSSリファレンス

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

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

用途別一覧もあります。

 数学的な表記である指数といった上付き下付きは、 <sup><sub> を参照してください。

CSSとJavaScript

 JavaScriptからCSS、style属性を操作する方法は以下のような構文を使います。ElementはHTMLエレメントです。***にプロパティ名が入ります。

スタイル情報の取得例
var re_val = Element.style.***;

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

セレクター(selecter)

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

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

例:CSSの記述方法
p.calss_name {		/* selecter */
	margin: 1em;	/* property & property value */
	padding: 1em;
	background-color: black;
	color: white;
}

レイアウト

 webページをレイアウトする上でそのページの内容を大まかに、ヘッダー、ナビゲーション、メイン内容、サブ内容、フッターと分けます。 それぞれを<header>、<nav>、<main>、<aside>、<footer>エレメントを使って区分けします。そしてさらに<article>、<section>、<div>エレメントを使い内容を区分していきます。

 さらに、CSSのdisplay:flex;やdisplay:grid;を使いページをレイアウトしていきます。

 エレメントごとにレイアウトに関するCSSとして、paddingmarginなどがあります。

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

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

テキストとフォント

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
文章の体裁
font-feature-settingsletter-spacing

画像(image)

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

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

印刷

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

擬似クラス(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プロパティはデフォルトの値に戻すことができます。値はinitialを指定します。
 allプロパティで一括して指定することもできます。

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

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

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

最優先

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

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

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

設定色と大きさの単位

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

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

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