さらばmozとoのdevice-pixel-ratio - fragmentary
そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。 これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { .foo { background-image: url(image-2x.png); } } } device-pixel-ratioはもともとWebKitの拡張だったもの。それをMozillaとOperaも取り入れたのだけど、ベンダー接頭辞の面倒さに加えてmin-/max-のつき方、値の書き方がばらばら
レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
デザイン要素を固定しないリキッドレイアウトは、未知の端末にも対応するというコンセプトのもとに実装するレスポンシブウェブデザインには必須だと考えています。そのリキッドレイアウトを実装する際に理解しておきたいのが、パーセント値で幅や高さを指定した際に小数点以下になるピクセル値（10.5pxとか9.2pxなど）に対するブラウザの挙動です。 たとえばグリッドシステムを構築する際、計算上はあっているのにブラウザでは思った通りに表示されないといったことが起こります。これは、各ブラウザのサブピクセル（小数点以下のピクセル値）の扱いの挙動差により生まれます。 まずはパーセント指定の基本から まずは前提となるパーセント指定の際の計算の基本のおさらいから。。。 CSSでパーセント値を使って幅や高さ指定をすると、指定した要素を含む親要素をベースにピクセル値が計算されます。 たとえば100pxの親要素の中にある子
Media Queriesの基本についてまとめてみた
Media Queriesを活用したサイト制作を始めようと思っているので、ざざっと調べたことからまとめてみました。まずは基本から… Media Queriesってなに？ 簡単に言うと、デバイスのスクリーンサイズなどの条件によって、読み込むスタイルが切り替えられるCSS3の機能です。 <link rel="stylesheet" href="nanchara.css" type="text/css" media="print" /> CSS2では上記のように、「print」や「screen」などを指定して印刷向け、スクリーン表示向けといった「media types (媒体型)」を指定して、それぞれのメディア向けにCSSを書くことができました。Media Queriesはこれが拡張されたもので、「media types (媒体型)」にくわえ「width」、「height」、「color」などの
レスポンシブにデザインするために克服すること : could
画像の課題は解決されつつある 先日 Web担当者 Forum で、レスポンシブ・ウェブデザインの功罪とモバイルファースト という記事が掲載されました。Media Queries を活用するなど実装のための概要を説明した上で、非表示だけど読み込まれているから膨大な画像素材が存在する PC サイトのレスポンシブデザインは不適切であると書かれています。 現存の Web サイトを Media Queries だけでレスポンシブ・ウェブデザインをするのであれば、Web担当者 Forum での指摘は間違っていませんが、実際のところレスポンシブにデザインすることは、Media Queries による対応だけではありません。例えば、画像の表示のさせ方を工夫すれば、記事で指摘している課題はある程度解決できます。Web担の記事からもリンクされている CSS Rador でも取り上げられている解決策もありますが
HTML5 Boilerplateのhtmlスニペットを紐解く
HTML4.01, XHTML1.0で「いつもの感じ」のソースコードにすっかり落ち着き、特に迷うこともなかった私は、Boilerplateのスニペットをみた時、結構衝撃を受けました(；´Д｀)。 今回は、Boilerplateのコアであるhtmlの内容・スニペットをひとつずつ見ていき、それらが前回テーマにした「5つの要件」にどのように作用するかを紐解いていきます。「新しい技術に取り組みたい、けど何から始めればいいか分からない！」そんな方のヒントになると幸いです。 それでは早速、謎解きスタートです！ ソース全体 まずは全体から、次のような特徴が見て取れます。 文頭に、見慣れないコンディショナルコメントがある。 ＜meta＞に「X-UA-Compatible」というのがある。 ＜meta＞に「keyword」がない。 ＜meta＞に「viewport」がある。 読み込まれているスタイルシートは
これぞレスポンシブ確認ツールの決定版！OSを選ばずにウェブサイトをすぐに確認できる -Viewport resizer
ウェブページの表示サイズをデスクトップやスマフォ・タブレット用に変えてレスポンシブの確認をするツールはたくさんありますが、これはかなりおススメのツールです。 Viewport resizer Viewport resizerの特徴 Viewport resizerの使い方 Viewport resizerの高度な使い方 Viewport resizerの特徴 Viewport resizerはブラウザベースで動作するブックマークレットで、WindowsでもMac OSでも即時にツールを起動して、表示しているウェブサイトをあらゆるサイズに変更して確認できます。 フルカスタマイズが可能。 その場でサイズ変更してのカスタマイズも可能。 1クリックでスマフォやタブレットの縦・横向きを変更できます。 Media Queriesをサポート。 Metaのviewportタグを適合させます。 ページのリロ
レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">
画面サイズ別にCSSをメディアクエリで切り替える方法 [ホームページ作成] All About
画面サイズ別にCSSをメディアクエリで切り替える方法画面サイズ別にCSSをメディアクエリで切り替える方法を解説。メディアクエリとは、画面サイズなどの閲覧環境に応じて適用スタイルを切り替えるCSSの機能です。レスポンシブWebデザインを作る際にも使い、HTMLのmedia属性値やCSSの@media規則で条件を指定します。スマホ専用スタイルや、PC等の広い画面幅向けスタイルなどを作成しておき、簡単に切り替えられます。 メディアクエリ（Media Queries）とは、画面サイズや画面解像度などの閲覧環境に応じて適用スタイルを切り替えられるCSSの機能で、CSS3から追加されました。従来からCSSの仕様にあった、デバイスの種類に応じて適用スタイルを切り替えられるメディアタイプ（Media Type）を拡張して作られた仕様です。 メディアクエリを使うことで、Webページの閲覧者が利用しているデバ
![画面サイズ別にCSSをメディアクエリで切り替える方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/445f6566bc34f4193fa83c63d61412ad6fbd33ef/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F9%2F6%2F4%2F0%2F4%2F201706261218%2Ftopimg_original.png)
li要素で作ったナビゲーションリンクを、Media Queriesで設定したブレークポイントでselect要素にする軽量ライブラリ・TinyNav.js - かちびと.net
シンプルで使いやすそうだったので 備忘録。Media Queriesと併用して、 ナビゲーションリンクをselect要素 に変換するjQueryのプラグインです。 圧縮版だと300バイトほどと、超軽量で、 様々なブラウザにも対応できるので 覚えておこうと思います。 ウィンドウサイズが設定したブレークポイントに達するとli要素で作ったナビゲーションがselect要素に変わってくれるので、スマフォのような幅の狭いデバイスでもスペースを取らずにナビゲーションを配置できます。 通常のナビゲーションが、スマフォでは自動でselect要素タイプのナビゲーションになってくれる、というライブラリ。 場所も取りませんし、ユーザーも使いやすいし、余計なCSSを書く必要も無くなります。圧縮版だと300KBほどと超軽量みたいです。 以下のブラウザに対応できるみたい。 IE 6,7,8,9 Firefox 6,8
Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き
今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました！ 遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries（メディアクエリ）を使って、iPad、iPhone など、いろんなデバイスに対応（対応というか、一応見れる程度）にしてみました。 なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。 CSS3 Media Queries 目次
[翻訳] モバイル向けの CSS Media Queries は見掛け倒しである | Unformed Building
この記事は、2010年8月3日に Jason Grigsby によって書かれた CSS Media Query for Mobile is Fool’s Gold を翻訳したものです。 画像・表・リンクなどは掲載していませんし、翻訳が怪しい場所がところどころにありますので、ちゃんと読みたい方は原文を参照してください。 翻訳部分は次のセクションとなります。 CSS Media Query for Mobile is Fool’s Gold Ethan Marcotte の記事「Responsive Web Design」はウェブ開発者たちの想像力を刺激し、いくつかの後続の記事はモバイルに最適化されたウェブサイトを構築する方法として、CSS Media Queries をもてはやしました。 私もまた「iPad Orientation CSS」という記事でこの流行に貢献した罪があります。 残念な
Media Queries (W3C Recommendation 19 June 2012)
Media Queries Level 3 W3C Recommendation, 21 May 2024 More details about this document This Version: https://www.w3.org/TR/2024/REC-mediaqueries-3-20240521/ Latest Version: https://www.w3.org/TR/mediaqueries-3/ Latest Editor Version: https://drafts.csswg.org/mediaqueries-3/ Previous Version: https://www.w3.org/TR/2022/REC-mediaqueries-3-20220405/ History: https://www.w3.org/standards/history/media
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゼロから始めるレスポンシブWebデザイン入門
matchMedia
css3-mediaqueries-js - Project Hosting on Google Code
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！ | バンクーバーのうぇぶ屋
iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more – Breaking the Mobile Web
JavaScript でメディアクエリを行う window.matchMedia の使い方
https://design-spice.com/2012/06/13/responsive-web-design-image/
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ