Felica Study Site

Lesson Data Down Load

レスポンシブイメージについて

css html

レスポンシブイメージについて

説明画像

レスポンシブイメージはデバイスの解像度に対応させた画像指定の事です。
モバイルファーストでレイアウトをする際に有効な指定です。

モバイルファーストとは？

昨今のWEB業界ではスマートフォン等のモバイル端末を中心にした考えが推奨されています。
モバイルファーストでデザインを考える際には様々な要因があるのですが、その一つに「画像の最適化」が
あげられると思います。

従来のPCファーストの考え方ではPCで使用している素材をモバイルでも使うという形でしたが、
それだとモバイル端末で表示した際に必要以上の容量をダウンロードしなければならない状態でした。

ネットワーク通信で使われるデータ量の事を「トラフィック」と言うのですが、
モバイルファーストではそのトラフィック量を最適化するという意味合いもあります。

レスポンシブイメージ設定

レスポンシブイメージ設定は画像の表示の仕方により違います。

背景画像：メディアクエリで切り替え


.header{
 background-image:url(../img/bg_header_320w.jpg);
}
<!--解像度320px以上のデバイスでは画像サイズ640pxを使用-->
@media (min-width:320px){
 .header{
    background-image:url(../img/bg_header_640w.jpg);
  }
}

imgタグ：srcset属性等で切り替え

<picture>
<source media="(max-width:320px)" srcset="img/bg_header_320w.jpg">
<img src="img/bg_header_640w.jpg" alt="ビル画像">
</picture>

picture要素とは

pictureは要素単体では動作せず、source と img の要素を子要素に持つことで機能する入れ物要素です。
複数の画像リソースの中から、 ブラウザの状況に応じて希望する画像を1つ表示してくれます。

画像を複数指定しても、ブラウザが最適な１枚を選択してくれるので、トラフィック量を無駄に増やしません

picture要素のサポート状況

説明画像１

Can I use… Picture element

picture要素は多くのブラウザがサポートしていますが、IEだけはサポートされていません。
IEなどの未対応ブラウザの場合は記述してあるimg要素が表示されます。

picture要素の書き方

picture要素内にはimg要素を必ず指定する必要があります。

<picture>
 <source media="メディアクエリ" srcset="画像パス">
 <!-- …必要な分だけ記述… -->
    
 <!-- img要素は必ず記述する -->
 <img src="画像パス" alt="画像説明">
</picture>
<picture>
<source media="(max-width:320px)" srcset="img/bg_header_320w.jpg">
  <img src="img/bg_header_640w.jpg" alt="ビル画像">
</picture>

上の記述だと、320pxより小さいサイズのデバイスだと320pxの画像を使用して表示は100%
320pxより大きいデバイスだとimg要素の画像を使用する、という形になります。

レスポンシブイメージ確認サンプル素材はここからダウンロード

コーティング演習

指定画像を用意してカンプを参考にコーティングしましょう。

PCレイアウト用画像
メインビジュアル画像 1枚 1280×720
コンテンツ画像 3枚 640×480
SPレイアウト用画像
メインビジュアル画像 1枚 480×720
コンテンツ画像 3枚 480×720

テキスト

sweet-time
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

メインビジュアル画像
sweet-contents

item-1
コンテンツ画像
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

item-2
コンテンツ画像
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

item-3
コンテンツ画像
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

felica © sweet-time

カンプ画像

PCカンプ画像

説明画像１

SPカンプ画像

説明画像１

コーティング例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Sweet-time</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<header class="header">
<div class="heading">
<h1>sweet-time</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem</p>
</div><!-- /.heading -->

<p>
<picture>
<source media="(max-width:480px)" srcset="img/main-sp.jpg" sizes="100vw">
<img src="img/main-pc.jpg" alt="メインビジュアル画像">
</picture>
</p>
</header>

<main class="main">

<section class="contents">
<h2>sweet-contents</h2>

<div class="contents-box">

<section class="contents-item">
<h3>item-1</h3>
<p>
<picture>
<source media="(max-width:480px)" srcset="img/item1-sp.jpg" sizes="100vw">
<img src="img/item1-pc.jpg" alt="コンテンツ画像">
</picture>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</section>

<section class="contents-item">
<h3>item-2</h3>
<p>
<picture>
<source media="(max-width:480px)" srcset="img/item2-sp.jpg" sizes="100vw">
<img src="img/item2-pc.jpg" alt="コンテンツ画像">
</picture>
</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</section>

<section class="contents-item">
<h3>item-3</h3>
<p>
<picture>
<source media="(max-width:480px)" srcset="img/item3-sp.jpg" sizes="100vw">
<img src="img/item3-pc.jpg" alt="コンテンツ画像">
</picture>
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</section>

</div><!-- /.contents-box -->

</section>
</main>

<footer class="footer">
<p><small>felica &copy; sweet-time</small></p>
</footer>
</body>
</html>

CSS

@charset "utf-8";
*{
 padding: 0;
 margin: 0;
 line-height: 1;
}
img{
 vertical-align: bottom;
 max-width: 100%;
}

/*header
---------------------*/
.header{
 margin-bottom: 150px;
 text-align: center;
 position: relative;
}

.header .heading{
  max-width: 600px;
  padding: 20px;
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 80px;
}

.header .heading h1{
 margin-bottom: 10px;
}

.header .heading p{
 line-height: 1.65;
}

/*contents
-------------------------*/
.contents{
 margin-bottom: 100px;
}

.contents h2{
 margin-bottom: 30px;
 text-align: center;
 font-size: 36px;
}

.contents .contents-box{
 display: flex;
 justify-content: center;
 gap: 30px;
 max-width: 1280px;
 margin: auto;
}

.contents .contents-item{
 width: 30%;
}

.contents .contents-item h3{
 margin-bottom: 20px;
 text-align: center;
}

.contents .contents-item h3 + p{
 margin-bottom: 10px;
}

.contents .contents-item p{
 line-height: 1.65;
}

/*footer
-------------------*/
.footer{
 padding-bottom: 60px;
 text-align: center;
}

/*メディアクエリ
-------------------------*/
@media screen and (max-width:480px){
  
/*header
---------------------*/
.header{
 margin-bottom: 100px;
}

.header .heading{
  background-color: rgba(255,255,255,0);
  bottom: auto;
  top:10%;
  color: #fff;
}

/*contents
-------------------------*/
.contents{
 margin-bottom: 100px;
}

.contents .contents-box{
 display: block;
}

.contents .contents-item{
 width: 100%;
 margin-bottom: 100px;
}

.contents .contents-item h3{
font-size: 28px;
}

.contents .contents-item h3 + p{
 margin-bottom: 20px;
}

.contents .contents-item p{
 padding: 0 20px;
}

}/*sp-end*/