#46レスポンシブデザインを初心者でも実装したい。メディアクエリを使った、画面サイズで画像を切り替える方法のまとめ。screenの使い方。サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。まとめレスポンシブデザインとは憧れのレスポンシブデザイン。PC・スマホ・タブレットどれでみても、キレイでおしゃれなブラウザ表示がされてるサイトを見ると、ほんとにすげーなと思います。自分がどちらかというとフロント側に興味があるタイプなので、PCでいろいろなECサイトを見てると、ついついブラウザのwidthを広げたり狭めたりしてレスポンシブの挙動を確認してしまします。今回はそんな憧れのレスポンシブデザインを初心者でもなんとか実装できないものか、ということで割とお手頃なレスポンシブ化を考えていきます。レスポンシブデザインの定義レスポンシブデザインの定義について確認します。レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。pockets【図解】レスポンシブデザインとは?定義、特徴、メリットとデメリットを解説|ネ...ホームページのスマホ対応はもう完了しましたか?モバイル端末でホームページを閲覧する人が増加中の今、多くの企業がwebサイトの「スマホ対応(モバイルフレンドリー化)」をすすめています。既存のPCサイトのデザインをリニューアルする前に、自社にふさわしいスマホ...検索上位にあったものです。「ユーザー目線」で見たときのレスポンシブデザインの定義です。一方で、少し視点を変え、「開発者目線」でレスポンシブデザインの定義を確認します。使用して各デバイスでのページのレンダリングを変える設定方法です。Developersから引っ張ってきました。「内側」から見たときのレスポンシブデザインの定義です。「サーバーからデバイスに対して配信するHTMLは同じだよ。デバイスの画面サイズごとにCSSで表示の仕方を変えるよ。どの画面サイズのデバイスでも見やすい表示に自動で切り替わるよ。」まとめるとこんな感じ。具体的には?個人的に好きなレスポンシブデザインのサイトを紹介します。FRIET」というフレンチフライ専門店のサイトです。グリッドレイアウトで画像が並んでおり、画面サイズを変えるとめちゃくちゃ動きます。(気になるならPCで見てください。スマホでみてもレスポンシブの感動は伝わらないです。何ならクロームで検証ツール使って見てください。東京・広尾のフレンチフライ専門店。本場ベルギーのポテトや、全国から季節に合わせて厳選したポテト、多種多用なトッピング、ディップ、パウダーなどと一緒に楽しめるフライドポテトのスペシャリティショップです。2013年11月オープン予定。おしゃれなとこでおしゃれなお店やってるところはサイトもそりゃおしゃれですわ。FRIET」ぐらいのもの作りたい気持ちはありますが、まあ無理なので、できる範囲でレスポンシブを実現したいと思います。お手頃なのはCSSライブラリ「Bootstrap」のグリッドシステムです。(プログラミングスクールのカリキュラムで教わったからですけど。)また「メディアクエリ(@media)」を使えるようになれば、自由にレスポンシブなデザインを設計できます。グリッドシステムはスクールのカリキュラムで学習したのであれですが、メディアクエリは調べてやったら実装できたので、参考にしたサイト書いていきます。実装したのはトップ画面のメイン画像。imgタグでHTMLに書き込んだ画像ではなく、CSSでdivタグに対し設定した「background-image」に、メディアクエリを当てました。M.以前Railsで作成したインスタクローン(ブログ機能に画像アップロード機能やお気に入り機能などををつけたもの)のトップ画面です。画面幅に応じて画像が切り替わります。タブレットとPCサイズのときの違いはわかりづらいですが、PCサイズだと背景画像に「fixed」がかかります。コーディング最初にHTMLの<HEAD>内に以下のコードが必要です。これがないと、上手い具合に画面サイズで切り替えされません。あなたが撮った傑作を、世界に発信しよう。!</h4><br>あなたが撮った傑作を、世界に発信しよう。image-url("top.jpg");height:500px;}}"top_mini.jpg"がスマホ時の画像(カメラいっぱいのやつ)"top.jpg"がタブ・PC時の画像(女の人)以下のように画面サイズごとのCSS処理を書けば大丈夫でした。pockets画像のレスポンシブ化。Yuki...これ見て真似してやったら実装できます。usersもう逃げない。content="width=device-width,initial-...に詳しく書いてます。まとめこのメディアクエリを使ってレスポンシブ実装できたときめっちゃ自分の中ではテンションが上がってました。友達に「スマホとタブレットとパソコンで画面表示変わるんだよ」とか自慢しても反応は薄いです。世間はあまりそんなところに興味はないみたいです。