HTML
HTML5
emmet
レスポンシブイメージ

EmmetでHTML 5.1のレスポンシブイメージを効率よく記述しよう

HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか?

本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します

※ 参考記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA


srcset の記述

レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。


Emmet

ri:v


または


Emmet

img:z


展開後のHTMLコードは次のとおりです。レスポンシブイメージに必要なsizessrcを指定しつつ、imgタグが展開されます。


展開後のHTML

<img sizes="" srcset="" src="" alt="">



アートボード(picturesource)用の記述

レスポンシブイメージのもう一つの機能として、最適な「見た目」の画像を出し分ける為のpicture要素があります。Emmetでは次のように省略できます。


Emmet

ri:art


展開後のHTMLコードは次です。pictureを構成するsourceタグ(media属性、srcset属性を含む)、imgタグが展開されます。


展開後のHTML

<picture>

<source media="(min-width: )" srcset="">
<img src="" alt=""></picture>


sourceタグのみを展開する

picture要素は複数のsource要素から成り立つので、sourceタグのみを展開したいケースがあります。media属性のみ指定、sizesも併せて指定等、いくつかの指定方法があります。


media属性のみ指定

src:m



展開後のHTML

<source media="(min-width: )" srcset="">


mediasizesを両方展開したい場合のコードです。

src:mz


展開後のHTML

<source media="(min-width: )" sizes="" srcset="">


例えば、3つのsourceタグを展開したい場合には、次のように記述するとよいでしょう。


Emmet

picsrc:mz*3



展開後のHTML

<source media="(min-width: )" sizes="" srcset="">

<source media="(min-width: )" sizes="" srcset="">
<source media="(min-width: )" sizes="" srcset="">


レスポンシブイメージには嬉しい機能

レスポンシブイメージは、今後のレスポンシブwebデザインを考える上で標準となる機能だと予想していますが、コードの記述量の多さがネックでした。

Emmetを使えば短いコードで済むので、今回の機能を覚えて無駄なコーディング時間をなくしましょう。