CSSだけでスタイルクエリのサポートを確認する方法、Safari 18のバグを回避する方法も

2024/11/06 10 users CSS コンテナ パク スタイルクエリ ラベル

スタイルクエリとは、親要素のスタイルに応じて子要素のスタイルを適用するCSSの機能です。たとえば、カードのコンテナがあり、カードによってラベルやボタンのスタイルを変更したい場合などに便利です。 このスタイルクエリがブラウザにサポートされているかをCSSだけで確認するテクニックを紹介します。 Feature detec... 続きを読む

知らなかったCSSプロパティ 3選 - Qiita

2024/06/29 48 users Qiita CSSプロパティ Cur プロパティ CSS

はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 cur... 続きを読む

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する

2024/06/01 8 users スクロールバー scroll プロパティ auto 画面

scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・... 続きを読む

Chrome 111のココに注目！ 三角関数やスタイルクエリなどCSSに関する新機能がけっこうたくさんサポートされました

2023/03/08 15 users CSS 三角関数 スタイルクエリ ココ nth-child

本日リリースされたChrome 111で、CSSに関する新機能がけっこうたくさんサポートされたので、紹介します。 sin(), cos(), tan()などの三角関数をはじめ、親要素のスタイルに応じて子要素のスタイルを適用できるスタイルクエリ、:nth-child()で「of S」構文が使用できるようになったり、他にもいろいろ盛りだくさんです。... 続きを読む

知っておくと便利なCSSのセレクタ！ :has()疑似クラスを使用すると、子の数に基づいて親要素のスタイルを定義できる

2022/11/29 26 users セレクタ Has CSS 疑似クラス 要素

CSSはどんどん便利になってますね！ :has()もその一つで、指定した要素がある場合にのみスタイルを適用できます。その機能を利用して、子の数に基づいて親要素のスタイルを定義することができます。たとえば、子要素が3個以下の場合、ちょうど5個の場合、7～9個の場合などに親要素に異なるスタイルを設定するのが簡単で... 続きを読む

CSSの進化がすごい！ スタイルクエリの基礎知識と使い方を解説、親要素の「スタイル」に応じて子要素のスタイルを適用

2022/10/27 160 users CSS コンテナクエリ スタイルクエリ Safari コンテナ

Chrome 106, Safari 16でサポートされたコンテナクエリは、親要素（コンテナ）のサイズに応じて子要素のスタイルを設定できる新機能です。しかし、これは機能の一部です。親要素のスタイルに応じて子要素のスタイルを設定できるスタイルクエリを紹介します。 たとえば、下記は右のカードの親要素に特定のスタイルが設定... 続きを読む

レスポンシブの実装が今までと変わる！ CSSの新機能コンテナクエリと:has()疑似クラス、最初に理解しておきたい基礎知識を解説

2022/08/25 137 users Has ビューポート CSS Container 疑似クラス

CSSの新機能コンテナクエリ（@container）と:has()疑似クラスが、いよいよChrome 105（8月末、来週リリース予定）でサポートされます。 コンテナクエリとは今までのメディアクエリがビューポートに依存していたのとは異なり、親要素（コンテナ）のサイズに対してスタイルを適用できます。:has()疑似クラスは指定した要素... 続きを読む

CSSでブロック要素の幅をコンテンツのサイズぴったりにしたい時のこれからの記述方法 | コリス

2021/08/04 191 users コリス section inline CSS div

sectionやdivやpなど、ブロック要素をボーダーで囲うと、全幅（親要素の幅）になります。そのブロック要素の中のコンテンツが少なく、ボーダーの幅をコンテンツのサイズに合わせたい場合は、どう実装していますか？ ブロック要素のままでは親要素の幅になってしまうので、通常はdisplay: inline;やdisplay: inline-block... 続きを読む

いつから、z-indexがpositionだけのものだと錯覚していた？ - Qiita

2020/02/25 10 users BLEACH Qiita position z-index

タイトルの元ネタになっている『BLEACH』は読んだことありません。 悩ましいz-index問題 CSSを学んだことある人なら一度は通るz-index問題。単純にz-indexの値で重なりが決まるのではなく、親要素との関係によって重なりが変わるので複雑です。ついz-index: 9999はやってしまいます。（一番上なんだな、っていうのが分か... 続きを読む

CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | コリス

2020/01/23 73 users min-width コリス width ＭＡＸ min

Webページやスマホアプリのレイアウトをはじめ、画像、ボタン、ナビゲーションなどを親要素に応じてそれらの幅や高さを適したサイズにしたい時がありませんか？ そんな時には、min-widthとmax-width、min-heightとmax-heightを効果的に使用すると、非常に便利です。 widthとheightプロパティにおけるminとmaxの効果的な... 続きを読む

CSSの単位「rem」を使ったフォントサイズの計算を自動で一覧表示してくれる便利ツール -PxtoRem | コリス

2018/07/09 131 users rem コリス フォントサイズ CSS 複利計算

フォントサイズの指定によく使用される単位は、相対値で指定できる単位が人気です。中でも、親要素に相対的なemより、常にルートに相対的なremの方が使い勝手がよいでしょう。emを使用すると複利計算になるため、深い階層の子要素...記事の続きを読む 続きを読む

[CSS]幅や高さが不明な要素を中心に配置する、IE8対応の古い方法とモダンブラウザ対応の最新の方法 | コリス

2018/07/04 51 users コリス CSS 要素 両方 方向

CSSで子要素を親要素の中心に配置するには、水平と垂直の両方の方向に対して中央揃えにする必要があります。特に、子要素の幅や高さが不明な場合はやっかいです。 幅や高さが不明な子要素を親要素の中心に配置するIE8にも対応した古い方法、モダンブラウザ対応の最新の方法を紹介します。 Centering: The Newest Coolest... 続きを読む

[CSS]要素を天地左右の中央に配置、最近主流になっている実装方法のまとめ | コリス

2018/03/02 301 users コリス margin CSS center auto

子要素を親要素の左右中央に配置するのは、簡単です。 インライン要素は「text-align: center;」で、ブロック要素であれば「margin: 0 auto;」で中央に配置できます。 難しいのは上下、天地の中央です。 CSS Hackは使用せず、要素を天地左右の中央に配置する実装方法を紹介します。 Absolute Centering with CSS 下記は各ポイントを意訳したものです。... 続きを読む

Sketchにインストールしておくと便利なプラグインのまとめ | コリス

2018/02/14 68 users コリス Sketch padding プラグイン レイアウト

Sketchはそのままでも利用できますが、プラグインをいれると更に便利になります。 Webページやスマホアプリの制作に便利なSketchのプラグインを紹介します。 Paddy 文字数を変更したり、子要素のサイズを変更すると、親要素のレイアウトが崩れてしまうことがあります。そんな時は、このプラグインが便利です。 要素にpaddingを指定したら、それを保ったままレイアウトを変更できます。機能は他にも... 続きを読む

CSSで片方可変、片方固定のカラムレイアウトを実装する方法 | NxWorld

2015/10/19 220 users 片方 div要素 レイアウト HTML NxWorld

CSSで片方の幅が可変で、もう片方の幅が固定というタイプのカラムレイアウトを実装する方法を全4パターン紹介します。対象ブラウザやOSなど環境によっては使えないものもありますが、全て同じ見た目（レイアウト）を実装することができます。 HTML 以下で紹介する方法はいずれも下記のようなHTMLを使用したものになり、ご覧のようにメイン・サイド・それらを括る親要素の3つのdiv要素で実装していきます。 H... 続きを読む

CSSのfloatに困った時に見直したい6つのポイント、floatがどのように機能しているか分かりやすく解説 | コリス

2015/08/28 288 users コリス float チュートリアル CSS 順番

floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。 How Floating Works floatのルール 1. フロート要素を親要素から見るとどうなるか 2. 左や右にフロートさせる 3. フロート要素が押し下げられてしまう原因 4. フロート要素の配置の順番 5. フロート要素の... 続きを読む

ASCII.jp：画像の色から背景色を決定！jquery.adaptive-backgrounds.js｜こうめの“これから使える”jQueryプラグイン

2015/01/08 59 users jQueryプラグイン iTunes ASCII.jp 手法

今回紹介するプラグイン jquery.adaptive-backgrounds.js 「jquery.adaptive-backgrounds.js」は、指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグインです。 ドミナントカラーとは配色全体の印象を支配する色のことで、主調色とも呼ばれます。ドミナントカラーを背景に使う手法で有名なのはiTunesですね。下記の... 続きを読む

レスポンシブWebデザインでハマりがちな%指定 │ Design Spice

2014/03/24 452 users Design Spice レスポンシブWebデザイン 比率

レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×1... 続きを読む

【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

2013/07/03 136 users Hoge child バシャログ 階層 CSS

対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-t... 続きを読む

floatを解除する方法のまとめ: 小粋空間

2013/03/27 678 users float 小粋空間 After CSS 擬似要素

CSSのfloatを解除（クリア）する方法をまとめてみました。 以前、floatを解除するテクニックとして以下の記事をエントリーしたのですが、その後色々なテクニックがあることに気がつきました。 CSS の after 擬似要素で回り込みを解除する ということで、そもそものfloatの問題（というか仕様）と、その対処方法についてネットで調べた情報を一通りまとめました。 １．floatにより親要素の高... 続きを読む

画像の最大幅を calc() で制御する – terkel.jp

2012/12/16 99 users padding パディング Calc border img

画像の幅をコンテンツに合わせてフレキシブルにしたい場合、親要素の幅を超えないようにするには CSS の max-width プロパティに 100% を指定する。 img { max-width: 100%; border: 1px solid silver; padding: 0.25em; } ただ、画像にパディングやボーダーを持たせた場合、その分が親要素の幅より大きくなってしまうことがある (... 続きを読む

親要素にフィットするようにテキストサイズを自動調整してくれるjQueryプラグイン。 → STRML/jquery.textFit · GitHub - コメンター

2012/10/10 7 users コメンター GitHub jQueryプラグイン

STRML/jquery.textFit · GitHub - jquery.textFit - A jQuery plugin that quickly fits single and multi-line text to the width (and optionally height) of its container. 続きを読む

Twitter Bootstrapの2.1が公開間近・・・ | IDEA*IDEA

2012/08/14 25 users IDEA Twitter どちら ドキュメント シルバー

Twitterが作った最も偉大なもの、として好評なTwitter Bootstrapですが、2.1が公開間近っぽいですね。ざっとRC（Release Candidate）を見てみましたが、ドキュメントが整備されたのと、いくつか新しい部品が増えているのがうれしいですな。 ↑ 親要素の幅にあわせたボタンとか。 ↑ スクロールしてもついてくる要素とか。 ↑ シルバーのNavbarも出来たのかな。 どちら... 続きを読む

意外と説明できない･･･なぜリンクの色が優先されるのか調べてみた | クリエイティブメモメモ

2012/07/18 91 users クリエイティブメモメモ リンク 井畑 脳みそ CSS

こんにちは湿気でつやつやてかてかの井畑です。 今回はCSSのリンクの色についてふと疑問に思うことがあったので、調べて記事にしてみました。 調べてみると、何て事はなかったのですが(爆)目から鱗というかなるほどーと思うことだったので、皆さんの脳みそのしわの一つにでもなれば幸いです。 それではどうぞー！ aのリンク色はなぜ親要素から継承されないの？ 僕が疑問を持った点を説明します。まずはコチラをご覧くだ... 続きを読む

[JS]親要素のサイズに合わせてフォントサイズをフィットさせるスクリプト -FitText | コリス

2011/05/15 56 users FitText コリス フォントサイズ width スクリプト

デモでは、width=100%で実装された「FitText」とその下のダウンロードに適用されており、それぞれ親要素のサイズが変更されると共に、フォントサイズが変更されます。 サイズを変更したキャプチャ h1要素のwidthを「100%」にしているため、ブラウザのサイズを変更するとフォントのサイズも追従します。 FitTextの実装 下記は、デモ（h1要素とダウンロード）での実装例です。 HTML ... 続きを読む