レスポンシブデザインで画像もレスポンシブ化したい!

 
最近の流行りのやつですね。レスポンシブなやつです。

まあ流行りにはとりあえず乗っておきましょう。

 
ちなみに今回の記事は完全にプログラマ目線で書いております。
デザイナーの方には初歩すぎる内容かと思います。

 
ではまずはレスポンシブデザインのお手本というサイトをご紹介しましょう。

スターバックス

有名ですかね。

他にもTIMEとかがありますね。

ブラウザを横に狭くしていくと気持ち良いほど画面が様々変化していきますね!

純粋にカッコ良いっす!なんかワクワクしますね!

 
 
僕はデザイナーではありませんので、こんなの一から作れませんのでBootstrap3
完全に頼っちゃいます。そう、完全にね。

 
さてそんなレスポンシブな世の中で画像もレスポンシブにしたい!という状況もあるかと思います。

そういう時は基本的に

プログラミングやWordPressを習得するのに一番近道な方法とは?

画像はwidthに%つけときゃ大丈夫

 
という感じになります。

そんなの当たり前じゃん!という声が聞こえてきますが。

いや、パーセンテージが良いってことは分かったけど、画面サイズごとにそのパーセンテージを変えられないと俺のデザイン能力は満たされないぜという方もいるかと思います。

 

CSS3のメディアクエリなるものを使う!

 

これでPCでは画像が3列に、タブレットでは2列に、スマホでは1列に。みたいなデザインが出来ます。
もちろん画像以外にも色々指定できますよ。

デモページ

 
写真は僕が大好きな松岡先生です。

 
さあこれで皆さんも気合の入ったレスポンシブデザインが出来ますね。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください