アート ディレクション

Katie Hempenius
Katie Hempenius

デモをお試しください

  • サイトをプレビューするには、[アプリを表示] を押します。[ 全画面表示 全画面表示
  • さまざまなブラウザサイズを使用してアプリを再読み込みします。ご覧のとおり、画像と サイズだけでなく切り抜き方や アスペクト比。

一体、どういうことでしょうか。

アート ディレクション さまざまなディスプレイ サイズでさまざまな画像を表示します。

レスポンシブ画像では、同じサイズの異なる画像が読み込まれます。アート ディレクションは さらに一歩進んで、画像の状態に応じてまったく異なる画像を 表示されます。

アート ディレクションを使用して、視覚的なプレゼンテーションの質を高める。たとえば、 このデモでは、画像のトリミングによってスポット(花)が 表示に関係なく常に詳細が表示されます。アート ディレクションのメリット 単なる見た目の美しさレスポンシブ画像と比べてパフォーマンス上のメリットはありません。

コードを表示する

  • このデモのアート ディレクションのコードを確認するには、index.html をご覧ください。

コードの仕組み

アート ディレクションでは、 <picture> <source>, と <img> タグを使用します。

画像

<picture> タグは、0 個以上の <source> タグと 1 つの <image> タグのラッパーとなります。

source

<source> タグは、メディア リソースを指定します。

ブラウザは、最初の <source> タグをメディアクエリとともに使用します。 true を返します。一致するメディアクエリがない場合は、 ブラウザは、<img> で指定された画像を読み込みにフォールバックします。 インスタンスにしか適用できません

img

<img> タグを指定すると、このコードが <picture> タグをサポートしています。

ブラウザが <picture> タグをサポートしていない場合は、 <img> タグで指定されたイメージ。