2022年

CSS変数を利用したショートハンドプロパティもどき

CSSの各種プロパティの中には、関連するプロパティの値を一括指定できるショートハンドプロパティがあります。一方で、複数の値を指定できるものの、それらの値を個別に設定できない、ショートハンドプロパティではないプロパティもあります。

今回は、ショートハンドプロパティではないプロパティを、ショートハンドプロパティのように扱う、CSS変数 (カスタムプロパティ) の使用方法を紹介します。

CSS変数 (カスタムプロパティ) を使いこなせていますか？

今回はCSS変数を使用して、FlexboxレイアウトやGridレイアウトの設定を管理しやすくするための小技を紹介します。

HTMLの要素を横並びにしたくて、floatプロパティで四苦八苦していたのは昔の話し。今は display:flex で簡単にできるようになりました。

しかし、display:flex には特有のクセのようなものがあり、仕様をきちんと理解しないと、意図したとおりの横並びにできない場合があります。

今回は display:flex で横並びにする6種類の方法と、その注意点について解説していきます。

WordPressの標準エディタがブロックエディタになって、しばらく経ちますが、クラシックエディタ (TinyMCE) を使っている方も、まだ多いように感じます。

また、ブロックエディタには、クラシックエディタの機能が使えるクラシックブロック (wp-block-freeform) もあるため、クラシックエディタと、もうしばらく付き合う必要があります。

そこで、今回はブロックエディタとクラシックエディタの両方のスタイルを整えることができる、editor-style.cssの作り方を紹介します。

多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。

今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。

最近、Googleの検索結果で、正方形のサムネイルが表示されるのを見かけるようになりました。

そこで、サムネイルを表示させる方法を調べてみると、「PageMap」という聞きなれない単語が出てきました。

今回は、この「PageMap」について考察していきます。

CSSで縁取り文字を作る方法はいくつかありますが、今回は、text-shadowプロパティとCSS変数 (カスタムプロパティ) を使用したものを紹介します。

WordPress で作られたブログに、Facebook や Twitter などのSNSリンクを設置したい場合があります。

管理画面に独自の設定箇所を設け、簡単にSNSリンクが設定できるテーマもありますが、今回はテーマを問わない、ブロックエディタの「ソーシャルアイコンブロック」を使用した方法を紹介します。

ウェブページのコンテンツが少なくて、フッターの下側に余白ができるといったことが稀にあります。これ、皆さんどうしてます？

今回は、フッターの下側に余白ができるような場面で、フッターを表示領域下部に固定する方法を紹介します。

「背景画像は動かない」を実現する background-attachment: fixed ですが、Apple製品では機能しないという重大な問題があります。今回は、この問題のファイナルアンサーを紹介します。