先日、こそこそと作ってたAndroid向けの電卓アプリ「LateCalc」をリリースしました。ボクは企画設計、デザイン辺りを担当してます。
なんで、電卓！？とか色々有りますが、まだ実装したい機能とかが全然実装出来てないので、その辺の紹介はある程度機能が実装された頃に書きたいと思ってます。はい。
さて、今回は久々にCSS関連なエントリーです。
ここ数年、レスポンシブ対応な案件が増えていると思われますが、実際にコーディングしていると色々有りますよね...
そんな中でも、画像周りは何かと厄介だったりすると思うので、今回は、PCで見た時とスマホとか（640px以下）で見た時に、違う画像を使いたい場合に使えそうなTipsです。
レスポンシブなんだからPCとスマホで違う画像を使うとかしないで、おとなしく縮小しただけの画像を使った方が良いと思いますが、スマホで見ると画像のテキストが潰れちゃうとか、お客さんの要望とかデザイナーの拘りとか色んな要素が絡むので、中々そうもいきませんね。
ざっくりとしたやり方は、スマホ用の画像は img要素使って普通に表示して、PCではimg要素は非表示にしてCSSで背景画像を指定するって感じです。
サンプルを用意したので以下よりご確認下さいませ。
サンプルのHTMLとCSSは以下の様な感じになっています。
HTML
<p class="logo"> <img src="img/latele_logo.png" alt="Lateleロゴ"> </p>
CSS
img {
vertical-align: top;
}
@media only screen and (max-width: 640px) {
img {
max-width: 100%;
height: auto;
}
}
.logo {
width: 300px;
height: 300px;
margin: 20px auto;
text-align: center;
background: url(../img/latele_logo_symbol.png) no-repeat center;
}
.logo img {
display: none;
}
@media only screen and (max-width: 640px) {
.logo {
width: auto;
height: auto;
background: none;
}
.logo img {
display: block;
}
}
ざっくりとしたやり方に、言いたいこと書いてある感じですけど、img要素にはスマホ用と言うかサンプルでは640px以下のウィンドウ幅用の画像を指定しておくのがポイントです。
どっちも背景で処理するって方法もありますが、背景でやると高さを出すのが面倒なので、imgでやった方が楽かなと。
640px以下の時も画像の幅と高さが固定なら問題ないですが、サンプル2みたいに、PCではバナーが横並びで4つあって、640px以下の時には2x2になって、バナーはウィンドウ幅にあわせて拡縮したい場合なんかには、この方法が役に立つのではないでしょうか。