[フレーム]
はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

気に入った記事をブックマーク

  • 気に入った記事を保存できます
    保存した記事の一覧は、はてなブックマークで確認・編集ができます
  • 記事を読んだ感想やメモを書き残せます
  • 非公開でブックマークすることもできます
適切な情報に変更

エントリーの編集

loading...

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

タイトルガイドライン

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます
コメントを非表示にできます コメント表示の設定

ブックマークしました

ここにツイート内容が記載されます https://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

454users がブックマーク コメント 19

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

454 users coliss.com

ガイドラインをご確認の上、良識あるコメントにご協力ください

0 / 0
入力したタグを追加

現在プライベートモードです 設定を変更する

おすすめタグタグについて

よく使うタグ

はてなブックマーク

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページ

記事へのコメント19

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー CSS メディアクエリなしで実装するテクニックのまとめ。

その他
kijtra
ここには書いてないけど object-fit とかも個人的には救世主。

その他
yarumato
"CSSの実装はデバイスベース(横幅768px以下の機種ならスマホ、以上ならPCのレイアウトにする)からコンテンツベース(小さな箱を横幅が広ければ横に、狭ければ縦に並べる流動的デザイン)に移行しているのが現状"

その他
mayumayu_nimolove
楽になればなんでもいい

その他
sippo_des
覚えたことがなくなっていくのは、いいことのよーで、さみしーよーな、でもいいことだよきっと、、

その他
Lhankor_Mhy
CSS Container Queries の実装が楽しみ

その他
オーナーコメントを固定しています
coliss
オーナー coliss CSS メディアクエリなしで実装するテクニックのまとめ。

2021年11月18日 リンク

その他
aiueokkenty
PCとSPで読み込ませるCSSファイル一緒になるのが一番ありがたい

その他
nismit
IEが無くなったら割とCSS周りはガラッと変わりそう。CSS Gridは大体使えるしclamp,min,maxで色々と出来ていくかもしれない

その他
ryan_aircloset
サーバー側でHTMLから出し分け→メディアクエリでCSS出し分け→共通ソースとついにここまできたか。

その他
t_motooka
便利かつ知らないものが増えてた。これは使いたい。

その他
cpw
CSSも知識アップデートしないとそろそろダメそうだな

その他
tmayuko312
IEのこと書いてないってことはどれか対応してないのありそうだな...

その他
kijtra
kijtra ここには書いてないけど object-fit とかも個人的には救世主。

2021年11月18日 リンク

その他
inazuma2073
そのうちレイアウトを可変させる必要なくね?になるんだろうな

その他
tohokuaiki
あぁ、calcが出た時「こんなんなんでもいけるやん」とは思った。でも、変数使ったらそれこそスパゲッティsass の出来上がりで軽く死ねるな、とも。

その他
Lhankor_Mhy
Lhankor_Mhy CSS Container Queries の実装が楽しみ

2021年11月18日 リンク

その他
yarumato
yarumato "CSSの実装はデバイスベース(横幅768px以下の機種ならスマホ、以上ならPCのレイアウトにする)からコンテンツベース(小さな箱を横幅が広ければ横に、狭ければ縦に並べる流動的デザイン)に移行しているのが現状"

2021年11月18日 リンク

その他
sippo_des
sippo_des 覚えたことがなくなっていくのは、いいことのよーで、さみしーよーな、でもいいことだよきっと、、

2021年11月18日 リンク

その他
mohno
「メディアクエリの定義に関するベストプラクティスはデバイスベースからコンテンツベースに移行しているのが現状」←そうなんだぁ(全然ついていってない)

その他
tokage3
また変わるのか。めんどくさい笑

その他
kuroaka1871
良い流れ。

その他
mayumayu_nimolove
mayumayu_nimolove 楽になればなんでもいい

2021年11月18日 リンク

その他
renu
ダークモードの対応かと思ったらレイアウトの方か

その他
AzuLitchi
IE対応を考えなくてよくなったときのためにブクマ

その他

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー
アプリのスクリーンショット
いまの話題をアプリでチェック!
  • バナー広告なし
  • ミュート機能あり
  • ダークモード搭載
アプリをダウンロード

関連記事

usersに達しました!

さんが1番目にブックマークした記事「CSSでメディアクエ...」が注目されています。

気持ちをシェアしよう

ツイートする

CSSでメディアクエリはもう必要ないかも -メディアクエリなしで実装するテクニックのまとめ

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直... 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数学関数

ブックマークしたユーザー

  • s15i2025年05月14日 s15i
  • sbtqe2022年12月04日 sbtqe
  • kjkj_ongr2022年11月11日 kjkj_ongr
  • gazza0692022年07月24日 gazza069
  • tymikii2022年07月12日 tymikii
  • twoten210kaku2022年01月16日 twoten210kaku
  • niidome2021年12月25日 niidome
  • jytech2021年12月17日 jytech
  • dellab722021年12月07日 dellab72
  • mamekoji2021年12月02日 mamekoji
  • akymrk2021年11月29日 akymrk
  • takaesu2021年11月26日 takaesu
  • hachi8octo2021年11月25日 hachi8octo
  • kochi152021年11月22日 kochi15
  • sanko04082021年11月21日 sanko0408
  • lapin06172021年11月21日 lapin0617
  • m0t0m0t02021年11月20日 m0t0m0t0
  • tasukuchan2021年11月20日 tasukuchan
すべてのユーザーの
詳細を表示します

ブックマークしたすべてのユーザー

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

同時期にブックマークされた記事

いま人気の記事 - 企業メディア

企業メディアをもっと読む

はてなブックマーク

公式Twitter

はてなのサービス

Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しましたx

AltStyle によって変換されたページ (->オリジナル) /