アート ディレクション
bookmark_borderbookmark
コレクションでコンテンツを整理
必要に応じて、コンテンツの保存と分類を行います。
デモをお試しください
- サイトをプレビューするには、[アプリを表示] を押します。[
全画面表示
。
- さまざまなブラウザサイズを使用してアプリを再読み込みします。ご覧のとおり、画像と
サイズだけでなく切り抜き方や
アスペクト比。
一体、どういうことでしょうか。
アート ディレクション
さまざまなディスプレイ サイズでさまざまな画像を表示します。
レスポンシブ画像では、同じサイズの異なる画像が読み込まれます。アート ディレクションは
さらに一歩進んで、画像の状態に応じてまったく異なる画像を
表示されます。
アート ディレクションを使用して、視覚的なプレゼンテーションの質を高める。たとえば、
このデモでは、画像のトリミングによってスポット(花)が
表示に関係なく常に詳細が表示されます。アート ディレクションのメリット
単なる見た目の美しさレスポンシブ画像と比べてパフォーマンス上のメリットはありません。
コードを表示する
- このデモのアート ディレクションのコードを確認するには、
index.html
をご覧ください。
コードの仕組み
アート ディレクションでは、
<picture>
<source>
,
と <img>
タグを使用します。
画像
<picture>
タグは、0 個以上の <source>
タグと 1 つの <image>
タグのラッパーとなります。
source
<source>
タグは、メディア リソースを指定します。
ブラウザは、最初の <source>
タグをメディアクエリとともに使用します。
true を返します。一致するメディアクエリがない場合は、
ブラウザは、<img>
で指定された画像を読み込みにフォールバックします。
インスタンスにしか適用できません
img
<img>
タグを指定すると、このコードが
<picture>
タグをサポートしています。
ブラウザが <picture>
タグをサポートしていない場合は、
<img>
タグで指定されたイメージ。
特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用許諾されます。コードサンプルは Apache 2.0 ライセンスにより使用許諾されます。詳しくは、Google Developers サイトのポリシーをご覧ください。Java は Oracle および関連会社の登録商標です。
最終更新日 2018-11-05 UTC。
[[["わかりやすい","easyToUnderstand","thumb-up"],["問題の解決に役立った","solvedMyProblem","thumb-up"],["その他","otherUp","thumb-up"]],[["必要な情報がない","missingTheInformationINeed","thumb-down"],["複雑すぎる / 手順が多すぎる","tooComplicatedTooManySteps","thumb-down"],["最新ではない","outOfDate","thumb-down"],["翻訳に関する問題","translationIssue","thumb-down"],["サンプル / コードに問題がある","samplesCodeIssue","thumb-down"],["その他","otherDown","thumb-down"]],["最終更新日 2018-11-05 UTC。"],[],[]]