CSSのスタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用
Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定されており、それに応じて子要素のスタイルが適用されています。 Container Queries: Style Queries by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテナクエリとスタイルクエリの違い スタイルクエリの基礎知識 スタイルクエリの使い方 スタイルクエリのブラウザサポート スタイルクエリのリソース はじめに CSSのコンテナクエリは「コンテナのサイズ」だけではない
hrの使いやすそうなスタイリングいろいろ
Result いろいろなhrのスタイルです。以前書いたCSSで作るhrのスタイルいろいろを小奇麗にした的な感じになっています css.hr_b {/*シャドウ付き*/ height: 8px; border: 0; box-shadow: 0 8px 8px -8px #666 inset; } .hr_c {/*フルワイド*/ position: relative; width: 100vw; margin: 10px 0 10px -50vw; left: 50%; } .hr_d {/*両端フェードアウト*/ border: 0; height: 1px; background-image: -webkit-linear-gradient(left, #f0f0f0, #666, #f0f0f0); background-image: linear-gradient(left, #f
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
