HHH

コンテンツ量が少ない時にフッターが表示最下部へ張り付くCSS

コンテンツ量が少ない時にフッターをブラウザ最下部へ表示させたい場合、下記のように設定します。

HTML例

<html>
	<body>
		<div class="content">
			余分含め伸びる(伸びているように見える)
		</div>
		<div class="footer">
			フッター内容
		</div>
	</body>
</html>

CSS

html,
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.footer {
	margin-top: auto;
}

※CSSノーマライズ等は省略

CSSでボックスのアスペクト比を固定する(レスポンシブ対応)

CSSでアスペクト比(縦横比)を固定する方法。

HTML

<div class="box">
	<div class="content">コンテンツ内容</div>
</div>

CSS

.box {
  position: relative;
  width: 100%;
}
.box:before {
  content: "";
  display: block;
  padding-top: 75%;
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.box:beforeに設定したpadding-topの値を変更することで、アスペクト比(縦横比)をコントロールできる。 

<算出方法>
高さの比率 ÷ 幅の比率 × 100

上記の例では、4:3の比率で設定しています。
3÷4×100=75(%)

<アスペクト比の参考>
4:3・・・・padding-top: 75%;
16:9・・・・padding-top: 56.25%
3:2・・・・padding-top: 66.6%;
黄金比・・・padding-top: 62%;

positionを使ったボックスの中央配置

positionを使用したボックスの中央配置の記述。

HTML記述例

<div class="box">
  <div class="box_inner">中央に表示したい内容</div>
</div>

CSS記述例

.box {
	position: relative;
}

.box_inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

上記、box-innerについては下記でも同様の結果が得られます。

.box_inner {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

サンプルを確認する

レスポンシブのためのメディアクエリの書き方

レスポンシブデザイン(ウィンドウサイズでPCやスマートフォンでの閲覧に最適化)でサイト構築する場合に要になります。
ウィンドウサイズによって読み込むCSS(スタイルシート)を切り替えることでユーザビリティの向上を図れますし、またモバイルフレンドリーに適用するためスマートフォン検索でもGoogleに嫌われにくくなります。

続きを読む