読者のためのユーザビリティ向上術！HTMLで実装する「折りたたみ」と「ページ内リンク」
ブログを運営している皆さん、こんにちは！
「記事が長くなってしまって、読者が読みたい情報を見つけにくいかも…」
「Q&A形式のコンテンツを、もっとスッキリ見せたい！」
そんなお悩みはありませんか？
今回は、HTMLコードを少し追加するだけで、ブログの利便性をぐっと向上させる2つの基本的なテクニック、「折りたたみ（アコーディオン）」と「ページ内リンク（アンカーリンク）」をご紹介します。プログラミングの知識がなくても大丈夫。コードをコピーして貼り付けるだけで、すぐにご自身のブログで試せます！
1. クリックで開閉！コンテンツを「折りたたみ」にする方法
長い文章や補足情報、Q&Aなどをスッキリと見せたいときに便利なのが「折りたたみ」機能です。最初は見出しだけが見えていて、クリックすると詳細な内容が表示されるアレです。
現在、この機能を実装する最も簡単で推奨されている方法は、HTMLの<details>タグと<summary>タグを使うことです。JavaScriptは不要です！
サンプルコード
まずは完成形を見てみましょう。このコードをそのままブログのHTML編集画面に貼り付けてみてください。
<!-- 見た目を整えるためのCSS（デザイン） -->
<style>
/* 折りたたみ要素全体のデザイン */
.custom-details {
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 1em; /* 要素間の余白 */
background-color: #f9f9f9;
}
/* クリックする見出し部分のデザイン */
.custom-details summary {
font-weight: bold;
padding: 1em;
cursor: pointer;
position: relative;
padding-left: 2.5em; /* アイコン用のスペース */
}
/* ブラウザ標準の▶マーカーを消す */
.custom-details summary::-webkit-details-marker,
.custom-details summary::marker {
display: none;
}
/* 「+」アイコンをCSSで作成 */
.custom-details summary::before {
content: "+";
font-size: 1.5em;
color: #3498db;
position: absolute;
left: 0.8em;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s; /* アニメーション効果 */
}
/* 開いたときに「+」を「-」に変える */
.custom-details[open] > summary::before {
content: "-";
}
/* 折りたたまれている文章部分のデザイン */
.custom-details .details-content {
padding: 0 1.5em 1.5em 1.5em;
border-top: 1px solid #eee;
}
</style>
<!-- ここからがHTML本体です -->
<details class="custom-details">
<summary>
ここをクリックすると詳細が開きます（見出し）
</summary>
<div class="details-content">
<p>
ここに折りたたみたい文章を入力します。
</p>
<p>
段落を分けたり、画像を入れたりすることも可能です。<br>
この部分は、普段は隠れていて、上の見出しをクリックしたときにだけ表示されます。
</p>
</div>
</details>
<details class="custom-details">
<summary>
Q&Aなど、複数設置することもできます
</summary>
<div class="details-content">
<p>
必要な数だけ、この<code><details></code>ブロック全体をコピーして使ってください。
</p>
</div>
</details>コードの解説と使い方
<details>: 折りたたみ要素全体を囲むタグです。この中に見出しと詳細内容を入れます。<summary>: 常に表示される見出し部分です。このタグに書いたテキストがクリックする場所になります。<div class="details-content">: 折りたたんで隠しておきたい文章や画像など、詳細なコンテンツをこの中に入れます。<style>: 見た目を整えるためのCSSです。アイコンを「+」や「-」にしたり、枠線をつけたりしています。デザインが不要な場合は<style>部分は削除しても機能します。
カスタマイズ方法は簡単です。<summary>タグの中のテキストをあなたの好きな見出しに、<div class="details-content">の中身を表示したい文章や画像に書き換えるだけです。
追記 HTMLの<details>タグに open という属性を追加するかどうかで、デフォルトの開閉状態を簡単に制御できます。最初から開いておく → <details open> 最初から閉じておく → <details>
2. ページ内の特定箇所へひとっ飛び！「ページ内リンク」の作り方
記事が長くなったとき、冒頭に目次を置いて、クリックすると目的の章にジャンプできるようにすると、読者は非常に助かります。これが「ページ内リンク」です。
仕組みは「移動元」と「移動先」の2つを設定するだけです。
サンプルコード
移動元（クリックするリンク）
まず、目次など、クリックする側のリンクを用意します。href属性に#から始まる名前（ID）を指定します。
<!-- 目次の例 -->
<ul>
<li><a href="#section1">1. 最初の見出しへ</a></li>
<li><a href="#section2">2. 次の見出しへ</a></li>
<li><a href="#qa">3. Q&Aコーナーへ</a></li>
</ul>移動先（ジャンプしてくる場所）
次に、ジャンプ先の見出しや段落に、移動元で設定した#の後の名前と同じidを付けます。
<!-- ジャンプ先の例 -->
<h3 id="section1">1. 最初の見出し</h3>
<p>ここが最初のセクションの内容です。</p>
<p>...</p>
<h3 id="section2">2. 次の見出し</h3>
<p>ここが次のセクションの内容です。</p>
<p>...</p>
<h3 id="qa">3. Q&Aコーナー</h3>
<p>ここがQ&Aコーナーの内容です。</p>
<p>...</p>使い方のポイント
- 移動元の
href="#名前"と移動先のid="名前"は、半角英数字で完全に一致させてください。 idは、1ページ内で同じ名前を複数使うことはできません。必ずユニークな（唯一の）名前を付けてください。- 見出しタグ（
h2,h3）だけでなく、段落タグ（p）など、ほとんどのHTMLタグにidを付けることができます。
