CSS Stockを表示するスマートフォンのモック
デザインの例1デザインの例2デザインの例3

HTML・CSSでつくるおしゃれな目次のデザイン3選

ブログなどで記事内に設置することの多い「目次」。コンテンツの要約だけでなくページ内リンクとしての役割も持つなど、ユーザビリティをグッと向上させてくれる要素です。今回はそんな目次のHTML・CSSによるデザインをまとめました。開閉機能のON・OFFに対応しており、どれもコピペだけで取り入れることが可能となっています。

シンプルな目次

灰色背景 & 枠線

灰色背景 & 枠線

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

とてもシンプルな、由緒正しきデザインの目次です。aタグのスタイルに手を加えないことによって、各見出しがクリック可であることが直感的に伝わりやすくなっています。

フラットデザイン & 枠線

フラットデザイン & 枠線

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類

タイトルの背景と枠線の色を統一した、可愛らしい目次です。ぜひご自身のサイトのテーマカラーを基調色として設定してみてください。

フラットデザイン

フラットデザイン

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1

デザインを調整する

  • 開閉機能
  • タイトルのアイコン
  • マーカーの種類