[CSS] :is(), :not(), :where(), :has() の意外な使い方

CSS の擬似クラスである :is(), :not(), :where(), :has() はとても便利ですよね。CSS をある程度使いこなせている人なら、使ったことがないという人はいないのではないでしょうか?

今回は、これらの便利な擬似クラスで、こんなこともできるんだと驚いた、少し変わった使い方をシェアしたいと思います。

[CSS Marquee] テキストをスクロールさせるCSS

かつて、電光掲示板のようにテキストをスクロールさせることができる、marquee要素 というものがありました。

今回は、現在の HTML の仕様では非推奨になっている、その marquee要素 を、CSS で再現してみます。

目次を自動生成するJavaScriptとHTML上の設置方法

主にブログ記事などでよく目にする「目次」ですが、手作業で作る場合、見出しなどに ID を設定して、その ID に対してリンクを設定するという作業を何度も行う必要があります。また、コンテンツを手直しした際には、作り直す必要もでてきます。

そこで今回は、目次を自動生成するJavaScriptコードとその使い方を紹介します。

擬似要素を使わずCSSで漫画の吹き出しを作る方法

CSS で漫画のような吹き出しを作る際、三角形の部分をどう実現するかが問題になります。

よくある方法なのが、背景色を設定した要素に、擬似要素で作った同じ背景色の三角形を組み合わせるというものです。

そこで今回は、擬似要素を使わない、吹き出しの作り方を紹介しようと思います。

CSSのみで実装するテーブル用スクロールヒント

テーブル (表) をスマホなどの小さい画面で表示させた場合に、テーブルセルが小さくなりすぎたり、内容が溢れてしまうのを防ぐため、スクロールできるようにするのが一般的だと思います。

しかし、スクロールバーが表示されない環境では、スクロールできるどうかが分かりづらい場合があります。

そこで今回は、スクロールできることを明示する「スクロールヒント」を CSS のみで実装する方法を紹介します。

グラフをHTMLとCSSで作るならtable要素が最適解かもしれない

円グラフや棒グラフをウェブページに載せる際、皆さんはどうしていますか?

Photoshop などで画像として作り、img要素で表示しますか? それとも、SVG で作りますか? あるいは、canvas要素と JavaScript を組み合わせて描画しますか?

様々な方法が考えられますが、セマンティックに、かつ手軽に作りたいのであれば、table要素を CSS でスタイリングする方法がベストかもしれません。

figcaptionを中央に配置し最大幅を兄弟要素に揃える方法

figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。

WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。

今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。

[CSS] 1色決めるだけで出来る手軽なカラーパレット作成法

色を決めるって大変ですよね?直感的に色を決められる人にとっては、さほど難しくないのかもしれませんが、個人的にはとても苦手です。

今回は、CSS変数 (カスタムプロパティ) とhsl関数とcolor-mix関数を使用した、手軽なカラーパレット作成法を紹介します。