サイト構築 -CSS

CSSでスタイルクエリ(@container style())を使えるようになると、実装がいろいろ便利になる

Post on:2024年3月19日

コンテナクエリがすべてのモダンブラウザの安定版でサポートされ、メディアクエリに代わり、コンテナクエリを使用する機会も増えてきたと思います。 コンテナクエリは親コンテナに基づいてスタイルを定義できるものですが、親のサイズに

...記事の続きを読む

WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方

Post on:2024年3月14日

CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能で

...記事の続きを読む

CSSだけでif~else文と同じことができる! しかもすべてのブラウザでサポートされています

Post on:2024年3月12日

CSSでif~else文が使えたら、と思ったことはありませんか? もちろんifとかelseはCSSにはありませんが、CSSだけでif~else文と同じようにスタイルを設定できます。

Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります

Post on:2024年3月7日

間もなくリリースされるChrome 123(リリース情報)で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しい

...記事の続きを読む

これは便利! HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles

Post on:2024年3月6日

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装す

...記事の続きを読む

これは朗報! CSSだけで関数とミックスインが使えるように

Post on:2024年3月5日

CSSは変数(カスタムプロパティ)をはじめ、最近では入れ子(ネスト)もサポートされ、進化を続けています。これはまだ先のことだと思いますが、Sassなどのプリプロセッサで使用できる関数とミックスインをCSSで使えるようにし

...記事の続きを読む

CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方

Post on:2024年2月29日

ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたCh

...記事の続きを読む

Web制作者は要チェック! Chrome 122で新しく追加された3つのCSSの機能

Post on:2024年2月27日

Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効

...記事の続きを読む

これは覚えておきたい! CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる

Post on:2024年2月14日

CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した

...記事の続きを読む

モダンCSSで実装する、テーブル(<table>)のさまざまなスタイルのまとめ

Post on:2024年2月8日

モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり(昔はかなり面倒でした)、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル(<ta

...記事の続きを読む

top of page

©2024 coliss