たったひとりのIT事業部。

  1. TOP
  2. WEB
  3. img画像をレスポンシブスマホに対応させるcss

img画像をレスポンシブスマホに対応させるcss

｜
img画像のレスポンシブCSS

画像は<img>で貼りこむのにPC表示と共にスマホやタブレットなどに対応したレスポンシブ表示が求められます。

小さい画面でimg画像だけがはみ出すとデザイン崩れの原因になります。
しっかりと画面比率に合わせて画像サイズが伸縮するようにcssを整えます。

このページでは、img画像をレスポンシブ化させる方法を紹介します。

設定方法

<img>で記事に貼付ける画像は、widthを「100%」、heightを「auto」として画面比率に合わせて可変することが可能です。

例えばimg画面をレスポンシブ化すると、次のようにPC表示とスマホ表示では画面サイズに合わせて画像サイズが変化します。

画像をレスポンシブ化

以下のコードをcssに記述します。

/* Internet Explorer用の設定 */
a img {
	border: none;
}
/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
}

これで<img>で記事に画像を貼付けつけると可変式になりました。以下は実際のサンプル画像です。ブラウザサイズを縮小すると画面サイズに合わせて可変しています。

レスポンシブ画像のサンプル

写真枠付き画像

ただ画像を可変式にするよりもデザインを整えると見た目も良くなります。写真のようなフレームを追加して、画像を表示します。

写真のようなレスポンシブ画像

以下のコードをCSSに記述します。

/* Internet Explorer用の設定 */
a img {
	border: none;
}
/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
}
/* imgの枠 */
.photo img {
	border: 1px solid #999999;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 5px;
}
.photo img:hover {
	-ms-filter: "alpha( opacity=85 )";/*for IE8*/
	filter: alpha(opacity=85); /*for IE6～7*/
	opacity: 0.85;
}

使用する際は<img>を<p>などで囲って、.photoのクラス属性を追加します。

<p class="photo">画像を入れる。</p>

<img>画像にborderを1px追加します。写真枠の部分はpaddingで設定します。画像の全体サイズはwidht:100%＋border:1px＋padding:5pxですが、box-sizingを設定すると、widht:100%のみになり、僅かなサイズ崩れが防げます。

また、画像にカーソルが重なった際に色が透けるように、opacity:0.85を設定しています。

浮き出た画像

画像が浮き出たように表示されて、立体感のある形に設定します。

浮き出たレスポンシブ画像

以下のコードをCSSに記述します。

/* Internet Explorer用の設定 */
a img {
	border: none;
}
/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
}
/* imgの枠 */
.cube img {
	border-radius:5px;
	box-shadow:rgba(0,0,0,0.45) 0px 20px 40px 0px
}
.cube img:hover {
	-ms-filter: "alpha( opacity=85 )";/*for IE8*/
	filter: alpha(opacity=85); /*for IE6～7*/
	opacity: 0.85;
}

使用する際は<img>を<p>などで囲って、.cubeのクラス属性を追加します。

<p class="cube">画像を入れる。</p>

boder-radius:5pxにすると画像の角が丸みを帯びます。また、box-shadowにより、画像に影が追加されて、浮いているような立体感が生まれます。

画面サイズに合わせて画像は可変します。

透明な枠付き画像

画像の周りに透明な枠を追加します。
立体感もあり、写真がきれいに飾れるのでお勧めです。

透明な枠付き画像の作り方

以下のコードをCSSに記述します。

a img {
	border: none;
}
/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
}
/* imgの枠 */
.transparence img {
	padding: 5px;
	background-color: rgba(255, 255, 255, .2);
	border-radius: 4px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, .2), inset 0 1px 1px rgba(255, 255, 255, .7);
}
.transparence img:hover {
	-ms-filter: "alpha( opacity=85 )";/*for IE8*/
	filter: alpha(opacity=85); /*for IE6～7*/
	opacity: 0.85;
}

使用する際は<img>を<p>などで囲って、.transparenceのクラス属性を追加します。

<p class="transparence">画像を入れる。</p>

boder-radius:4pxにすると画像の角が少しだけ丸くなります。box-shadowで影を追加しているので、少しだけ立体感が出ています。

写真のフレーム部分は、background-colorで透明化しています。背景が白以外だと透明になっているのがわかります。

フレームが透明なレスポンシブ画像

グレーの枠付き画像

簡単なグレーの枠付きのある画像を作成します。シンプルに飾らないタイプなので標準的に良いと思います。

グレーの枠付きレスポンシブ画像

以下のコードをCSSに記述します。

/* Internet Explorer用の設定 */
a img {
	border: none;
}
/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
}
/* imgの枠 */
.simple img {
	border: 5px solid #e0e0e0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.simple img:hover {
	-ms-filter: "alpha( opacity=85 )";/*for IE8*/
	filter: alpha(opacity=85); /*for IE6～7*/
	opacity: 0.85;
}

使用する際は<img>を<p>などで囲って、.simpleのクラス属性を追加します。

<p class="simple">画像を入れる。</p>

<img>画像にborderを5pxを記述して、画像の枠部分を作成します。画像の全体サイズはwidht:100%＋border:5pxですが、box-sizingを設定すると、widht:100%のみになり、僅かなサイズ崩れが防げます。

オプション

WEBサイトの設計によっては、img画像下に僅かな隙間が発生することがあります。気になる場合は、vertical-alignを記述すると画像の下に余計な空白が入らなくなります。

/* レスポンシブ画像用の設定 */
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

まとめ

記事を作成するときに文字の次に重要な役割を果たすのが画像なので、しっかり表示されるようにしたいものです。

画像はレスポンシ化させるとスマホやタブレットの小さい画面でも完璧に表示されます。
WEBサイトの訪問者もストレスなく記事の観覧ができます。