レスポンシブ画像系用語

レスポンシブレスポンシブ画像

同意味異表記 / 関連用語一覧

 状態:調査中  閲覧数:1,652  投稿日:2015-08-17  更新日:2015-08-17
Media Queries
Art Direction
picture
srcset
vw

Media Queries / メディアクエリー

 閲覧数:381 投稿日:2015-08-06 更新日:2015-08-17 

Media Queries


メディア クエリ
メディアクエリー
・「ページ レイアウトの変更」だけでなく、「ビューポート幅に応じた画像の選択的な読込」や「アート ディレクションの適用」などにも利用可能

Max Width
・ビューエリアの最大幅
・このサイズより小さい場合に適用

Min Width
・ビューエリアの最小幅
・このサイズより大きい場合に適用

仕様
メディアクエリー

Art Direction / アードディレクション

 閲覧数:358 投稿日:2015-08-06 更新日:2015-08-20 

Art Direction


アードディレクション
・レスポンシブ・レイアウトの特定のブレークポイント向けに調整された画像を提供したい場合に使用
→ 特定のデザインブレークポイントで、指定した画像を表示させたい

仕様
art-direction


descriptor


デスクリプタ
・記述子

種類
・w descriptor
・x descriptor


w descriptor


ダブル デスクリプタ
・幅デスクリプタ

具体例
・160w

仕様
viewport-based-selection


x descriptor


エックス デスクリプタ
・ピクセル密度デスクリプタ

具体例
・1x、1.5x、2x、3x

仕様
device-pixel-ratio

picture element / ピクチャー要素

 閲覧数:384 投稿日:2015-08-06 更新日:2015-08-21 

picture要素


<picture> に <img> は必須
・<picture> の最後に書かなければいけない

アートディレクションでの利用
・<picture> 要素が最も使われるケース
→ レスポンシブデザインにおける「アートディレクション」

アートディレクションとは?
・ひとつの画像をビューポート幅に応じて拡大縮小するのではなく、ビューポートの大きさに合わせ、予め用意した複数の画像を使用する方式

利点
・<picture> 要素、もしくは srcset 属性と sizes 属性を持つ <img> 要素を使用すると、ブラウザは明示的に指定された条件にマッチする画像のみをダウンロード

ブラウザ対応状況
・IE、Edge 未対応
ブラウザ対応一覧




新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向



<picture>要素のsource


使用すると、メディアクエリーを使って条件指定可能
・ウィンドウサイズに合わせて画像を切り替える

具体例
・ウィンドウサイズが320px以上ならsmall.jpg読込
・ウィンドウサイズが320px以上かつRetinaディスプレイならsmall@2x.jpg読込
<picture>
 <source media="(min-width: 320px)" srcset="small.jpg 1x, small@2x.jpg 2x">
 <source media="(min-width: 640px)" srcset="big.jpg 1x, big@2x.jpg 2x">
 <img src="small.jpg" alt="Example image">
</picture>


srcset attribute / srcset属性

 閲覧数:463 投稿日:2015-08-06 更新日:2015-08-21 

imgタグのsrcset属性


HTML5で新しく追加
・記述するimg要素は1つだけで、Media Queries(メディアクエリ)を使用した画像切り替えと同等機能が実現可能

特徴
・対応しているブラウザは必要ない画像をダウンロードしない
・ファイル名のみでxデスクリプタ記述がない場合、そのファイルは 1x が指定されたものとみなされる

導入すると出来るようになること
・Retinaディスプレイ用に画像を切り替え
・ウィンドウサイズに合わせて画像を切り替え

コンマ区切りで画像とその画像が読み込まれる条件を指定
・画像がひとつの場合は、そのファイルのパスを指定(例:srcset="kitten.png")
・画像を複数指定する場合は、ファイルのパスとピクセル密度デスクリプタの組み合わせを、カンマで区切って指定(例:srcset="kitten.png, kitten@2X.png 2x")
・ファイル名のみでデスクリプタがない場合、そのファイルは 1x が指定されたものとみなされる

特徴
・src画像は読み込まない

サイズ指定
・widthとheightを指定しなくとも、’2x’というサイズ指定から自動的に1/2に縮小して表示する

x記述子
・srcset属性に、1.5xや2.0xといったx記述子(descriptor)を画像URLとペアにして記述することで、それぞれのピクセル比(device-pixel-ratio)で表示したい画像を指定可能

ブラウザ対応状況
・IE 未対応
・Edge 部分的なサポート
・解像度の切り替え(X記述子を使用して)するための構文のサブセットではなく、(W記述子を使用して)のサイズで使用できる完全な構文をサポートしています。
Supports the subset of the syntax for resolution switching (using the x descriptor), but not the full syntax that can be used with sizes (using the w descriptor).
ブラウザ対応一覧

src attribute / src属性

 閲覧数:458 投稿日:2015-08-17 更新日:2015-08-21 

imgタグのsrc属性


srcsetに対応していないブラウザへのフォールバック
・未対応ブラウザはここで指定された画像を読込

フォールバックとは?
・ある機能を提供する際に不具合が生じた場合、自動的に代替手段に切り替え、質を落としても機能提供を継続する仕組みのこと

具体例1
・Retinaディスプレイでは test@2x.png を使用、非Retinaディスプレイでは test.png を使用
<img src="test.png" srcset="test.png, test@2x.png 2x">

<img src="test.png" srcset="test.png 1x, test@2x.png 2x">


具体例2
・Retinaディスプレイでは 360-480.jpg を使用、非Retinaディスプレイでは 180-240.jpg  を使用
<img srcset="./images/180-240.jpg, ./images/360-480.jpg 2x" alt="CSSデモ">

<img srcset="./images/180-240.jpg 1x, ./images/360-480.jpg 2x" alt="CSSデモ">



Retinaディスプレイ


AppleがiPhone 4で初めて採用した独自の高精細ディスプレイの名称
・「Retina」とは英語で「網膜」を意味
※Retina相当の解像度を持っているAndroidモデルも存在している

特徴
・画面解像度が高い


Retina対応


=「高解像度ディスプレイ」対応

未対応だと何がマズいの?
・Retinaディスプレイで見た場合、画像がぼやけたように「荒く」見えてしまう

対応
・解像度2倍(サイズが2倍)の画像を用意
・元画像サイズを指定して表示
・例えば300pxで表示する場合、600pxの画像を用意して、HTML上で300pxにサイズを指定して表示すると綺麗な状態で表示される


CSS4 image-set


CSS4のimage-setを使用してRetinaディスプレイに対応する方法
・ベンダプレフィックスが必要なプロパティなので注意が必要

vw(Viewport Width)

 閲覧数:352 投稿日:2015-08-17 更新日:2015-08-17 


vw(Viewport Width)


・表示領域の割合を表す数値
・100vwはViewportの100%
・sizes属性は、デフォルトが100vwなので指定不要


レスポンシブ / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、嫌になるぐらい分かりづらい

レスポンシブ画像実装方式



週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新