Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
40
Help us understand the problem. What is going on with this article?
@tonkotsuboy_com

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

More than 1 year has passed since last update.

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を使えば短いコードで済むので、今回の機能を覚えて無駄なコーディング時間をなくしましょう。

40
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tonkotsuboy_com
フロントエンド / 九州大学卒 / ウェブ制作 / JavaScriptコードレシピ集の著者 / CSS Nite 2017〜2019ベストセッション / TechFeed公認エキスパート /お仕事依頼はDMまで

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
40
Help us understand the problem. What is going on with this article?