ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?
今回は、汎用的に使用する色を作るためにしたことを紹介していきます。
ウェブサイトのあちこちで汎用的に使用する色、例えば、有名なフロントエンドフレームワークの「Bootstrap」であれば、「Primary」「Secondary」「Success」「Danger」「Warning」「Info」「Light」「Dark」といった名称で設定されている色、皆さんはどのように決めていますか?
今回は、汎用的に使用する色を作るためにしたことを紹介していきます。
ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。
ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードと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変数 (カスタムプロパティ) を使用したものを紹介します。