タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数
これを待ち望んでいた人も多いと思います。 ついに、メディアクエリで比較演算子（>=, <=）を使用できるようになります！ 幅が400px以上の場合、@media (min-width: 400px){}と定義していましたが、@media (width >= 400px){}と記述できます。 比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。 New syntax for range media queries in Chrome 104 by Rachel Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。 Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリの範囲指定で、比較演算子を使用できる Chrome 104 メディアクエリの範囲指定の新しい構文 メディアクエリはレ
メディアクエリはなし、同じHTMLとCSSで、親コンテナの幅に応じて4つの異なるレイアウトに対応したフォームを実装するFlexboxの最新テクニックを紹介します。 もちろんコンテナクエリもなしです。 同じコードでフォームをどこにでも配置でき、コンテンツでもサイドバーでもフォームは最適にレイアウトされます。Flexboxの最新のテクニックを使用すると、CSSで明示的に定義しなくても、レイアウトの柔軟性を得られます。 まずは、実際の動作をデモページでご覧ください。 サイズを変更して見るには、右上「Edit on CodePen」をクリックして別タブでご覧ください。 See the Pen Flexbox Responsive Form by Adam Argyle (@argyleink) on CodePen. ラベルが付いているデモページはこちら。 See the Pen Flexbox
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
2023年5月4日にリリースされたChrome 113で、CSSの@mediaで新しいメディアクエリが使用できるようになったので、紹介します。 新しいクエリはupdateで、WebサイトやアプリのUIをデバイスのリフレッシュレートに最適化させることができます。 CSS update Media Query 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスの元、翻訳しています。 はじめに 「update」クエリの基礎知識 新しいメディアクエリ「update」を使用したデモ リソース はじめに CSSのメディアクエリは、Webサイトやアプリを表示されているデバイスに基づいて外観をコントロールできる強力なツールです。メディアクエリを使用すると、さまざまなスクリーンサイズや向きなどに対してレイアウトを最適化できます。 updateクエリは、デバイスのリフレッシュレートに適応することが
メディアクエリにはhoverプロパティがあり、ユーザーがホバーに対応しているデバイスかどうかの判定が行えます。 これを使用することによって、画面幅での分岐が必要なくなるためタブレットのlandscape含めた対応も容易になります。 また、メディアクエリはJavaScriptからもmatchMediaという関数を使う事で使用することが可能なのでCSSとJavaScriptでの利用例を載せていきたいと思います。 CSS CSSでの利用は簡単ですね .link { background: rgba(0, 0, 0, 1); } @media (hover: hover) { .link:hover { background: rgba(0, 0, 0, 0.7); } }
border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
メディアクエリと言えば、CSSの@mediaでスクリーンサイズに合わせて最適なスタイルを適用するものを思い浮かべる人が多いと思います。JavaScriptで実装したコンポーネント、例えば、スライダーなどをレスポンシブ対応にする際にはJavaScriptでメディアクエリを扱った方が便利です。 JavaScriptでのメディアクエリ、matchMedia()の使い方を紹介します。 Working with JavaScript Media Queries by Marko Ilic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに matchMedia()の使い方 条件の変化を継続的にチェックする方法 昔ながらの方法 まとめ はじめに メディアクエリと言われて最初に思い浮かぶのは何ですか？ おそらく、下記のようなCSSでしょ
CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較演算子が使えるようになったり、実はcalc()も使えたりと、まだまだ活躍の場がありますね。
こんにちは。エンジニアのつっちーです。 以前に、「メディアクエリの書き方に注意しないと、ウインドウ幅と表示倍率によっては、スタイルの適用されない状態が発生してしまう」という内容の記事を書きました。 今回はその続編です。前回の記事では、対策として以下の2点を挙げ、基本的には1の方法を利用すべきであるとまとめました。 メディアクエリの設定をmin-widthかmax-widthに統一する（推奨） メディアクエリの設定に小数を利用する（非推奨） でも、たまにこの方法では不便なケースにも遭遇します。そんなときに便利なnotというキーワードがあったことを、最近になって知りましたので、もう一つの解決策として取り上げてみます。 こんなとき、min-widthかmax-widthに統一するのは大変…… 上に書いたとおり、メディアクエリはmin-widthかmax-widthに統一したいものです。ブレイクポ
近年、CSS や JavaScript の進化により、パララックスやスクロールとともにアニメーションしながら登場するエフェクトなど、演出のためのアニメーションがかなり増えました。 Web サイトに独自性を出すことができて重宝される一方で、過度なアニメーションによる画面酔いを訴える人も出てきています。 そこで、CSS Media Queries Level 5 では、prefers-reduced-motion 特性が提案されています。 過度なアニメーションとはアニメーションには本来、ロード画面やスケルトンスクリーンなど、ユーザーに現在の進行状況を伝えるという大事な役目があります。 ここでいう過度なアニメーションとは、背景のアニメーションや画面全体に広がる背景動画、パララックスエフェクト、画面遷移などの本質的でないアニメーションのことです。 パララックスエフェクトのように、背面と前面でスクロ
レスポンシブデザインには欠かせないメディアクエリですが、よく使う画面サイズの判定のほかにも、たくさんの機能があります。デバイスの機能やユーザーの設定によって、最適な表示を実装できたりします。意外と深いメディアクエリの書き方について紹介します。 <meta name="viewport" content="width=device-width, initial-scale=1">前提として、<head> 要素内にレスポンシブ用の <meta> タグを指定する必要があります。 基本の構文メディアクエリの基本的な構文は、メディアタイプとメディア特性からなります。 @media <メディアタイプ> and (<メディア特性>) { ... }メディアタイプはデバイスの種類、メディア特性は画面サイズやデバイスの機能、環境などの特性を指定します。 @media screen and (max-widt
みなさんはCSSのメディアクエリについて本当の意味で理解して使用しているでしょうか。ブラウザがデフォルトの状態なら正常に動くと思います。しかし、ブラウザで拡大率を変更したりするなどブラウザの設定によってはメディアクエリの解釈が大きく変わってきます。また、メディアクエリに使える単位のpxやem、remによっても変わってくるため、適切な単位を用いる必要があります。 検証に用いるCSS 以下の6パターンを使って検証します。すべてのバージョンを検証するのは大変なので、過去3年間のバージョンまで遡りました。 /* 600px以上 */ @media (min-width: 600px) { ... } @media (min-width: 37.5em) { ... } @media (min-width: 37.5rem) { ... } /* 600px未満 */ @media not all
どうも！LSSです！！ ついこないだまで「レスポンシブ？何それおいしいの？」だったLSSが、メディアクエリについて語ります！ｗ レスポンシブデザインとは 画面のサイズごとに、使うCSSを切り替えるメディアクエリ メディアクエリ使用例 コード解説 共通の指定 min-width:600pxという条件のメディアクエリ max-width:599pxという条件のメディアクエリ 今回は「メディアクエリ」についてのみ解説しました レスポンシブデザインとは 以前は、「ネットサーフィンはPCでするもの」で、PCの画面で読みやすいサイトを作っておけばそれで良かった、って時代がありました。 が、近年になって、スマホやタブレットのシェアが伸びて、今や 「PCは持っていないけどスマホをガンガン使いこなしている」 人も増えてきました。 それにより、 「ＰＣで見る事しか考えられていないサイトよりも、スマホでも見やす
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
Webサイト制作では、どのデバイスでもレイアウトを崩さずに表示させるように、レスポンシブデザインを考慮する必要があります。 レスポンシブデザインを考える際に、どの画面でも見やすい「最適なブレイクポイントは何pxなのか？」に頭を抱える方も多いでしょう。 本記事では、最適なレスポンシブデザインのブレイクポイントやメディアクエリの書き方を解説します。デバイス別のレスポンシブデザインのブレイクポイントの設定方法を理解しましょう。 レスポンシブデザインの最適ブレイクポイントは600px・834px結論から言うと、最適なブレイクポイントは600px・834pxです。 以前までは、iPad10.2のSplit View （535px）に合わせて、520px・920pxが推奨されていましたが、サイズ幅768～834pxの機種がシェア約56％を占めているため、ブレイクポイントは768~834pxに設定すれば
要約 window.matchMediaはメディアクエリ文字列を渡して、その条件が切り替わった時にだけ処理を実行してくれます いわゆるdebounce()などでresizeイベントの間引きをする必要がありません（画面の横幅を使う処理はresizeイベントが引き続き適切です） IE10からサポートされているので、ブラウザの対応範囲を気にする必要はありません（matchMedia | Can I use... Support tables for HTML5, CSS3, etc） コールバックを実行する関数にして、1箇所でメディアクエリ文字列を管理できます ソースコード real-world-website-boilerplate/mediaQuery.jsとpwa-helpers/media-query.tsを元にしています class構文の静的メソッドに変更していますが、const me
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。 今回の完成形 今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。 .test-1 { margin-top: 16px; font-size: 16px; } @media screen and (min-width: 600px) { .test-1 { margin-top: 24px; font-size: 18px; } } @media screen and (min-width: 960px) { .test-1 { margin-top: 32px; font-size: 20px; } } .test-2
画面幅、メディアクエリに依存した要素の表示切り替え React + CSS Modules を使っている前提イメージ JSX 上で表示・非表示の分岐が明示されてほしい CSS を掘らないと分からないのは見通しが悪く感じる matchMedia() ベースの Hooks にすると SSR で難儀する 一貫性のためにサーバーサイドコードで頑張るのも億劫である 表示・非表示だけなら純粋な CSS で実現したい display: contents を使ってみた メディアクエリで display: none と block を切り替えれば良いという単純な話ではなく、親要素が Flexbox や Grid だった場合を想定する必要があるので、表示されている状態ではボックスモデル的に虚無になってほしい。 contents これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボック
目次 noknowがおすすめするメディアクエリの設定 デバイス一覧 noknowがおすすめするメディアクエリの設定 CSSでレスポンシブデザインをするためには、様々なデバイスサイズに対応する必要があります。 今回はモバイルファースト、PCファーストそれぞれのメディアクエリのベストプラクティスを考えてみました。 モバイルファーストにおけるメディアクエリ設定情報 css { /* スマートフォン (縦) */ } @media screen and (min-width: 500px) { /* スマートフォン (横) */ } @media screen and (min-width: 768px) { /* タブレット */ } @media screen and (min-width: 1024px) { /* PC. */ } @media screen and (min-width:
レスポンシブコーディングにおいてCSSのメディアクエリによる分岐は必須ですが、JavaScriptの分岐にもメディアクエリと同じようなものがあるのをご存知でしょうか？ 一般的にJavaScriptでブラウザサイズによる条件分岐は$(window).width()やresizeを利用したものが多いですが、サイズ変更のたびに処理を実行するのでパフォーマンスに影響がありました。そこでブレイクポイントのみを監視して切り替わったタイミングで１度だけイベントを発生させるwindow.matchMediaについてご紹介します。 まず$(window).width()やresizeを使った分岐とwindow.matchMediaを使った分岐を比較してみます。 $(window).width()とresizeを使った分岐 $(window).on('load resize', function(){ let
2023年08月23日20:16 カテゴリ日記 今更に外部CSS読ませずのメディアクエリの指定方法を知る mixiチェック Style要素のmedia属性に書けば良かったのですねー Style属性 にも TEXT/CSS にも書けなかったので、前の記事で margin-leftの幅調整に難儀しました。 PC版ページのみ最適化したつもりです（笑） 【追記】 なぜかビューポートの向きを調べる記述はTEXT/CSSでも 正常に動作する事を確認しています。 調整したいDIV要素に適当なCLASS付けて、幅1024px以下で区切りたかったので <style media="screen and (max-width: 1024px)"> .CLASS名 { margin-left: 指定幅em !important; } </style> という感じ。 訂正！ ID名の場合は直前に # 、CLASS
自分は自分のサイトのデザインを1ヶ月に1回はコロコロと変える派なのですが、その都度思っている事がありました。それは「レスポンシブデザインはデバイス幅を基準にCSSを切り替えるのが正しいのか」という事です。 よくあるCSSですと、 div { font-size: 1rem } @media (min-width: 640px) { /* 画面幅がある程度広いデバイスで見たら文字サイズが1.5rem */ div { font-size: 1.5rem } } このような感じでデバイスの横幅を基準に、スマホで見た場合と、PCで見た場合の画面のデザインを切り替えています。しかし、自分のサイトを iPad 等で見た時にPC版のデザインが表示される事に違和感を抱いていました。マウス操作とタッチパネル操作の差など、PCとは全然勝手が違うのにデバイス幅だけでPCのデザインを出して欲しくなかったのです。
@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。 例えば Surface Duo の2画面デバイス表示では以下の値になります。 水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数 各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>
ブラウザが特定のCSSに対応しているかどうかをJavaScriptで判定する方法です。最近ではCSSの@supportsクエリが実装されているのであまり使うことはないかもしれませんが、CSSの対応状況を調べたいときなどに使えます。 疑似要素と疑似クラスの判定document.querySelector()関数に疑似要素や疑似クラスを指定すると、ブラウザが対応していない場合にエラーとなります。そこで、try-catch文を使い、エラーの際は非対応と判定しています。document.querySelector()関数に対応していない場合はnullを返します。 const support = pseudo => { try { if (!document.querySelector) return null document.querySelector(pseudo) } catch { ret
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
