備忘録的リファレンス

CSS

 CSS(Cascading Style Sheets)とは、HTMLにレイアウト、色や罫線、position、CSSアニメーションなどの表示設定をするためのものです。
 JavaScriptから各エレメントのCSS、style属性を操作する方法は以下のような構文を使います。***にプロパティ名が入ります。

var re_val = element.style.***;

 ここでは、CSSの用途別に説明しています。まずは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などがあります。

全体のレイアウト
CSSによってレイアウトする前に、<header>、<nav>、<main>、<aside>、<footer>、<div>タグを使って内容を区分け
display:flex;
ブロックエレメントを横に並べる方法
display:grid;
ブロックエレメントを任意の位置とサイズで並べる
@media
ユーザーが使うディスプレイやデバイスによって表示方法を替える、印刷レイアウトを個別に定義
min-height
最小の高さを設定してページごとの統一感を出す
paddingmargin
見やすくするために領域の端から適度なクリアランスをとる
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)は要素の状態によるスタイル設定を行うことができます。

その他

設定色と大きさの単位

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

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

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

マウスポインタ