【CSS】レスポンシブデザイン入門(メディアクエリの使い方)

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #46

レスポンシブデザインを初心者でも実装したい。メディアクエリを使った、画面サイズで画像を切り替える方法のまとめ。@media screenの使い方。

はじめに

この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。

 

目次

[toc]

 

レスポンシブデザインとは

憧れのレスポンシブデザイン。PC・スマホ・タブレットどれでみても、キレイでおしゃれなブラウザ表示がされてるサイトを見ると、ほんとにすげーなと思います。自分がどちらかというとフロント側に興味があるタイプなので、PCでいろいろなECサイトを見てると、ついついブラウザのwidthを広げたり狭めたりしてレスポンシブの挙動を確認してしまします。

今回はそんな憧れのレスポンシブデザインを初心者でもなんとか実装できないものか、ということで割とお手頃なレスポンシブ化を考えていきます。

レスポンシブデザインの定義

レスポンシブデザインの定義について確認します。

レスポンシブデザインとは、デバイスの画面サイズに依存しないwebサイトを構築する手法です。言い換えると、デバイスのウィンドウ幅に「responsive(良く反応)」して、見やすい表示に自動で切り替える仕組みを持つデザインのことです。

[blogcard url=”https://www.yamatofinancial.jp/learning/know-how/what-is-responsive-web-design.html”]

検索上位にあったものです。「ユーザー目線」で見たときのレスポンシブデザインの定義です。

 

一方で、少し視点を変え、「開発者目線」でレスポンシブデザインの定義を確認します。

レスポンシブ ウェブ デザイン(RWD)は、サーバーからどのデバイスに対しても常に同じ HTML コードを配信し、CSS を使用して各デバイスでのページのレンダリングを変える設定方法です。

[blogcard url=”https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ja&authuser=1″]

Google Developersから引っ張ってきました。「内側」から見たときのレスポンシブデザインの定義です。

 

「サーバーからデバイスに対して配信するHTMLは同じだよ。デバイスの画面サイズごとにCSSで表示の仕方を変えるよ。どの画面サイズのデバイスでも見やすい表示に自動で切り替わるよ。」

 

まとめるとこんな感じ。

 

具体的には?

個人的に好きなレスポンシブデザインのサイトを紹介します。「AND THE FRIET」というフレンチフライ専門店のサイトです。グリッドレイアウトで画像が並んでおり、画面サイズを変えるとめちゃくちゃ動きます。(気になるならPCで見てください。スマホでみてもレスポンシブの感動は伝わらないです。何ならクロームで検証ツール使って見てください。)

[blogcard url=”http://andthefriet.com”]

AND THE FRIET

おしゃれなとこでおしゃれなお店やってるところはサイトもそりゃおしゃれですわ。

 

レスポンシブデザインの実装

上に載っけた「AND THE FRIET」ぐらいのもの作りたい気持ちはありますが、まあ無理なので、できる範囲でレスポンシブを実現したいと思います。

一番お手頃なのはCSSライブラリ「Bootstrap」のグリッドシステムです。(プログラミングスクールのカリキュラムで教わったからですけど。)

また「メディアクエリ(@media)」を使えるようになれば、自由にレスポンシブなデザインを設計できます。

グリッドシステムはスクールのカリキュラムで学習したのであれですが、メディアクエリは調べてやったら実装できたので、参考にしたサイト書いていきます。

メディアクエリ実装

実装したのはトップ画面のメイン画像。imgタグでHTMLに書き込んだ画像ではなく、CSSでdivタグに対し設定した「background-image」に、メディアクエリを当てました。

 

実際の成果物

[blogcard url=”https://fierce-crag-33298.herokuapp.com”]

以前Railsで作成したインスタクローン(ブログ機能に画像アップロード機能やお気に入り機能などををつけたもの)のトップ画面です。

 

【スマホ→タブレット】

メディアクエリ1

 

【タブレット→PC】

メディアクエリ2

 

画面幅に応じて画像が切り替わります。タブレットとPCサイズのときの違いはわかりづらいですが、PCサイズだと背景画像に「fixed」がかかります。

 

コーディング

最初にHTMLの<HEAD>内に以下のコードが必要です。これがないと、上手い具合に画面サイズで切り替えされません。

layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>P. Y. M.</title>
    #省略
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  </head>
    #省略
</html>

 

tops/index/html.erb

<div class="main-image">
</div>
<div class="about">
  <h1>P. Y. M.</h1>
  <p>
    <h4>Post Your Masterpiece !</h4><br>
    あなたが撮った傑作を、世界に発信しよう。
  </p>
</div>

<p><a class="btn btn-primary btn-lg" href="/users/new" role="button">Sign up!</a>

 

tops/scss(メディアクエリかけた部分のみ抜粋)

.main-image{
  padding-bottom: 15%;
  width: 100%;
  height:300px;
  background-size: cover;
  background-image: image-url("top_mini.jpg");
  opacity: 0.9;
  background-position: center;
  background-repeat: no-repeat;
}

.image:after {
  content: "";
  display: block;
  padding-top: 56.25%;
}

@media screen and (min-width:1025px){
  .main-image {
    background-image: image-url("top.jpg");
    height:450px;
    background-attachment: fixed;
  }
}

@media screen and (min-width:640px){
  .main-image {
    background-image: image-url("top.jpg");
    height:500px;
  }
}

 

“top_mini.jpg”がスマホ時の画像(カメラいっぱいのやつ)

“top.jpg”がタブ・PC時の画像(女の人)

 

以下のように画面サイズごとのCSS処理を書けば大丈夫でした。

@media screen (min-width: 〇〇px) {

(〇〇px以上の画面サイズのときのCSS) ;

}

 

参考にしたサイト

[blogcard url=”http://yuki-s.me/responsive-image/”]

これ見て真似してやったら実装できます。ぜひこっち見てください。

また、<HEAD>に書いた「viewport」については、

[blogcard url=”https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607″]

に詳しく書いてます。

 

まとめ

このメディアクエリを使ってレスポンシブ実装できたときめっちゃ自分の中ではテンションが上がってました。

しかし友達に「スマホとタブレットとパソコンで画面表示変わるんだよ」とか自慢しても反応は薄いです。世間はあまりそんなところに興味はないみたいです。

 

インスタクローンについては、

[blogcard url=”https://whatsupguys.net/programing-school-dive-into-code-learning-18/”]

この回で作ったときの感想書いてます。

 

以上ありがとうございました。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA