レスポンシブコーディングについて、前々から技術的なブログを書こうと思ってはいたのですが、なかなか更新する時間がなくできていませんでした。で、今回が初記事。

まず、デモから。

DEMO

なんのデモなのかわからないと思うので、説明をします。
まず、緑のエリアは、丸っと画像です。

あ、ブレイクポイントは640pxです。
画面サイズを640px以下にして見てください。

で、

緑のエリアは、丸っと画像なので、単純に

CSS

img{
	width: 100%;
}

と、cssを設定してるだけです。これでレスポンシブ対応になります。
画像サイズは、640px×480pxで作成されていますが、width:100%;を設定すると自動的に高さもその比率を保って拡大縮小してくれます。

次の赤いエリアですが、「4:3」の表示はテキストで、右下に配置されている丸は背景画像です。
で、問題は赤いエリアのサイズです。このエリアを4:3の比率にしたい場合、どうしよう、というのがこの記事で説明したい内容です。
例えば、画面の横幅が640pxの場合は、480pxの高さにしたい。横幅が320pxの場合は、240pxにしたい。
そんなレイアウトの場合、どのようにcssを設定しましょうか。

まず、htmlの構造から

HTML

<div id="box">
<div class="inner">
<p>4:3</p>
</div>
</div>

こんな感じ。
役割を説明すると、id=”box”は赤いエリアの親となる要素になり、class=”inner”が実際の赤いエリアになります。（id名とclass名、わかり難いですね・・・）

それではcssの設定ですが、
まず、赤いエリアの親となる要素は、

CSS

#box{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 75% 0 0;
}

とします。

padding: 75% 0 0;

そうです、これが味噌です。
75%は、どこから来た数値なのか。

赤いエリアは、4:3の比率にしたいのです。
4:3は、横幅：高さです。

padding-top(%) = 高さ / 横幅 * 100

この計算式で求めます。4:3は、3/4*100で、75になります。
よって、padding-topに75%を設定します。

そして、赤いエリアとなるclass=”inner”には、次のcssを設定します。

CSS

#box .inner{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(丸い画像の参照先) right bottom no-repeat #b40d0d;
}

これで赤いエリアは4:3の比率を保ったまま、レスポンシブ対応となります。

で、このcss設定を使用して、youtubeの動画のサイズを4:3にしたのが、DEMOの一番下のyoutubeです。
これで、4:3の比率を保ったまま、youtuebの動画サイズが拡大縮小されます。

文章を考えず、とりあえず、が～～～っと書きました。わかり難かったらごめんなさい。
レスポンシブコーディングで意外と使用する手法です。