CSSリファレンス

 CSS(Cascading Style Sheets)とは、HTMLに色や罫線、position、CSSアニメーションなどの表示設定をするためのものです。
 CSSの用途別に説明しています。まずは、CSSにおいて重要なセレクタについて。各ページでは、borderやposition、CSS animationなどのCSSの書き方を説明しています。

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

var re_val = element.style.***;

セレクタ(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
ユーザーが使う機器ごとの表示サイズに合わせます。
position
タグエレメントの表示位置を任意に設定できます。
ナビゲーションメニューのレイアウト
ULタグエレメントとCSSを使った、横並びのナビゲーションメニュー、トピックパスの作成方法
表のスタイルです

テキストとフォント

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

color
フォント色
font
フォントのプロパティを一括指定
font-style
フォントのスタイル
font-weight
フォントの太さ
font-size
フォントの大きさ
line-height
行間
font-family
フォントファミリ
text-align、vertical-align
テキストの配置操作

画像(image)

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

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

印刷

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

擬似クラス(pseudo-class)

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

その他

設定色と大きさの単位

マウスポインタ