配置

見出し右端の記号は?

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

ウェブページは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; 非表示

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

下記の例は黄色:マージン,黒:ボーダー,緑:パディング,白:コンテンツ。

abc

xyz

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

.oya {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	background-color: yellow;
	/* 下記の指定が無いと、子要素のmargin-topが効かない */
	overflow: hidden;
}
.ko {
	display: block;
	position: relative;
	background-color: green;
	width: 150px;
	margin: 30px auto;	/* ボックスを左右真ん中に配置 */
	padding: 30px;
	border: solid 30px black;
	/* 落書き人にはこの指定がしっくりくる */
	box-sizing: border-box;
}
.bun {
	display: inline-block;
	background-color: white;
}

<div class="oya">
	<div class="ko">
		<span class="bun">abcdefg<br><br>uvwxyz</span>
	</div>
</div>

リストを横並びに配置

まだ書いていませんが、自分の中での再確認でいつの日か?

回り込み

まだ書いていませんが、自分の中での再確認でいつの日か?

モザイク配置

まだ書いていませんが、自分の中での再確認でいつの日か?
モザイク配置

グリッドレイアウト

フレックスボックス