さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【CSS】SASSを利用してレスポンシブのサイズ計算を簡単に

Pocket
LINEで送る

レスポンシブ対応のサイトを制作する際、下記の計算式で%のサイズを割り出します。

[求める要素の幅]÷[親要素の幅]×100

通常は上記の計算式で一つ一つ%の値を出してcssに記述していかなければなりません。
ですがsassを使えばいちいち計算をしなくてすみます!

サイト幅を変数化

まずはよく使うサイト幅のサイズを変数にします。

scss

$allWidth:960; // 全体サイズ
$allWidthTb:640; // 全体サイズ(タブレット版)
$allWidthSp:320; // 全体サイズ(SP版)

@mixinで計算式を定義しておく

@mixinを使ってサイズを割り出す計算式をmargin用、padding用、width用、height用とそれぞれ定義しておきます。
(marginとpaddingはまとめて指定出来る用とそれぞれの箇所に個別に指定出来る用と作っておきます。)

scss

// margin ---------------------------------
@mixin marginPc($top, $right, $bottom, $left) {
	margin:($top / $allWidth) * 100% ($right / $allWidth) * 100% ($bottom / $allWidth) * 100% ($left / $allWidth) * 100%;
}

@mixin marginTPc($mt) {
	margin-top:($mt / $allWidth) * 100%;
}

@mixin marginRPc($mr) {
	margin-right:($mr / $allWidth) * 100%;
}

@mixin marginBPc($mb) {
	margin-bottom:($mb / $allWidth) * 100%;
}

@mixin marginLPc($ml) {
	margin-left:($ml / $allWidth) * 100%;
}

// padding ---------------------------------
@mixin paddingPc($top, $right, $bottom, $left) {
	padding:($top / $allWidth) * 100% ($right / $allWidth) * 100% ($bottom / $allWidth) * 100% ($left / $allWidth) * 100%;
}

@mixin paddingTPc($pt) {
	padding-top:($pt / $allWidth) * 100%;
}

@mixin paddingRPc($pr) {
	padding-right:($pr / $allWidth) * 100%;
}

@mixin paddingBPc($pb) {
	padding-bottom:($pb / $allWidth) * 100%;
}

@mixin paddingLPc($pl) {
	padding-left:($pl / $allWidth) * 100%;
}

// width ----------------------------------
@mixin widthPc($wid) {
	width:($wid / $allWidth) * 100%;
}

// height ---------------------------------
@mixin heightPc($hei) {
	height:($hei / $allWidth) * 100%;
}

@includeで@mixinを呼び出す

計算された値を読み込みたい箇所に@includeを使って@mixinで定義した計算式を読み込みます。

scss

#contents {
	@include marginPc(10,20,30,40);
	@include marginTPc(10);
	@include marginRPc(20);
	@include marginBPc(30);
	@include marginLPc(40);
	@include paddingTPc(10);
	@include paddingRPc(20);
	@include paddingBPc(30);
	@include paddingLPc(40);
	@include widthPc(200);
	@include heightPc(100);
}

※「()」の中にはpxでの値を入れます。

CSSでの表示

CSSにコンパイルすると下記のように@includeの「()」に指定した値が@mixinの計算式で計算されて出力されます。

css

#contents {
	margin: 1.04167% 2.08333% 3.125% 4.16667%;
	margin-top: 1.04167%;
	margin-right: 2.08333%;
	margin-bottom: 3.125%;
	margin-left: 4.16667%;
	padding-top: 1.04167%;
	padding-right: 2.08333%;
	padding-bottom: 3.125%;
	padding-left: 4.16667%;
	width: 20.83333%;
	height: 10.41667%;
}

カテゴリー:css, HP制作

コメントを残す

コメント内容