要素の幅でレスポンシブ対応を行える！ コンテナークエリーの使い方 - ICS MEDIA

2024/06/21 15 users ビューポート Container Media CSS 手法

コンテナークエリー（@container）は、CSSの新しいアットルールです。従来のメディアクエリー（@media）とは異なる手法で、レスポンシブウェブデザインができます。メディアクエリーはビューポート（ブラウザ幅）を条件にスタイルを適用できるのに対して、コンテナークエリーは要素の幅を条件にスタイルを適用できます。... 続きを読む

CSSでhoverアニメーションの実行をPCのみに制御する｜BLACKFLAG

2021/11/10 5 users iPhone BlackFlag CSS デバイス 支障

iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をPCのみに実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御... 続きを読む

ウェブサイトに演出は不要!? ユーザー設定にレスポンシブ対応できる新しいCSS - ICS MEDIA

2021/06/04 18 users デバイス レスポンシブ レイアウト レスポンシブ・ウェブ 演出

画面サイズだけではなく、デバイスのユーザー設定に対してレスポンシブにできる新しいCSSのメディアクエリーが登場しています。スマートフォンやパソコンで、画面サイズに応じてレイアウトが変化する「レスポンシブ・ウェブ・デザイン」はほとんどのウェブサイトで実装されているでしょう。新しい世代のレスポンシブ手法... 続きを読む

XHTMLをHTML5に一括置換する方法 | web覚書

2018/08/22 46 users XHTML 一括置換 web覚書 HTML 順位

Googleさんが4月21日までにモバイルフレンドリーなサイトにしないと、スマホ検索結果の順位を落とす（もしくはフレンドリーサイトを上げる）事を正式に発表した。 ということで、 レスポンシブウェブデザイン化を行なう際に必要なメディアクエリー等を使用するため、所有サイトをXHTML（XHTML1.0 Transitional）からHTML... 続きを読む

レスポンシブが変わる!? EQCSSによるエレメントクエリーの使い方 - WPJ

2017/02/15 44 users WPJ レスポンシブWebデザイン 常識 サンプルコード 条件

レスポンシブWebデザインで使うメディアクエリーを進歩させて、要素ごとに条件を設定できる「エレメントクエリー」を作ろうという動きがあります。どこがどう便利なのか？ 専用ライブラリー「EQCSS」で体験できます。サンプルコードで使い方を紹介します。レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？ 2017/02/15 Baljeet Rathi Articles in this... 続きを読む

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅 キリン 住友商事 概念 viewport

今話題の「レスポンシブWebデザイン」。 有名なところでは、 「TOYOTA新卒採用ページ」、「キリン」、「住友商事」 などがあります。 ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。 今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。 レスポンシブWe... 続きを読む

ASCII.jp：日本と世界の「レスポンシブWebデザイン」

2013/08/07 72 users レスポンシブWebデザイン ASCII.jp 世界 デバイス

マルチデバイス対応のWeb制作手法として注目を集める「レスポンシブWebデザイン」。ところが日本では「メディアクエリーを使ってスクリーンサイズごとにレイアウトを切り替えること」との誤解が広がっているようです。 レスポンシブWebデザインとよく似た手法である「アダプティブデザイン」との違いをみながら、レスポンシブWebデザインの本当の意味を考えてみましょう。 「デバイスに依存しない」レスポンシブWe... 続きを読む

さらばmozとoのdevice-pixel-ratio - fragmentary

2012/11/19 45 users moz Resolution fragmentary コード

2012-11-20 さらばmozとoのdevice-pixel-ratio CSS WebKit Mozilla Opera そういえば、Firefox 16とOpera 12.10からメディアクエリーのresolutionとdppxが使えるのを思い出した。 これらを使うと、Retina displayはじめ高密度なディスプレイに対応するコードがけっこう短くなる。 これまではこんな感じ。 @me... 続きを読む

レスポンシブ・ウェブデザインでの CSS コードの書き方

2012/10/01 717 users レスポンシブ・ウェブデザイン CSS 配置 書き方 コード

いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用したWebサイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSSのコードの配置 広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media規則で1ファイル内にメディア特性単位に書く方法 @media規則... 続きを読む

メディアクエリーと相性がよさそうな CSS 小技いくつか | ヨモツネット

2012/05/02 96 users ヨモツネット CSS 相性 上下 動作

table 系の表示にあまり注目されることがないように感じますので、これまで仕事でメディアクエリーを利用してくる中で考えた小技をこの記事に共有します。ここに載せているのは一応実際につかって検証済みですが、もし変な動作があったら教えてください。 上下を入れ替える display プロパティーの table-row-group や table-header-group などの値を応用すれば、上下の入れ... 続きを読む