Material DesignBuild beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.
picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ
<picture> どうなった 勤め先がモバイルに注力していたこともあり、レスポンシブもへったくれもない世界を生きてきた。そのせいで、その類の情報にかなり疎くなっていたので、現状を軽く調査してみた次第。 HTMLでの画像リソース読み込み分岐の必要性 CSS には Media Queries があるので、Viewport の width であったりデバイスのピクセル密度であったりを条件にして background プロパティの指定をすれば対応できる。 反面、<img> 要素と src 属性にはそのような仕組みがないため、Media Queries で可能な条件で同じようにやろうと思うと、JavaScript で DOMContentLoaded のあとに"頑張って"操作するか、バックエンドで UserAgent に応じて"賢く"返す仕組みを用意しなければならない。 WebP のような画像形式
lazysizes - the ultimate lazyloader for responsive images, iframes and widget
lazySizes lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind. Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md. Image with LQIP technique
レスポンシブイメージのネイティブサポート - HTML5 Rocks
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
Element Queries - New way of thinking about responsive web design
CSS is the foundation of the contemporary web. It provides the formatting and layout directives that give web pages their distinctive appearance and feel. Nevertheless, traditional CSS has limitations. Media queries, for instance, enable you to modify styles according to the dimensions of the viewport, but they do not consider the size or context of specific page elements. This can lead to inconsi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kenwheeler/slick: the last carousel you'll ever need
[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS![[JS]コンテンツに応じたレスポンシブデザイン！要素の幅や高さや数に基づいてスタイルを定義できるスクリプト -EQCSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/17cdfacd1e45aee2b86d8c20988b611f663292c4/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016061001.png)
