レスポンシブデザインで画像もレスポンシブ化したい!
最近の流行りのやつですね。レスポンシブなやつです。
まあ流行りにはとりあえず乗っておきましょう。
ちなみに今回の記事は完全にプログラマ目線で書いております。
デザイナーの方には初歩すぎる内容かと思います。
ではまずはレスポンシブデザインのお手本というサイトをご紹介しましょう。
有名ですかね。
他にもTIMEとかがありますね。
ブラウザを横に狭くしていくと気持ち良いほど画面が様々変化していきますね!
純粋にカッコ良いっす!なんかワクワクしますね!
僕はデザイナーではありませんので、こんなの一から作れませんのでBootstrap3に
完全に頼っちゃいます。そう、完全にね。
さてそんなレスポンシブな世の中で画像もレスポンシブにしたい!という状況もあるかと思います。
そういう時は基本的に
プログラミングやWordPressを習得するのに一番近道な方法とは?
画像はwidthに%つけときゃ大丈夫
という感じになります。
そんなの当たり前じゃん!という声が聞こえてきますが。
いや、パーセンテージが良いってことは分かったけど、画面サイズごとにそのパーセンテージを変えられないと俺のデザイン能力は満たされないぜという方もいるかと思います。
CSS3のメディアクエリなるものを使う!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /* デフォルト:479px以下用(スマートフォン用)の記述 */ img { width:80%; } @media screen and (min-width: 480px) { /* 480px以上用(タブレット/スマートフォン用)の記述 */ img { widrh:80%; } } @media screen and (min-width: 768px) { /* 768px以上用(タブレット用)の記述 */ img { width:40%; } } @media screen and (min-width: 980px) { /* 980px以上用(PC用)の記述 */ img { width:30%; } } |
これでPCでは画像が3列に、タブレットでは2列に、スマホでは1列に。みたいなデザインが出来ます。
もちろん画像以外にも色々指定できますよ。
写真は僕が大好きな松岡先生です。
さあこれで皆さんも気合の入ったレスポンシブデザインが出来ますね。