サイト構築 -CSS

これは知っておくとかなり便利! details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

Post on:2024年1月11日

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリ

...記事の続きを読む

朗報! CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ

Post on:2023年12月21日

CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121(リリース情報)でサポートされ、これで:has()疑似クラスがすべてのブ

...記事の続きを読む

CSSで句読点括弧のカーニングができるようになるぞ! 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ

Post on:2023年12月13日

CSSのこの機能を待っていた人も多いと思います! CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下で

...記事の続きを読む

CSSのデフォルトとして記述しておくと便利、img要素に設定するスタイルのまとめ

Post on:2023年12月12日

最近ではモダンブラウザをターゲットにした場合、リセットCSS自体は必要ないかもしませんが、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 その中の一つとして、img要素に設定しておくと便

...記事の続きを読む

CSSの進化が止まらない! Chrome 120で追加された7つの新しいCSSの機能

Post on:2023年12月11日

年末になっても、CSSの進化が止まりません! 先日リリースされたChrome 120で追加された7つの新しいCSSの機能を紹介します。JavaScriptをサポートしているかチェックできる新しいメディアクエリ、新しい指数

...記事の続きを読む

Web制作者の念願がついに叶った! height: 0;からheight: auto;へのトランジションをJavaScriptは無し、CSSで実装する方法

Post on:2023年12月7日

今までJavaScriptを使用しないと実装できなったことが、CSSだけで実装できるようになったものが増えてきました。たとえば、表示・非表示をdisplayプロパティでアニメーションできるようになったり、スクロールをトリ

...記事の続きを読む

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで100種類以上のリボンを簡単に実装できる -CSS Ribbon Shapes

Post on:2023年11月29日

HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のリボンを実装できるCSS Ribbon Shapesを紹介します。 リボンは、よく見かけるシンプルなリボンをはじめ、パネルに垂れ下がるようなリボン

...記事の続きを読む

朗報! これでCSSネストの記述方法がより簡単になります

Post on:2023年11月22日

2023年、CSSにもたくさんの新機能がブラウザに実装されました。そのうちの一つがCSSネストで、現在ではChrome, Edge, Safari, Firefoxの主要ブラウザにサポートされています。 来週リリース予定

...記事の続きを読む

CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

Post on:2023年11月16日

margin: auto;は非常に便利なCSSで、使用することも多いと思います。 そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル

...記事の続きを読む

ターミナルのシンプルなUIが好きな人に! モダンでミニマルなCSSの超軽量フレームワーク -Terminal CSS

Post on:2023年11月13日

ターミナルのUIを模した、モダンでミニマルなCSSの超軽量フレームワークを紹介します。 ターミナルで見かけるようなデザインのUIコンポーネントが豊富に揃っており、ライトテーマ・ダークテーマもサポートされています。 Ter

...記事の続きを読む

top of page

©2024 coliss