ウェブページの配置

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

ブロック要素を横並び

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

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

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

abc

xyz

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

.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>

配置の勘所

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

HTMLの大まかなブロック

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