ウェブページの配置

ブロックの配置(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;
  グリッドレイアウトで、ブロックを左右・上下に並べる時に超絶便利。
  テーブルの様にセルが行列位置で固定されないので配置の自由度が高い。
• flex;
  フレックスレイアウトでHTML内ブロック構成に囚われずに配置ができる。レスポンシブで心強い味方。
• none;
  非表示

ブロック要素を横並び

横並びにしたいブロック要素に対して
float: 値;
・floatの値は、 ・left（要素を左寄せにする） ・right（要素を右寄せにする） ・none（初期値。配置を指定しない）

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

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

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

.oya {
	display: block;
	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>