ウェブページの配置

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

CSSで配置する係る事

CSSでサクサク配置ができる事がウェブページのコーダーにとっては必須です。

配置を行うCSSプロパティ等

CSSで配置がサクサクできる様になる為に抑えておきたい事。

ブロックの配置(position)

ボックスの配置方法(基準位置)を指定するposition指定について理解しておく。

position: 配置 ポジション
static; 配置方法の指定なし。これが既定値。 top、bottom、left、rightは適用されない。
relative; 相対位置への配置、staticを指定した場合に表示される位置が起点。 top、bottom、left、rightで相対位置を指定。
absolute; 絶対位置への配置、親ボックスがstatic以外である必要があり、親ボックスが起点。親ボックスがstatic以外の値が指定されていない場合には、windowが起点。 top、bottom、left、rightで相対位置を指定。
fixed; 絶対位置への配置はabsoluteと同じだが、スクロールしても位置が固定されたまま。 top、bottom、left、rightで相対位置を指定。

ブロックの種類(display)

ボックスの種類を指定するdisplay指定について理解しておく。
種類が沢山あるが、ここに掲載しているのは落書き人がよく使うものだけ。
ulやtableの様にタグに対してdisplay属性が決められているものは省略。

display: ブロック種類 挙動
inline; インライン height,widthなどの属性は適用できない
marginとpaddingは左右のみ。
inline-block; インラインブロック 並びはインライン同様でheight,widthなどの属性は適用できる
marginとpaddingは上下左右。
block; ブロック ブロックで他要素の入れ子ができる。
marginとpaddingは上下左右。
並びは上下が基本だがwidth,float,position,margin-left,margin-right:などで配置自由。
grid; グリッドレイアウトで、ブロックを左右・上下に並べる時に超絶便利。
テーブルの様にセルが行列位置で固定されないので配置の自由度が高い。
IEは不完全。
flex; フレックスレイアウトでHTML内ブロック構成に囚われずに配置ができる。レスポンシブで心強い味方。 IEは不完全。
none; 非表示

マージン,パッディング,ボーダーによる配置

グレー:margin,黄:padding,黒:border,白:content

abc

xyz

上記のボックス表示の記述は下記のとおり。

.oya {
	display: gray;
	position: relative;
	width: 100%;
	height: auto;
	background-color: yellow;
	overflow: hidden;		/* 子要素のmargin-topとmargin-bottomが効かすお呪い */
}
.ko {
	display: block;
	position: relative;
	background-color: yellow;
	width: 150px;		/* ここで親の幅を超えると飛び出す */
	margin: 30px auto;	/* ボックスを左右真ん中に配置 */
	padding: 30px;
	border: solid 30px black;
	box-sizing: border-box;		/* *1「ブロックのサイズ指定は何処?」を参照 */
}
.bun {
	display: inline-block;
	background-color: white;
}

<div class="oya">
	<div class="ko">
		<span class="bun">abc<br>…<br>xyz</span>
	</div>
</div>

配置の勘所

htmlタグとbodyタグの配置に係るCSSプロパティを設定。
次にワイヤーフレームから、 ・大まかなブロックを読み取って配置する。
・上記のブロックに配置部品をはめ込む。
落書き人のローカルルールとして前者を配置ブロック、後者を部品ブロックと呼んでいます。

HTMLの大まかなブロック

要素 指定 挙動
html 幅・高さに必ず100%を指定しておきます。 配下のbodyタグでのマージンが機能する様にするために、無条件で御呪い的に指定してく。
body ページデザインの指示に従い、%または具体的なピクセル値で指定する。 左右真ん中に配置する場合はmarginの左右をautoに指定しておく。 potision: relative;も必ず指定しておく。 ページデザインにより、幅は割合もしくは具体的な数値で指定する。具体的な数値を指定する時にはレスポンシブ対応も行う。ページデザインにレスポンシブの具体的な指示がない場合はデザイナーと調整する。
配置ブロック position,display,width,heght等でワイヤーフレームの大枠配置を決める。
レスポンシブ対応によって配置を動かす設定もこの段階で完成させておく。
ワイヤーフレームのサイズを流動的に動かす場合は、サイズ指定をrootで書いておく*1と調整が楽です。
レスポンシブでもリキッドデザインにする、コンテンツブロクの配置を動かす、双方のあわせ技などがあります。
配置の自由度が少ないモバイルファーストでデザインを考えたほうが、後々これ出来ないんだという問題発生がへります。そこで、スマホ向けの配置を先に考えて、横幅が広いタブレットやパソコン向けの配置をどうするかという順番で考える事にしています。パソコン向けのごちゃごちゃ配置もから脱却できる利点もありお薦めです。
コンテンツ要素 大枠配置ブロックに、デザインに有ったコンテンツ要素を埋め込む。