HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
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のみでレスポンシブな画像を取り
HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」
TOP > Design > HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」 webサイトを制作する際には、デザインだけでなく全体の構成などの設計が必要となってきます。しかしコストや時間の関係でなかなか思ったようにデザインできないこともあるのではないでしょうか？そんな時に参考にしたい、HTML5のフリーレスポンシブテンプレート「50 Free Responsive HTML5 Web Templates」を紹介したいと思います。 Cafe & Restaurant Free Website Templates レスポンシブで、スマートフォンやタブレットに自動対応した、ハイクオリティなテンプレートが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Highlig
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
Chrome 34ではimgタグで解像度に応じた複数の画像を出し分けられるよう、レスポンシブイメージ対応に
スマートフォンのような小さな画面からデスクトップPCのディスプレイまで、Webに対応するデバイスの画面の大きさや精細度の多様性は高まってきています。 多くのWebデザイナーは、こうした多様な画面に合わせてレイアウトなどを変えることで見やすくするよう努力してきましたが、こうしたダイナミックなレイアウトを実現する上で大きな課題だったのが画像の扱いです。画面の大きさや精細度に合わせて適切な画像を表示させようにも、そのための標準的な方法がないのがその理由です。 Chrome 34ではその、いわゆるレスポンシブイメージへの対応としてimg要素に新機能を実装することを明らかにしました。。 img要素のsrcsetで、画面解像度ごとに表示すべき画像ファイルを複数指定できるようになります。 <img alt="A rad wolf." src="pic1x.jpg" srcset="pic1x.jpg 1
スピードアップした！フロントエンジニアがWeb制作のために知っておきたいことまとめ
作成：2014/01/14 更新：2014/11/01 Web制作 > 以前までHTMLコーダーと呼ばれていたフロントエンドエンジニアは、表現の進歩やトレンドに伴って、ＣMSやAPIなどより高度な技術や知識を求められるようになりました。今回は今以上に効率化するために、フロントエンドやWebデザイナーが必要とする知識をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マルチデバイス対応 １．フルードレイアウト ２．ドロップレイアウト ３．ワンキャンバスレイアウト ４．可変グリッド ５．ブレイクポイント参考 ６．レスポンシブ対策ライブラリ パフォーマンス改善 ７．ページを高速化する CMS ８．WordPress化 HTML5 API ９．API一覧 クロスブラウザ対策 １０．IE関連 １１．横置き／デバイス対策 １２．Retinaディスプレイ対策
レスポンシブWebデザインをIE8に対応させる方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
InternetExplorerは昔かサイト制作者を悩ませ続けてきました。せっかくレスポンシブサイトを作ろうとしても、レスポンシブサイトというとセットでついてくるメディアクエリ、これにはIE8以下の下位バージョンが対応しておらず、表示は見事に崩れます。 未だ切り捨てられないIEへの対応 モバイルファーストかつレスポンシブということを思えばIE、しかも下位バージョンなら切り捨ててもいいのではないかと思いますが、様々な事情から切り捨てられないシーンもあるでしょう。以前に比べれば低くなったとは言え、特に日本ではIE8のブラウザシェアはまだまだ残っています。 そういった時のために、比較的手軽にIE向けの対応を行える方法があります。 1.「css3-mediaqueries.js」を読み込む こちらはGoogleが推奨している比較的有名なスクリプトです。html5.jsやIE9.jsなどと併用しても
LADER
ラダーは台所用品を中心とした日用品のお店です。素材・デザイン・機能性などを重視し、実際に使ってみて良かったものだけを販売しています。道具を組み合わせた時の使い勝手・コーディネートの相性も気をつけて選んでいます。
Respond.jsとレスポンシブWebデザインをめぐるベストプラクティス議論 | ゆっくりと…
2012年2月、Modernizr 2.5 の カスタム・ビルダー から Respond.js が外されました。理由は、HTML5 Boilerplate （以下 H5BP） コミュニティでの決定です。Respond.js は、IE8 以下などのメディアクエリ未対応なブラウザにもその代替え機能を提供するスクリプトで、レスポンシブ Web デザイン を支えるスクリプトとして、H5BP に長らく （8ヶ月） 採用されてきた経緯があります。 ではなぜ、Respond.js は外されたのでしょう？ 今回は、その決定を下した長～い議論 Issue #816: Revert mobile-first media queries and remove respond.js から、ベスト・プラクティスの要点と、Paul Irish の考える H5BP の理想像を読み解いてみたいと思います。 ヘタクソで読み
HTML5 Boilerplate, Initializrをこれから使う人が押さえるべき5つの原則 | ゆっくりと…
boilerplate とは、「再利用を意図した標準的な文例集」 だそうです。 Paul Irish が中心となり構築されてきた HTML5 Boilerplate は、その名の通り HTML5 でサイトを構築するためのテンプレート、さらにはフレームワークをも含む内容となっており、その特徴は次のように語られています。 HTML5 Boilerplate は、HTML5 を扱う上で必要な数多くの機能強化を他のベスト・プラクティスの数々と組み合わせることで、最小限の先行投資でプロジェクトの磐石な基盤を提供します。 2011年02月08日 HTML5 Boilerplate を使用して Web 開発を容易に始める | IBM developerWorks より。 HTML5 Boilerplateをベースにすることで最初からベストプラクティスが適用されたサイトやページを構築できるという特徴がある
レスポンシブウェブデザインの為のフレームワークいろいろ | hijiriworld Web
1. Initializr 2. 320 and up 3. inuit.css 4. Skeleton 5. Foundation Initializr head要素 <!doctype html> <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"><![endif]--> <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]--> <!--[if IE 8]><html class="no-js lt-ie9" lang="en"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]--> <head> <meta c
シンプルなデザインが嬉しい、IE7もサポートしたレスポンシブデザイン用のHTML5フレームワーク -Wirefy
HTML, CSSだけでなく、jQueryやmodernizrなどJavaScriptやrobots.txtなど、ウェブサイトを構築する際の基本セットが揃ったレスポンシブデザイン用のフレームワークを紹介します。 Wirefy [ad#ad-2] Wirefyの対応ブラウザとデバイス Wirefyのデモ Wirefyの対応ブラウザとデバイス WirefyはIE7をはじめ、すべてのモダンブラウザ、スマートフォンデバイス、タッチデバイスをサポートしています。 Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, IE8, IE7 iPhone (Retina) Droid (Charge/Original) iPad あらかじめセットされているMedia Queriesのブレイクポイントは6つで
アドビ―Dreamweaverデベロッパーセンター
Enhance and extend DreamweaverDreamweaver provides its own API as well as the Common Extensibility Platform (CEP), and offers you the flexibility of using C++, HTML, CSS, and JS to build extensions for Dreamweaver. You can extend the Dreamweaver UI, add powerful features for building web apps and automate entire cross-application workflows. Build custom web development toolsImport database data in
NHKスタジオパーク
NHKスタジオパーク その２ NHKスタジオパークをVRで！大人気だったアニメのアフレコやキャスター体験をどうぞ！ NHKスタジオパーク 閉館について ２０２０年５月１１日 平素よりＮＨＫスタジオパークをご利用いただき誠にありがとうございます。 新型コロナウイルス感染拡大防止のため臨時休館中のＮＨＫスタジオパークは、６月の再開をめざしてきましたが、このたび閉館させていただくことといたしました。 緊急事態宣言が延長されるなど新型コロナウイルスをめぐる状況の先行きが見通せないことと、東京オリンピック・パラリンピックの延期に伴い、放送センターの建て替え工事の準備作業にスケジュールの変更が生じたためです。 当初はことし９月いっぱいでの閉館を発表していましたが、諸般の状況の変化に伴い、閉館時期を早める判断に至りました。 長年、多くの方々にご利用いただき、心より御礼を申し上げます。 既に団体予約をされ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用無料でしかも高品質！レスポンシブ対応、HTML5/CSS3で作成されたテンプレートのまとめ
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
レスポンシブWebデザイン対応のHTML5 / CSS3テンプレートを配布する・「HTML5 Up!」 - かちびと.net
html5-memo.com
サイトの様々な確認作業に使うチェックツール達！レスポンシブ、パフォーマンス、クロスブラウザ対応等全部！ | バンクーバーのうぇぶ屋
html5-memo.com
