【HTML/CSS/レスポンシブ】PCとモバイルで表示画像を変える方法 #Ruby

初めに

こちらはHTMLとCSSのみで、PCとモバイルで表示画像を変える方法（画像）をまとめた記事です。
Railsで実装した方法も併せてご紹介しています。

手順

①HTMLにviewportを読み込ませる

レスポンシブに対応させるため、HTMLのhead内にviewportを読み込ませます。

sample.html

<head>
    <!-- 以下１行の記述を追加 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サイトのタイトル</title>
     <!-- 省略 -->
  </head>

②HTMLに表示させたい画像を記述

PC、モバイルで表示させたい画像２枚にそれぞれ違う名前のクラス名を追加します。
例　
・class="pc"
・class="mobile"

sample.html

   <!-- 以下はPCで表示させる画像 -->
   <img src="logo.png" class="logo__pc">
   <!-- 以下はモバイルで表示させる画像 -->
   <img src="logo_responsive.png" class="logo__mobile">

複数箇所変える場合は「○○__pc」など、どこのレスポンシブ化を示しているか明確にすると可視性が高まると思います。
画像名や呼び出し方、クラス名は使用に合わせて、適宜ご変更ください。

この時点では２枚の画像が表示されている状態です。

③CSSで表示の有無を変える記述

表示させたい画像に「display: block;」
非表示にしたい画像に「display: none;」を記述します。

style.css


/*---------------------------------
 以下PCに表示させたいCSS
--------------------------------- */

.logo__pc{
  width: 400px;
  height: 70px;
  display: block;
}

.logo__mobile{
   display: none;
}

/*---------------------------------
 以下レスポンシブデザイン（モバイル）で表示させたいCSS
--------------------------------- */
@media (max-width: 599px) {
.logo__mobile{
  width: 300px;
  height: 70px;
  display: block;
}

.logo__pc{
  display: none;
}

}

Ruby on Railsの場合

「ヘッダーのロゴ」を画面幅によってサイズを変更した実装例
手順は同様ですが、記述するファイルも併せてご紹介しています。

①viewportを読み込ませる

レスポンシブに対応させるため、application.html.erbのhead内にviewportを読み込ませます。

app/views/layouts/application.html.erb

<head>
     #以下１行の記述を追加
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サイトのタイトル</title>
    #省略
  </head>

②表示させたい画像を記述

ヘッダーのサイトタイトルをクリックしたら、トップページに遷移するよう設定しています。

app/views/layouts/application.html.erb

<%= link_to (image_tag "logo.png", class:"logo__pc") , root_path %>
<%= link_to (image_tag "logo_responsive.png", class:"logo__mobile") , root_path %>

③同様にCSSを編集する

style.css


/*---------------------------------
 以下PCに表示させたいCSS
--------------------------------- */

.logo__pc{
  width: 400px;
  height: 70px;
  display: block;
}

.logo__mobile{
   display: none;
}

/*---------------------------------
 以下レスポンシブデザイン（モバイル）で表示させたいCSS
--------------------------------- */
@media (max-width: 599px) {
.logo__mobile{
  width: 300px;
  height: 70px;
  display: block;
}

.logo__pc{
  display: none;
}

}

まとめ

最後までご覧くださり、ありがとうございました。
使用頻度が高そうなので、備忘録としての記録記事でした。

初学者のため、記入漏れや記述ミスがありましたら教えていただけると助かります。

こちらの記事がどなたかの参考になりましたら幸いです。