ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。
コピペで実装できるレスポンシブな可変フォントサイズ
ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。
CSS変数を利用したショートハンドプロパティもどき
CSSの各種プロパティの中には、関連するプロパティの値を一括指定できるショートハンドプロパティがあります。一方で、複数の値を指定できるものの、それらの値を個別に設定できない、ショートハンドプロパティではないプロパティもあります。
今回は、ショートハンドプロパティではないプロパティを、ショートハンドプロパティのように扱う、CSS変数 (カスタムプロパティ) の使用方法を紹介します。
レイアウトの設定を管理しやすくするCSS変数の使い方
CSS変数 (カスタムプロパティ) を使いこなせていますか？
今回はCSS変数を使用して、FlexboxレイアウトやGridレイアウトの設定を管理しやすくするための小技を紹介します。
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」について考察していきます。
キレイな縁取り文字をtext-shadowプロパティとCSS変数で作る
CSSで縁取り文字を作る方法はいくつかありますが、今回は、text-shadowプロパティとCSS変数 (カスタムプロパティ) を使用したものを紹介します。
WordPressでメンテナンス性に優れたSNSリンクを設置する方法
WordPress で作られたブログに、Facebook や Twitter などのSNSリンクを設置したい場合があります。
管理画面に独自の設定箇所を設け、簡単にSNSリンクが設定できるテーマもありますが、今回はテーマを問わない、ブロックエディタの「ソーシャルアイコンブロック」を使用した方法を紹介します。