Hatena Blog Tags
はてなブログ トップ
メディアクエリ
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

メディアクエリ

(コンピュータ)
【めでぃあくえり】

メディアクエリとは、閲覧者の出力メディア（画面サイズやOS）に合わせて、スタイルシート（css）内に適用する条件を細かく指定する仕組みのこと。Media Queries.

閲覧者のスクリーンサイズや環境に応じて、表示させる条件を変更することができる。Media Queries.レスポンシブWebデザインを実現する手法の1つ。例えば、横幅が1200pxのモニターで見ているユーザーに対しては「width（ウィンドウの横幅）：800px」、iPhoneで見ている人には「width：320px」に適用するといったことが可能である。Internet Explorer 8以下ではcss3のメディアクエリに対応していないという欠点もある。

対応表一覧（一部）

iPhone3G / 3GS 320×480
iPhone4 / IS03 640×960
iPad / iPad 2 768×1024
Galaxy S / HTC Desire (X06HT) 480×800
Galaxy Tab 600×1024
Xperia (SO-01B) / Xperia arc (SO-01C) 480×854
HT-03A 320×480
Xperia (SO-01B) / Xperia arc (SO-01C) 480×854
Nexus One 480×800
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
意匠部•2年前

チャレンジ石垣島制作秘話「ライトモード／ダークモードでファビコンを切り替える」編

こんにちは！ 意匠部のおばらです。 今回はファビコンに関する記事です。 「チャレンジ石垣島」ウェブサイトではファビコンを OS やブラウザの外観モード（ライトモード／ダークモード）に応じて（一部の環境を除き）切り替えています。 今回はそのロジックをご紹介します。 （ロゴの制作秘話に関しては前回の記事を御覧ください） 目次 目次 ファビコンを設定する ライトモード向けのファビコンがダークモードで見づらい メディアクエリでファビコンの見た目を切り替える 方法 ①「SVG 内に記述した CSS で切り替える」 SVG を作成する SVG をテキストエディタで開く <style> タグで CSS を追…

#チャレンジ石垣島#ファビコン#メディアクエリ#SVG#面白法人カヤック

ネットで話題

もっと見る
454ブックマーク[CSS]レスポンシブデザインでよく使うメディアクエリの書き方、ブレイクポイントの最適な値のまとめcoliss.com
451ブックマークCSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめcoliss.com
400ブックマーク[CSS]CSS3のMedia Queries（メディアクエリ）の使い方と実装例CSS3 Media Queries 下記は各ポイントを意訳したものです。 はじめに CSS2のMedia typesではscreen, printなどのように特定のメディア用のスタイルシートを設定することができました。CSS3ではクエリを加えることで、さらに効率的にスタイルシートを使用できます。 Media Queriesはユーザーの状態を調べ、それにあった特...coliss.com
279ブックマークレスポンシブ・ウェブデザイン - メディアクエリのパワーを使いこなすwebmaster-ja.googleblog.com
235ブックマークCSSのメディアクエリには頼らず、コンテンツベースで実装するレイアウトの最近の方法 -Relearn CSS layoutcoliss.com
172ブックマークCSSのメディアクエリの範囲指定で、比較演算子を使用できるようになりますcoliss.com
133ブックマークFlexboxの最新テクニック！ メディアクエリはなし、同じCSSで4つの異なるレイアウトに対応したフォームを実装coliss.com
117ブックマーク★レスポンシブの基本、メディアクエリの書き方 | | それからデザイン スタッフブログ以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、 最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わりし、PC以外の端末でWebをみるという人も増加傾向にあります。 そんな中、「レスポンシブWEBデザイン」という手法が注目を集めています。 今回はそのレス...sole-color-blog.com
112ブックマークCSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリcoliss.com

関連ブログ

彦坂明宏のHatena Blog•3年前

Bootstrapの便利さ

はてなブログを始めとしていろいろなブログやCMSのサービスは、それ自身でデザイン系の機能を持っていますから、 さらにBootstrapを入れ込むって特に意味は無いかなと思いながらも興味本位で入れていました。 で、ふと思ったのですが、例えば上のような絵の配置です。自前でサイト構築する場合はメディアクエリで ウインドウサイズに合わせた画像幅設定できるのですが、メディアクエリで設定するのは面倒なサービスもあります。 このような時、Bootstrapのグリッドシステムを使えばスマホサイズのときの画像幅はこれ、タブレットサイズのときは、、、みたい に柔軟に設定できます！ 上のいいねアイコンは、ウインドウ…

#グリッドシステム#メディアクエリ
TR Output•4年前

ブレークポイントの決め方

今回は個人的なブレークポイントの決め方を共有してみようと思います。 1. iPhoneの最大サイズを調べる 2. iPadの最小サイズを調べる 3. SPデザインを切り替えるブレークポイントを決定する 4. タブレットのデザインを用意するか否か 4-1. タブレットのデザインを用意する場合 結論 感覚的な決め方 さいごに 1. iPhoneの最大サイズを調べる まずはiPhoneの最大サイズを調べます。 日本ではiPhoneのシェアが大きいのでiPhoneを基準として、iPhoneで一番大きいサイズまではSPデザインとします。 現時点では iPhone 12 Pro Maxの 428px が一…

#ブレークポイント#CSS#メディアクエリ#レスポンシブ
webサイト制作の勉強｜2024年5月クラス用ブログ•1日前

自身のスキルを説明する

自身のスキルを他者に説明する事は、そのスキルを身に付けるのと同じくらい重要であり、意味のある事です。 「htmlとcssが出来ます」だけでは無く、この6ヶ月で具体的にどういう事を学んだか、どういう事が出来るようになったか、をしっかりと説明しましょう。 note.com html htmlの授業ではHTML Living Standardの仕様に基づき様々な要素の使い方を学びました。HTMLはマークアップ言語であり文書構造を示す物です。header要素やnav要素、section要素といった要素を使用する事で、明示的に文書構造を示すことが出来るようになりました。h1~h6を使用し、適切な見出しの…

浪人のサムライ•10日前

4カラムレイアウトのホームページを制作してみた。

rounin-samurai.com 浪人のサムライです。 1時間くらいかけて4カラムレイアウトのホームページ制作をしました。 スマホでは1カラムですが、タブレット以上の画面サイズになると、4カラムになります。 分かりにくいと思うので、ブラウザの画面サイズを小さくしたり大きくしたりしてください。 HTMLは共通で、CSSのメディアクエリで対応しています。 昔は、「スマホはスマホ、PCはPCのHTMLを書かなくてはいけない」と思っていました。 しかし、今はHTMLが共通。 CSSもできるだけ共有できるようにしています。 現時点では、レイアウトは変えますが、コンテンツ部分は同じです。 それにしても…

snowZ7629’s blog•11日前

最近使用されないCSSのfloatについて

floatは、かつてはレイアウト設計においてよく利用されていましたが、最近では使用されなくなっています。なぜ使用されなくなったのかを調べたので、例とともに見ていきます。 1. 親要素の高さを制御できない問題 float要素は親要素の高さを自動的に調整しません。これにより、意図しないレイアウトになることがあります。 CSS .parent { width: 300px; border: 1px solid black; } .child1 { float: left; width: 100px; height: 100px; background-color: red; } .child2 { …

webサイト制作の勉強｜2024年5月クラス用ブログ•15日前

srcsetを使ってimg要素の画像を切り替える

img要素の表示方法は3通り １.「max-width:100%」を使ったフルードイメージ 設定は一番簡単、幅と同じ比率で高さも低くなる２.「object-fit」幅も高さも自由に指定、img要素の親要素に表示させたい幅と高さを指定、img要素には「object-fit:cover」と幅と高さの指定が必須、object-positonを使う事で画像の表示位置を変更可。「aspect-ratio」と合わせて使う事で利便性が向上。3.「srcset」を使うと、画面幅によって表示させるimg要素を切り替える事が出来る。img要素を画面幅によって切り替えたい場合、以前はJavascript等でwind…

LIFULL Creators Blog •19日前

UIアイコンの管理と実装をラクチンにする社内ツールとCDN

フロントエンドエンジニアの嶌田です。 アイコンは、UIデザインにおいて欠かせないパーツです。弊社が提供する不動産情報サイトであるLIFULL HOME'Sでも、多数のアイコンが使われています。 ウェブページにアイコンを埋め込む手段は無数にあります。あなたはいくつ言えますか？ それぞれのメリットとデメリットについて説明できるでしょうか？ この記事では、LIFULL HOME'Sのフロントエンドで選ばれているアイコン表示方法およびその理由を説明します。その後、アイコンの管理や実装にまつわる不便な点をサービス横断的に解消するために作られた社内ツールと配信システムである、LIFULL Icon CDN…

コハム•21日前

Safari 18.0がやってきた！注目の新機能を一挙に紹介！

9月16日にSafari 18.0がリリースされました。 リリースノートより注目の新機能を中心にご紹介します。 Safari 18.0は、iOS 18、iPadOS 18、visionOS 2、macOS 15、macOS Sonoma、およびmacOS Venturaで利用可能です。 アクセシビリティ 新機能 解決された問題 アニメーション 解決された問題 キャンバス 新機能 解決された問題 廃止 CSS 新機能 解決された問題 廃止 フォーム 新機能 解決された問題 HTML 解決された問題 画像 廃止 JavaScript 新機能 解決された問題 廃止 読み込み 解決された問題 メディア…

ブログアクセス向上ラボ•25日前

モバイルユーザーを逃さない！モバイルフレンドリーなブログデザインの作り方

近年、モバイルデバイスからのアクセスが急増しており、モバイルユーザーを意識したブログデザインが不可欠となっています。モバイルフレンドリーなデザインは、ユーザーエクスペリエンスの向上だけでなく、SEOにも直結するため、アクセスアップに大きな影響を与えます。本記事では、モバイルフレンドリーなデザインの基本から、実際にどのようにブログに取り入れるかまで、具体的な方法を解説します。モバイルユーザーを逃さず、ブログのアクセスを飛躍的に向上させるためのヒントをお届けします。 1. モバイルフレンドリーなデザインとは？ 1-1. モバイルフレンドリーの定義と重要性 モバイルフレンドリーなデザインとは、スマー…

エンジニア未経験でも難しくない！ 転職を成功させる必須マニュアル•25日前

これだけは必須！フロントエンドエンジニアの最低限のスキルセット

フロントエンドエンジニアとしてのキャリアを目指す上で、まず知っておきたいのが「フロントエンドエンジニアに必要なスキルセット」です。WebサイトやWebアプリの開発においてさまざまなスキルが求められますが、今回はフロントエンドエンジニアとして最低限身につけるべきスキルセットを詳しく解説していきます。 目次 最低限必要なプログラミング言語3選 HTML CSS JavaScirpt 最低限必要なツール3選 Git デベロッパーツール デザインツール まとめ 最低限必要なプログラミング言語3選 HTML HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup L…

マーケティングのススメ•1ヶ月前

押さえておきたいWebデザインの基礎知識・チェックポイント・おすすめ情報

こちらの記事で押さえておきたいWebデザインの基礎知識・チェックポイント・おすすめ情報などをご紹介します。ぜひ、ご活用ください。 執筆者の紹介 Webデザインの基礎知識 Webサイトの事業上の役割やその優先順位を明確にする Webサイトのコンセプトメイク Webサイトの集客（ターゲティング） Webサイトに必要なデザイン機能 Webサイトのマーケティング戦略（ロードマップ） WebサイトのPDCA Webデザインのチェックポイント Webサイトにおける視線の流れの法則性を利用する 余白を意識的に活用する レイアウト・カラーリング・フォントなどのデザインルールを決める 「近接」「整列」「反復」「…

自動生成アイキャッチのテンプレート集•1ヶ月前

ブログ記事アイキャッチテンプレート：カスタマイズ可能なスタイルでインパクトを残す

このテーマの特徴 ソースコード このテーマの特徴 このHTMLテンプレートは、ブログ記事のアイキャッチをデザインするためのテンプレートです。以下に、テンプレートの特徴を詳しく説明します。 1. カスタマイズ可能な要素 カラー: --bg-main, --bg-secondary, --text-main, --text-back, --accent-color の変数で背景色、テキスト色、アクセントカラーを簡単に変更できます。 フォント: 'Noto Sans CJK JP' を使用していますが、他のフォントに変更することも可能です。 カテゴリ: category-{FirstCategory…

自動生成アイキャッチのテンプレート集•1ヶ月前

ブログアイキャッチデザインテンプレート：カスタマイズ可能なカラー・形状・情報表示

このテーマの特徴 ソースコード このテーマの特徴 このHTMLテンプレートは、ブログ記事のアイキャッチ部分をデザインするためのものです。以下に特徴を詳しく説明します。 1. カスタマイズ可能なカラーとデザイン CSS変数: --bg-main, --bg-secondary, --text-main, --text-back, --accent-color-1, --accent-color-2, --accent-color-3 といったCSS変数を用いることで、ブログのテーマカラーやデザインを簡単に変更できます。 グラデーション背景: アイキャッチの背景には、linear-gradient…

自動生成アイキャッチのテンプレート集•1ヶ月前

スタイリッシュなアイキャッチテンプレートでブログ記事に彩りを添える

このテーマの特徴 ソースコード このテーマの特徴 このHTMLテンプレートは、ブログ記事のアイキャッチをスタイリッシュにデザインするためのものです。以下に、テンプレートの特徴をわかりやすく説明します。 1. カスタマイズしやすい構造 変数: CSSで --primary-color, --secondary-color, --accent-color といった変数を定義することで、ブログのテーマカラーを簡単に変更できます。 カテゴリ別カスタマイズ: body.category-日記 のように、カテゴリ別に背景色などのスタイルを変更できます。 動的コンテンツ: {BlogTitle}, {Fir…

体験とデザイン、スタートアップについて•1ヶ月前

【翻訳】ネイティブアプリのような使い心地を実現するJavascript API 4選（Juan Diego Rodríguez, Smashing Magazine）

www.smashingmagazine.com 概要：Screen Orientation APIをご存知ですか？Device Orientation API、Vibration API、Contact Picker APIについてはどうでしょう？Juan Diego Rodriguezは、あまり知られていないウェブ機能に興味を持ち、これらの機能が広くサポートされるようになった場合に、より使いやすく堅牢なプログレッシブウェブアプリを作成するためにどのように活用できるかを考察しています。 2年ほど前、JavaScriptの現状に関する調査で、認知度が最も低かった4つのJavaScript AP…