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

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

アプリで開く

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

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

エントリーの編集

loading...

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

タイトルガイドライン

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

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

ブックマークしました

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

Twitterで共有

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

351users がブックマーク コメント 17

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

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

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

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

よく使うタグ

CSSの新しい単位がすごく便利!コンテナベースの相対単位「コンテナ単位(qw, qh)」の基礎知識と使い方

351 users coliss.com

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

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

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

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

よく使うタグ

はてなブックマーク

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

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

ユーザー登録

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

記事へのコメント17

  • 注目コメント
  • 新着コメント
オーナーコメントを固定しています
coliss
オーナー CSSのコンテナ単位は、クエリコンテナのサイズを基準にした幅・高さを指定できる単位。

その他
gyochan
親要素の幅に応じて複数のレイアウトを持てるがビューポートには依存しないという考え方はとてもイカス。同じページ内でも2カラムで並べた時と3カラムで並べた時では見栄えが違う、みたいなことができる

その他
TakamoriTarou
ヤーポンガロンにやられているので、一瞬「あったらしい単位? なんだあ?作るんじゃねえよォ、テメェ、SIで、SIでやれや!」と脊髄反射した。はい。失礼しました。帰ります

その他
hapilaki
この説明では、親要素に対する%指定よりもどれだけ便利なのかが分からん。

その他
sucelie
良さげだけどChromeにもSafariにもまだこれからと言われるとなぁ。勉強しとくに越したことはないんだろうけど。

その他
ka2nn
これは嬉しいなー

その他
mayumayu_nimolove
単位覚えるのめんどくさいからよろしくやってくれるライブラリ作ろうかな

その他
leochang2018
CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。

その他
オーナーコメントを固定しています
coliss
オーナー coliss CSSのコンテナ単位は、クエリコンテナのサイズを基準にした幅・高さを指定できる単位。

2021年10月07日 リンク

その他
Pasta-K
へ〜便利じゃんと思ったけど、まだ Chrome Canaryでもフラグ付きなのか

その他
mumei-0
"新しい単位「コンテナ単位(qh, qw)」は、コンテナのサイズをベースにする相対単位です。"

その他
sorosoronemui
おお、便利。レスポンシブだけど、全体のラッパーの最大値設定してるときとかに、vwだけで制御できないからmediaqueryも使わないとならないが、コンテナ依存の単位ならそれだけでフォントサイズ制御できるな。

その他
phoope
広まってから覚えよう

その他
primedesignworks
シェアの高いブラウザがデフォルトで適用してくれるまでお預けやな。今やると各方面から文句が飛んでくる。

その他
sucelie
sucelie 良さげだけどChromeにもSafariにもまだこれからと言われるとなぁ。勉強しとくに越したことはないんだろうけど。

2021年10月07日 リンク

その他
localnavi
便利そうなのはいいんだが、今のところChromeで設定しないと使えないということは、普通に使えるまでには2〜3年はかかりそう。

その他
hapilaki
hapilaki この説明では、親要素に対する%指定よりもどれだけ便利なのかが分からん。

2021年10月07日 リンク

その他
mayumayu_nimolove
mayumayu_nimolove 単位覚えるのめんどくさいからよろしくやってくれるライブラリ作ろうかな

2021年10月07日 リンク

その他
Shinwiki
ちっと考えまとめてから発表しろよ

その他
leochang2018
leochang2018 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。

2021年10月07日 リンク

その他
gyochan
gyochan 親要素の幅に応じて複数のレイアウトを持てるがビューポートには依存しないという考え方はとてもイカス。同じページ内でも2カラムで並べた時と3カラムで並べた時では見栄えが違う、みたいなことができる

2021年10月07日 リンク

その他
TakamoriTarou
TakamoriTarou ヤーポンガロンにやられているので、一瞬「あったらしい単位? なんだあ?作るんじゃねえよォ、テメェ、SIで、SIでやれや!」と脊髄反射した。はい。失礼しました。帰ります

2021年10月07日 リンク

その他
ka2nn
ka2nn これは嬉しいなー

2021年10月07日 リンク

その他
kenzy_n
単位仕様

その他

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

リンクを埋め込む

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

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

関連記事

usersに達しました!

さんが1番目にブックマークした記事「CSSの新しい単位が...」が注目されています。

気持ちをシェアしよう

ツイートする

CSSの新しい単位がすごく便利!コンテナベースの相対単位「コンテナ単位(qw, qh)」の基礎知識と使い方

CSSの新しい単位がすごく便利!コンテナベースの相対単位「コンテナ単位(qw, qh)」の基礎知識と使い方... CSSの新しい単位がすごく便利!コンテナベースの相対単位「コンテナ単位(qw, qh)」の基礎知識と使い方 CSSでよく使用する単位といえば、px, em, remをはじめ、最近ではvh, vwなどだと思います。特にレスポンシブ対応のレイアウト・コンポーネントを実装する時には、ビューポート相対単位のvh, vwが非常に便利です。 CSSはメディアクエリの登場で進化したように、コンテナクエリの登場でさらに進化しようとしています。新しい単位「コンテナ単位(qh, qw)」は、コンテナのサイズをベースにする相対単位です。 コンテナ単位を使用すると、下記のようにコンテナの幅をベースにした値でfont-sizeを定義したり、同一ページ内で異なる幅のカラム(コンテンツとサイドバー、2カラムと3カラム)に同じコンポーネントやテキストを異なるサイズで配置したり、異なる幅のカラムでスペースの量を変えたりでき

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

  • visa98762025年01月17日 visa9876
  • wirknichtvoraus2023年03月30日 wirknichtvoraus
  • ddt20002022年12月02日 ddt2000
  • gazza0692022年07月24日 gazza069
  • extra_number2021年10月15日 extra_number
  • rinrinbell2021年10月14日 rinrinbell
  • falcon-net2021年10月13日 falcon-net
  • akira_maru2021年10月11日 akira_maru
  • herakures2021年10月11日 herakures
  • toney11042021年10月09日 toney1104
  • o_hiroyuki2021年10月08日 o_hiroyuki
  • littlefield2021年10月08日 littlefield
  • lunastera2021年10月08日 lunastera
  • Pasta-K2021年10月08日 Pasta-K
  • slay-t2021年10月08日 slay-t
  • xxxcozyxxx2021年10月08日 xxxcozyxxx
  • dev0000_12021年10月08日 dev0000_1
  • hideandfire20172021年10月08日 hideandfire2017
すべてのユーザーの
詳細を表示します

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

同じサイトの新着

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

いま人気の記事

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

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

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

新着記事 - テクノロジー

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

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

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

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

はてなブックマーク

公式Twitter

はてなのサービス

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

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