主にブログ記事などでよく目にする「目次」ですが、手作業で作る場合、見出しなどに ID を設定して、その ID に対してリンクを設定するという作業を何度も行う必要があります。また、コンテンツを手直しした際には、作り直す必要もでてきます。
そこで今回は、目次を自動生成するJavaScriptコードとその使い方を紹介します。
主にブログ記事などでよく目にする「目次」ですが、手作業で作る場合、見出しなどに ID を設定して、その ID に対してリンクを設定するという作業を何度も行う必要があります。また、コンテンツを手直しした際には、作り直す必要もでてきます。
そこで今回は、目次を自動生成するJavaScriptコードとその使い方を紹介します。
CSS で漫画のような吹き出しを作る際、三角形の部分をどう実現するかが問題になります。
よくある方法なのが、背景色を設定した要素に、擬似要素で作った同じ背景色の三角形を組み合わせるというものです。
そこで今回は、擬似要素を使わない、吹き出しの作り方を紹介しようと思います。
テーブル (表) をスマホなどの小さい画面で表示させた場合に、テーブルセルが小さくなりすぎたり、内容が溢れてしまうのを防ぐため、スクロールできるようにするのが一般的だと思います。
しかし、スクロールバーが表示されない環境では、スクロールできるどうかが分かりづらい場合があります。
そこで今回は、スクロールできることを明示する「スクロールヒント」を CSS のみで実装する方法を紹介します。
円グラフや棒グラフをウェブページに載せる際、皆さんはどうしていますか?
Photoshop などで画像として作り、img要素で表示しますか? それとも、SVG で作りますか? あるいは、canvas要素と JavaScript を組み合わせて描画しますか?
様々な方法が考えられますが、セマンティックに、かつ手軽に作りたいのであれば、table要素を CSS でスタイリングする方法がベストかもしれません。
figure要素とfigcaption要素をいい感じに表示させるために、先人たちは苦労してきました。
WordPress の場合、キャプション付き画像 (wp-caption) では、figure要素のstyle属性にwidthプロパティを設定しています。画像ブロック (wp-block-image) では、figure要素をtable要素として、figcaption要素をcaption要素として扱うという、裏技的なテクニックを使用しています。
今回は、figcaption要素を中央に配置して、その最大幅を兄弟要素に揃える、正攻法で汎用的な方法を紹介します。
ソフトウェアのUIによくある、複数のコンテンツをコンパクトに表示できるタブ切り替えを、JavaScriptは使わず、HTMLとCSSだけで作る方法を紹介します。
CSSプロパティの background、box-shadow、text-decoration の3つから、文字にマーカー風のアンダーラインを引くための3種類のコードと、それぞれのメリット・デメリットを解説しています。
ウェブページのリンク (a要素) に発信したい電話番号を設定した電話番号リンクは、通話機能があるタブレットやスマホ等の端末から電話を受け付けたい場合に有用です。
しかし、通話機能を持たないパソコン等の端末では、無用なだけでなく、ユーザビリティを低下させる可能性もあります。
今回は、端末に応じて電話番号リンクの有効・無効を切り替えるCSSコードを紹介します。
ブラウザの表示領域 (ビューポート) に応じてフォントサイズを変化させる「流体タイポグラフィ (Fluid Typography)」とも呼ばれるレスポンシブな可変フォントサイズを簡単に実装するためのHTMLコードとCSSコードを紹介します。
多くの情報をコンパクトにまとめられるハンバーガーメニュー (ドロワー) ですが、そこで使用される三本線のハンバーガーボタンの作り方は多くあります。
今回は、HTMLとCSSのコード量が少ない、シンプルなハンバーガーボタンの作り方を紹介します。