HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法
JavaScript のメソッド window.matchMedia を使用すると、CSS3 の MediaQuery のようにウィンドウサイズで JavaScript のコードを分けて使用する事が可能です。window.matchMedia の使い方・対応ブラウザなどのメモです。 window.matchMedia は MediaQueryList オブジェクト（MediaQueryList – Web API インターフェイス | MDN）を返すメソッドです。 サンプルデモまでのリンク→ウィンドウサイズによってテキストの内容を変更するサンプルデモ 使い方 matches でウィンドウサイズとマッチするかを簡単に調べる matches プロパティを使うと、指定したウィンドウサイズとマッチしたら true マッチしなければ false を返してくれます。ウィンドウサイズの指定の仕方は CS
![[JS] window.matchMedia をつかって JavaScript のコードをレスポンシブに分ける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/d4a1ab350b11240c268ad4418373b07e790b15b0/height=288;version=1;width=512/https%3A%2F%2Fmemocarilog.info%2Fwp-content%2Fuploads%2F2014%2F08%2Fmediaquery.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
