円グラフや棒グラフをウェブページに載せる際、皆さんはどうしていますか？
Photoshop などで画像として作り、img要素で表示しますか？ それとも、SVG で作りますか？ あるいは、canvas要素と JavaScript を組み合わせて描画しますか？
様々な方法が考えられますが、セマンティックに、かつ手軽に作りたいのであれば、table要素を CSS でスタイリングする方法がベストかもしれません。
Copy and Paste
figcaptionを中央に配置し最大幅を兄弟要素に揃える方法
figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。
WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。
今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。
HTMLとCSSで切り替えられるタブの作り方
ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。
CSSで文字にマーカー風のアンダーラインを引く3つの方法
CSSプロパティの background、box-shadow、text-decoration の3つから、文字にマーカー風のアンダーラインを引くための3種類のコードと、それぞれのメリット・デメリットを解説しています。
HTMLの電話番号リンクをタブレットやスマホのみ有効にするCSS
ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。
コピペで実装できるレスポンシブな可変フォントサイズ
ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。
HTMLとCSSのみの簡単なハンバーガーボタンの作り方
多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。
今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。
カスタムプロパティ (CSS変数) を使った爆速レイアウト術
カスタムプロパティ (CSS変数) を使ってますか？
今回は、HTMLのstyle属性とカスタムプロパティを組み合わせて、多種多様なレイアウトを自由自在に爆速で仕上げる、汎用レイアウト術をご紹介します。
コピペで使えるJS未使用のシンプルなCSSカルーセルスライダー
限られたスペースに複数の情報を載せたい場合、非常に重宝するのがスライドショーとも呼ばれているカルーセルスライダーです。
JavaScriptで実装するのが一般的で「bxSlider」「slick」「Swiper」といったJSライブラリ (JSプラグイン) がよく利用されています。
しかし、これらのJSライブラリは多機能な反面、ファイルサイズが大きく、ウェブサイト内のごく限られた箇所にだけ使用したいといった場合には、利用しづらいのではないでしょうか？
そこで、今回はコピペできるCSSカルーセルスライダーを紹介します。
background-attachment:fixedが効かないブラウザ用パララックス
iOS (iPhoneやiPad) のブラウザ「Safari」で、背景画像を固定してスクロールしないようにするCSSプロパティのbackground-attachment:fixedが効かない場合があります。
background-attachment:fixedを効果的に使用すると、複数の画像がスクロールによって入れ替わるパララックス (視差) などの面白い演出が可能になります。
今回は、background-attachment:fixedを使用せず、このパララックスを実現する方法を紹介します。