WebサイトのUIに役立つ、CSSの:has()疑似クラスの便利な使い方
CSSの:has()疑似クラスは2023年暮れにFirefoxでもサポートされ、すべての主要ブラウザでサポートされました。今までのCSSでは、要素の存在のあり・なしによって特定の親や要素にスタイルを設定することは不可能でしたが、:has()疑似クラスのおかげで、指定した要素がある場合にのみスタイルを適用できるようになりました。 WebサイトのUIでよく見かけるCSSの:has()疑似クラスの便利な使い方を紹介します。今までは少し面倒なCSS、もしくはJavaScriptが必要でしたが、:has()疑似クラスを用いると簡単に実装できます。 Some little ways I’m using CSS :has() in the real world by Andy Bell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに
CSS Gridのしっかりとした知識とレイアウトやUIコンポーネントを実装するテクニックを学びたい人にお勧めの解説書 -作って学ぶ HTML+CSSグリッドレイアウト
※本ページは、アフィリエイト広告を利用しています。 CSS Gridをそろそろ真剣に覚えないと、思っている人にぴったりの解説書を紹介します。 Web制作系の解説書で評価が高いエビスコム様の最新刊で、本書もかなり充実した内容となっています。CSS Gridの基礎知識はもちろん、基本のグリッド、さまざまなレイアウトやUIコンポーネントの実装も豊富で、簡潔なコードでかなりしっかりと解説されています。 本書は、先週発売されたばかり！ Web制作に携わる人すべてにお勧めの解説書。HTMLとCSSに携わるコーダーの人はもちろん、こういうレイアウトやコンポーネントができるというのがよく分かるのでデザイナーやディレクターの人にもお勧めです。
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
これは朗報！ CSSだけで関数とミックスインが使えるように
CSSは変数（カスタムプロパティ）をはじめ、最近では入れ子（ネスト）もサポートされ、進化を続けています。これはまだ先のことだと思いますが、Sassなどのプリプロセッサで使用できる関数とミックスインをCSSで使えるようにしようという動きがあります。 もちろん仕様などはまだ決まっていませんが、CSSで@functionと@mixin の2つのatルールが提案されています。 Future of CSS: Functions and Mixins by Andrew Bone 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのプリプロセッサ 実際の使用例 終わりに はじめに この記事ではこれからのCSSとして、まだブラウザでは使用できませんが、CSSの記述方法を変える可能性のあるものを見ていきます。それはcsswg-dr
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
Web制作者は要チェック！ Chrome 122で新しく追加された3つのCSSの機能
Chrome 122に追加された、CSSの新しい機能3つを紹介します。 今回のアップデートは新しいプロパティを使えるようになったではなく、既存のものの仕様が変更されたという感じです。ここで紹介する機能はデフォルトで、有効になっています。 Chrome 122 beta New in Chrome 122 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに サポートされていない機能を含む@containerクエリは一致しない CSSの::backdrop擬似要素は初期値を継承します CSSの@importのsupport()条件をサポートします はじめに 2/21にリリースされたChrome 122で3つのCSSの新しい機能が追加されました。対象となるChrome 122は、Andro
これは覚えておきたい！ CSSの:has()疑似クラスを使うと、こんな面倒な実装も簡単なCSSだけできる
CSSの:has()疑似クラスは去年末にFirefoxでサポートされ、これですべてのブラウザにサポートされました。2024年は、:has()疑似クラスを使用する機会が増えますね。 CSSの:has()疑似クラスは指定した要素がある場合にのみスタイルを適用できる、if文のような非常に便利なCSSの機能です。この:has()疑似クラスの基本的な使い方とシンプルだけどクールな使い方を紹介します。 ↔️ Sideway selection in CSS with :has() by Francesco Vetere 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 :has()疑似クラスのシンプルでクールな使い方 実装の解説 :has()疑似クラスのシンプルでクールな使い方 みなさん、こんにちわ！👋 この記事では、最近すべてのブラウザに
モダンCSSで実装する、テーブル（<table>）のさまざまなスタイルのまとめ
モダンCSSでテーブルをゼブラストライプしたり、テーブルの四隅を角丸にしたり（昔はかなり面倒でした）、列や行を分割したり、ホバーでハイライトやアウトラインを表示したりなど、表のデータを読みやすくするテーブル（<table>）のさまざまなスタイルを紹介します。 A Guide to Styling Tables by Mads Stoumann 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テーブルを構成するHTMLの要素 テーブルをゼブラストライブにするCSS テーブルを角丸にするCSS テーブルの列を分割するCSS テーブルの行を分割するCSS ホバー・フォーカスでハイライトするCSS ホバーでアウトラインを表示するCSS データを左右・中央に揃えるCSS 終わりに はじめに 私は最近、小さな矛盾に気がつきました。
CSSで三角形を実装するにはaspect-ratioとclip-pathを使用するのが簡単 -CSS Triangle Shapes
HTMLはdiv要素一つだけ（もしくはimg要素一つだけ）、あとはCSSをコピペするだけで三角形を実装できるCSS Triangle Shapesを紹介します。 CSSの三角形は、一昔前はborderで実装していましたが、最近では2つのプロパティ（aspect-ratio, clip-path）で実装します。どうやって実装するんだっけ？ というときに覚えておくと、さくっと利用できるので便利です。 CSS Triangle Shapes CSSで三角形を実装する最近の方法 CSSで三角形を作成するジェネレター CSSで三角形を実装する最近の方法 まずは、三角形をCSSで実装する方法を見てましょう。 これまでのCSSだと、divなどの矩形にborderプロパティで太いボーダーを設定し、三角形の部分だけ残して使用していました。
Tailwind CSSの基本的な使い方から実践的なテクニックまでしっかりと学べる一冊 -Tailwind CSS実践入門
※本ページは、アフィリエイト広告を利用しています。 Tailwind CSSは好き嫌いが分かれるフレームワークだと思いますが、Tailwind CSSを採用しているWebサイトは確実に増えてきました。 Tailwind CSSのユーティリティファーストでどのようにマークアップするのか、ユーティリティクラスを用いたコンポーネント設計、基本的な使い方からテーマのカスタマイズやプラグインなど実践的なテクニックを詳しく解説した解説書を紹介します。 本書は、CSSのフレームワーク「Tailwind CSS」の解説書です。Tailwind CSSについては導入方法からていねいに解説されていますが、HTMLやCSSの基礎知識は解説されていません。すでにHTMLやCSSを使用して実際にWebサイトを構築している人向けです。 Tailwind CSSをこれから使用してみたい、すでに使用していてより良い使い方
Web制作者は要チェック！ Chrome 121で新しく追加された6つのCSSの機能
今年もCSSはどんどん進化しそうですね！ 1/24にリリースされたChrome 121に追加された、CSSの新しい機能6つを紹介します。スクロールバーのスタイル、スペルミスや文法的に正しくないテキストをハイライトする疑似要素、SVGのCSSマスキングなど、これからのWeb制作に役立つ機能ばかりです。 New in Chrome 121 Chrome 121 beta 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに CSSによるハイライトの継承 CSSによるスクロールバーのスタイル font-paletteプロパティでカラーフォントをアニメーション CSSのスペルチェック機能 SVGのCSSマスキングの改善 displayプロパティの新しい値 はじめに 1/24にリリースされたCh
ブックマークしておくと便利！ CSSで実装されたローダー、簡単にカスタマイズもできる優れもの -Loadership
自分のデザインに合ったローダーを簡単に実装したい！ そんな要望に応えるオンラインで簡単にカスタマイズができるCSSで実装されたローダーを紹介します。 ローダーはHTMLとCSSをコピペするだけで簡単に実装でき、カスタマイズもオンラインでサイズ・カラー・アニメーションなどを変更できます。 Loadership Loadershipの特徴 Loadershipの使い方 Loadershipのローダー Loadershipの特徴 Loadershipは、CSSで実装されたローダーをコピペで簡単に利用できるオンラインツールです。ローダーはオンラインでカスタマイズもでき、自分のデザインに合ったローダーを作成できます。 ローダーのCSSは依存関係はなく、HTMLとCSSをコピペするだけで利用できます。MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。詳しくは、Aboutをご覧ください
最近のCSSは進化が早い！ モダンCSSの新機能、ブラウザのサポートが充実した機能のまとめ
最近のCSSは進化が早く、またブラウザはエバーグリーン（自動で最新版にアップデートするブラウザ）になり月一ペースでアップデートされ、モダンCSSの機能もたくさんサポートされました。 CSSの新機能をはじめ、ブラウザのサポートが充実した機能を紹介します。2024年はこれらのモダンCSSを使用する機会が増えますね。 :has()疑似クラスがすべてのブラウザにサポートされました CSSのコンテナクエリ CSSのスタイルクエリ CSSのネスト CSSの@scopeはセレクタの適用範囲を設定できる CSSで三角関数が使用できるようになった スクロールをトリガーにしたアニメーションの実装が大きく変わる 今までは面倒だったことが簡単に実装できるようになった新機能 知っておくと便利なCSSの知識とテクニック HTML関連も少しだけ :has()疑似クラスがすべてのブラウザにサポートされました まずは、:h
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
2024年の実装に役立つCSSの新機能と使い方のまとめ
2023年の後半に、CSSの多くの新機能がすべてのブラウザにサポートされました。新機能が登場するときもワクワクしますが、やはりすべてのブラウザにサポートされてからが本番です。 2024年の実装に役立つCSSの新機能とその使い方を紹介します。セレクタを条件式のように記述できる:has()、複数のカード内でテキストを揃えられるsubgrid、CSS内でネストを使用できるCSSネスト、レスポンシブ対応のコンポーネントに役立つコンテナクエリ単位など、次のプロジェクトに役立つCSSがたくさんあります。 5 CSS snippets every front-end developer should know in 2024 by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。
商用利用無料！ コピペで簡単に実装できる、Tailwind CSSで実装されたUIコンポーネントが150種類以上！ -Mamba UI
Webサイトやスマホアプリでよく使用されるUIコンポーネントとテンプレートをTailwind CSSベースで実装したコレクションを紹介します。 コードはHTMLとVueとJSXに対応しており、Tailwind CSSを用意しておけばコピペで簡単に利用できます。 Mamba UI Mamba UI -GitHub Mamba UIの特徴 Mamba UIの使い方 Mamba UIのコンポーネント Mamba UIの特徴 Mamba UIは、Webサイトやスマホアプリによく使用されるUI要素をTailwind CSSベースで実装したオープンソースのコレクションです。すべてのコンポーネント・テンプレートはHTMLとCSSで実装されており、Tailwind CSSのおかげで複雑なCSSルールを記述する必要はありません。 Tailwind CSSはユーティリティファーストのCSSフレームワークなので
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
2023年、Web制作・デザインに役立つ記事の総まとめ
2023年、当サイトで公開した記事の中からPocketにたくさん保存された記事やXにポストされた記事をジャンル別にまとめました。今年を振り返りつつ、来年のWeb制作にも役立つオススメです。 Web制作全般 UI/UX関連 デザインのテクニック・インスピレーション Photoshop, XD, Figma, VSCodeなどツール フォント・タイポグラフィ カラー HTML CSS: 基礎知識 CSS: 実装テクニック JavaScript フレームワーク・ライブラリ 無料素材 便利ツール・サービス 当サイトの購読は、RSS Feedを利用すると便利です。 コリスのRSS Feed ※旧Feedに登録されている人がまだ多いので変更をお願いします。 Web制作全般 2023年のもっとも大きなニュースの一つは、ChatGPTをはじめとするAIです。どのジャンルでもそうですが、完全に任せるのではな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSだけでif～else文と同じことができる！ しかもすべてのブラウザでサポートされています
