【4：レスポンシブデザイン2】画面サイズによって画像と文字のスタイルを変更

f:id:seintoseiya:20150331190631j:plain
プロジェクトNo.4：レスポンシブデザイン2

前回のレスポンシブデザインを応用して、小ネタを作ってみた。
画面サイズを変更すると画像の種類と文字が変化する。

HTML

<body>
	<div id="description">⇔Resize your window</div>
	<div id="hName"><span id="alfaA">a</span><span id="emp">&nbsp;</span><span id="pe">pe</span><span id="rson">rson</span></div>
	<div id="homo"></div>
</body>

CSS

/* 共通部分のスタイル指定 */
...

/* under 600px */
@media all and (min-width: 600px){
	#homo{
		background-image: url("./images/homo2.gif");
	}
	#emp{
		display: inline;
	}
	#rson{
		display: inline;
		opacity: 0.2;
	}
	#hName{
	color: #000;
	}
}

/* under 650px */

/* 画面サイズ毎のスタイル指定 */
...

今回のポイントはdisplay: inline;にする必要がある事と、opacityプロパティを使用した事。

displayプロパティ

display: block;にしてしまうとブロック要素として表示されるため、次のオブジェクトが改行されます。

"a"がinlineの場合

a person

"a"がblockの場合

a
person

opacityプロパティ

opacityプロパティを使用すると透明度を指定することができます。
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定します。

素材

画像：人の進化

jp.freepik.com
aiデータ（イラストレータのデータ）なので、スライスして画像を取り出して使わせてもらいました。
フリー素材ユーザのためのillustratorの使い方｜画像をスライス（分割）する方法 - one's way blog

今回の様なすぐできる小ネタも今後ちょくちょく作っていきたいと思います。

全ソースはこちら
github.com