CSSリファレンス

 このページはwebページを開発しながら参照するCSSリファレンスです。用途別に紹介しています。

 CSS(Cascading Style Sheets)ファイルはスタイルシートとも呼ばれています。当初は、1つのHTMLファイルにテキスト内容も装飾も混在して書いていました。それではメンテナンスがし難いことから、装飾はstyle属性として整理されていきました。
 しかし、それでも編集しにくいことから別ファイル、スタイルシートでHTMLの装飾は書くようになりました。そして、スタイルシートはCSSとして仕様が公表されています。

ABC順のINDEX

セレクタ(selecter)

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

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

例:CSSの記述方法

p.calss_name {				/* selecter */ 
	margin: 1em;			/* property & property value */
	padding: 1em;
	background-color: black;
	color: white;
}

レイアウト

 レイアウトには大きく分けて、全体のレイアウト、各ブロックライン要素ごとのレイアウト、リストや表のレイアウトが考えられます。

全体のレイアウト
<div>、<header>、<nav>、<main>、<aside>、<footer>タグを使って全体のレイアウトを操作します
display:flex;
ブロック要素を横に並べる方法です。
display:grid;
ブロック要素を任意の位置とサイズで並べる方法です。
paddingmargin
見やすくするために端から適度なクリアランスをとります。
min-height
最小の高さを設定してページごとの統一感を出します。
@media
ユーザーが使う機器ごとの表示サイズに合わせます。
リストのレイアウト
リストのスタイルです
表のレイアウト
表のスタイルです

テキストとフォント

CSSにおけるテキストとフォンとの扱いはやや複雑に感じるかもしれません。ブロックライン要素、インライン要素で扱いが変わるためかと思います。

font
フォントのプロパティを一括指定
font-style
フォントのスタイル
font-weight
フォントの太さ
font-size
フォントの大きさ
line-height
行間
font-family
フォントファミリ

画像(image)

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

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

印刷

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

擬似クラス(pseudo-class)

 擬似クラス(pseudo-class)は要素の状態によるスタイル設定を行うことができます。

その他

マウスポインタ