CSSで白と黒のどちらの背景色でも見やすい色を作る方法

ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?

今回は、汎用的に使用する色を作るためにしたことを紹介していきます。

HTMLの電話番号リンクをタブレットやスマホのみ有効にするCSS

ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。

しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。

今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。

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

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

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

display:flexで要素を横並びにする6種類の方法と注意点

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

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

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

WordPressの新旧エディタをeditor-style.cssでなんとかする方法

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

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

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

HTMLとCSSのみの簡単なハンバーガーボタンの作り方

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

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

Googleの検索結果でサムネイルを表示させるPageMapとは?

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

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

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