HTML、CSSを短い文字数で打てるプラグインEmmetを使いこなせば、コーディングの時間は大きく短縮されます。昨今のEmmetでは、HTML 5.1のレスポンシブイメージ(※)を効率的に記述できることをご存知でしょうか？
本エントリーではEmmetでレスポンシブイメージのコードを効率的に記述する方法を紹介します。
※ 参考記事「レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA」
srcset の記述
レスポンシブイメージでは、デバイス環境に応じた最適なファイルサイズの画像を表示するためにimg要素のsrcset属性を用います。Emmetでは次のように記述します。
ri:v
または
img:z
展開後のHTMLコードは次のとおりです。レスポンシブイメージに必要なsizes、srcを指定しつつ、imgタグが展開されます。
<img sizes="" srcset="" src="" alt="">
アートボード(picture、source)用の記述
レスポンシブイメージのもう一つの機能として、最適な「見た目」の画像を出し分ける為のpicture要素があります。Emmetでは次のように省略できます。
ri:art
展開後のHTMLコードは次です。pictureを構成するsourceタグ(media属性、srcset属性を含む)、imgタグが展開されます。
<picture>
<source media="(min-width: )" srcset="">
<img src="" alt=""></picture>
sourceタグのみを展開する
picture要素は複数のsource要素から成り立つので、sourceタグのみを展開したいケースがあります。media属性のみ指定、sizesも併せて指定等、いくつかの指定方法があります。
src:m
<source media="(min-width: )" srcset="">
mediaとsizesを両方展開したい場合のコードです。
src:mz
<source media="(min-width: )" sizes="" srcset="">
例えば、3つのsourceタグを展開したい場合には、次のように記述するとよいでしょう。
picsrc:mz*3
<source media="(min-width: )" sizes="" srcset="">
<source media="(min-width: )" sizes="" srcset="">
<source media="(min-width: )" sizes="" srcset="">
レスポンシブイメージには嬉しい機能
レスポンシブイメージは、今後のレスポンシブwebデザインを考える上で標準となる機能だと予想していますが、コードの記述量の多さがネックでした。
Emmetを使えば短いコードで済むので、今回の機能を覚えて無駄なコーディング時間をなくしましょう。