srcsetに関するJxckのブックマーク (9)
-
Jxck 2016/03/17
-
今更ですがRetina対応 – srcset | 9142.NET
トップページ サービス内容 [ WEBサイト構築・更新 ] ホームページ制作・リニューアル テンプレート加工 ブログ作成 ネットショッピングサイト制作 [ WEBシステム開発 ] PHP・Pealによるシステム開発 [ CMS・かんたん更新 ] かんたん更新・CMSソリューション Movable Type 制作・構築 WordPress 制作・構築 [ レスポンシブWEBデザイン ] レスポンシブデザイン モバイルサイト制作 会社概要 ご挨拶 制作スキル 制作環境 事業所概要 ブログ お問い合わせ お知らせ 9142.NETでも「なんとなく」Retina対応はしていましたが、プチリニューアルの際に再度Retina対応について考えてみました。 基本的には「<img>ソース」「css」「Javascript」の３つの手法で対応しているかと思います。 今回は「<img>ソースで表示」する方法
-
iPhone 6 Screens Demystified | PaintCode
Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree
-
-
Microsoft Edge で使う拡張された srcset と picture 要素 - Browser
今回も Microsoft Edge Dev Blog から 以前、 srcset 使用した場合は解像度のみ使用できました。 今回で使うサンプル サンプル ウインドウの幅を変更すると変化を確認できます。 拡張された機能 伸縮する際の画像幅に指定できます。 サイズの属性を使用すると 200px < 350px < 400px ように指定できます。 サイズの属性に固定値を入れることで幅を固定しつつ画面サイズで大きさを変えます。 表示結果は解像度変更するものにスタイル等で画像幅を指定したものと同じです。 picture、source 要素による切り替え 主に一部ブラウザで非対応画像ファイルの表示振り分けや、画面の状態での画像の行事振り分けに使います。 WebP があれば表示させる 画面の向きがポートレートならば専用の画像を表示させる Media Query のように指定ができ and や or
-
html5のpicture要素を使ってみた｜フロントエンド｜新着情報｜たいしょん倶楽部 ｜名古屋でWebデザインを学ぶ学生のブログ
picture要素って何？ その名の通り、写真に関する要素であることは間違いないです。そんなの見りゃ分かるよ！というわけで概要を調べてみました。 <picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込みがネイティブに実装・最適化されたのは、遅いモバイル回線でページを見ているユーザーにも嬉しいことです。これはとくに重要でしょう。（ http://www.html5rocks.com/ja/tutorials/responsive/picture-element/ ） ということは、CSSでメディアクエリを使用することなく画面サイズに応じて画像をあんなことしたりこんなことしたりできるわけですね！しかし、HTM
-
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
-
srcsetとsizes
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
-
picture要素の関連仕様って今どうなってるんだっけ？を調べたメモ
<picture> どうなった 勤め先がモバイルに注力していたこともあり、レスポンシブもへったくれもない世界を生きてきた。そのせいで、その類の情報にかなり疎くなっていたので、現状を軽く調査してみた次第。 HTMLでの画像リソース読み込み分岐の必要性 CSS には Media Queries があるので、Viewport の width であったりデバイスのピクセル密度であったりを条件にして background プロパティの指定をすれば対応できる。 反面、<img> 要素と src 属性にはそのような仕組みがないため、Media Queries で可能な条件で同じようにやろうと思うと、JavaScript で DOMContentLoaded のあとに"頑張って"操作するか、バックエンドで UserAgent に応じて"賢く"返す仕組みを用意しなければならない。 WebP のような画像形式
-
1
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
