スクリーンショットの表示サイズを CSS で一括指定する

photo credit: JD Hancock via photopin cc
photo credit: JD Hancock via photopin cc

今までこのブログでは iPhone のスクリーンショットを掲載する際、Retina ディスプレイで画像が粗くなるのを防ぐため、HTML で表示サイズを指定してフルサイズの画像を横幅 240px に縮小表示させてきました。でも毎回毎回、HTML で表示サイズを指定するのはさすがに面倒です。そこで、CSS で一括指定する方法を取り入れてみました。

目次

  1. HTML で指定する方法
  2. 素朴な疑問
  3. CSS で指定する方法

1. HTML で指定する方法

これは今まで自分が取ってきた方法です。iPhone 5 のスクリーンショットは横幅 640px x 縦幅 1136px ですが、これを 240px x 426px に縮小表示させていました。

普通に WordPress の投稿画面でフルサイズの画像を記事の中に貼り付けると、こんな img タグが挿入されます。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="640" height="1136" class="xxx" />

これを次のように編集します。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" width="240" height="426" class="xxx" />

こうすると、フルサイズの画像を、指定したサイズに縮小して表示してくれます。元はフルサイズなので Retina ディスプレイでも鮮明に表示され、拡大にも耐えられます。もちろん、画像のファイルサイズを圧縮するための軽量化処理は必須です。何で 240px なのかは、以前記事に書いたのでそちらをご覧ください。

2. 素朴な疑問

ただ、この方法だと画像の枚数が多い時などは特に、いちいち img タグを書き換えるのが非常に面倒でした。iPhone で PressSync Pro から画像をアップロードするようになってからは、最初から表示サイズを指定できるので作業自体はあまり面倒ではなくなりました。それでも、常に同じサイズで表示させるのに毎回毎回 img タグで指定する必要あるの?という素朴な疑問がありました。

そんな疑問を Twitter で呟いたところ、エニィさん (@eny_satoduka) から「見た目(装飾)に関する記述だから CSS の方がいいのでは?」と教えていただき、記事まで書いてくださいました。ありがとうございます!

  • img要素のwidth・height属性は装飾か否か?について考えてみる | もちゃこい通信

記事の中では、img タグの width, height 属性を装飾と判断するかどうかは悩ましいとしつつも、表示サイズという見た目に関する制御を HTML に記述することへの疑問や、CSS に記述することのメリット(メンテナンス面)について触れられていました。

また、私が知り合いの Web デザイナーさんにお聞きした範囲でも「毎回サイズが一緒ならクラスを当てて CSS で制御する方がいいのでは」との答えが多かったです。

クラスを指定して CSS に書いておけば、後から表示サイズを変えたくなったとしても、膨大な数に上る記事それぞれの HTML を書き換えることなく、CSS の修正だけで簡単に変更できます。少し試してみたところ、HTML に記述する場合に比べて CSS に記述する方が表示速度が遅くなるような感じもありませんでした。

3. CSS で指定する方法

CSS で指定するための方法は簡単です。まず HTML の img タグには width, height 属性を含めません。

<img src="http://xxx/wp-content/uploads/xxx.png" alt="xxx" class="sc-resize xxx" />

クラスには適当に sc-resize と書いてみました。CSS は以下です。

.sc-resize {
    width: 240px;
    height: auto;
}

HTML コードも短くなるし、将来的に横幅をたとえば 320px に変更したくなったとしたら、CSS を width: 320px; と書き換えるだけで済みます。また、メディアクエリを使えばスマートフォンと PC とで表示サイズを変えることも可能になります。

個人的にもこちらの方がシンプルで好きですが、皆さんはどう思いますでしょうか?何かありましたらぜひ hirose (@shirose_jp) までご一報いただければうれしいです。

コメントを残す

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