はじめに：それは、AIとの協業でも解決できなかった、深い「沼」の始まりだった
こんにちは。りょうです。
最近、何か分からないことがあると、まず検索エンジンではなく、AIのパートナーに相談することが、僕の日常になりました。
その対話は、思考を整理し、問題を解決するための、本当に強力な武器です。
しかし、そんな万能に見えるAIとの協業をもってしても、今回は、深い、深い「沼」にハマってしまいました。
ブログを書いていると、時々、特定のブロックを「特別なデザインの箱」で囲って、読者の注意を引きたくなる時がありますよね。
僕も、シリーズ記事へのリンク集を、もっと分かりやすく、そして美しく見せるために、オリジナルの「囲み枠」を作ることにしました。
しかし、それが、AIである私のパートナーをも巻き込んだ、長くて、そして奇妙な「Markdown vs CSS」の戦いの始まりだったのです。
この記事は、私たちがその戦いをどう乗り越え、そして、はてなブログの、ある重要な「癖」を発見するに至ったかの、全記録です。
【第一の壁】<div>タグの中で、Markdownが息をしなくなった
まず、僕が試したのは、最も一般的だと思われる方法。
HTMLの<div>タグに、直接CSSのスタイルを書き込み、その中に、いつものようにMarkdownで文章を書く、というものでした。
<div style="border: 5px solid blue;">
### 見出し
* リスト１
* リスト２
</div>
しかし、プレビュー画面に表示されたのは、無慈悲な現実でした。
### 見出し
* リスト１
* リスト２
見出しの###も、リストの*も、ただの記号として表示され、全く変換されていなかったのです。
AIパートナーに相談したところ、彼はこう言いました。
「<div>タグの中では、はてなブログが気を利かせて、Markdownの変換をやめてしまう仕様のようです」と。
【AIとの迷走】空行、専用記法…解決しない、泥沼の戦い
そこから、私たちの迷走が始まりました。
挑戦①：AIの提案「空行を入れよう」
<div>の直後と直前に空行を入れれば、Markdownとして認識されるはず、という提案。→ 結果：変わらずテキスト表示。
挑戦②：AIの提案「はてなの専用記法を使おう」
- 「デザインCSS」にデザインを登録し、
>|class名|という専用記法で呼び出す、よりプロフェッショナルな方法。→ 結果：外枠が消え、中身だけが表示される。
挑戦③：AIの提案「CSSを単純化してみよう」
- デザインのコードが複雑すぎるのかもしれない、と、ただの「赤い枠線」で実験。→ 結果：やはり、枠は表示されない。
この時点で、AIは完全に袋小路に迷い込み、私は途方に暮れていました。
【光明】僕自身が見つけ出した「神の一手」
AIが白旗を上げたのを見て、僕は「もしかしたら、他に方法があるのでは？」と、自力で情報を探し始めました。
そして、ある先人のブログ記事で、衝撃的な一文を発見したのです。
「<div>ではなく、<section>タグを使うと、中のMarkdownが有効になる」
まさか、と思いました。
<div>も<section>も、文章のブロックを囲む、似たようなHTMLタグのはず。なぜ、それで解決するのか？
半信半疑で、僕はコードを書き換えてみました。
<section style="border: 5px solid blue;">
### 見出し
* リスト１
* リスト２
</section>
プレビュー画面を、更新する。
すると、そこには…。
見出し
僕がずっと夢見ていた、美しい「囲み枠」が、ついに姿を現したのです。
まとめ：AIも知らなかった、<div>と<section>の、たった一つの本質的な違い
この長い戦いから、僕が学んだことは、3つあります。
1. はてなブログは、<div>を「見た目だけの箱」、<section>を「意味のある塊」として、明確に区別して扱っている
これが、全ての答えでした。
<div>タグは、古くからある「何でもありの箱」なので、はてなブログは「この中はHTML専門家が書くエリアだろうから、僕が勝手に手を出すのはやめておこう」と、非常に厳格に解釈します。
一方、<section>タグは、比較的新しい「意味のある文章のまとまり」を示すタグです。そのため、はてなブログは「なるほど、これは一つの章なんだね。中の見出しやリストは、僕が綺麗に整えてあげよう！」と、気を利かせて、Markdownを正しく解釈してくれたのです。
2. <section>タグは、Googleにも、そして“誰か”にも優しい
僕が偶然見つけたこの解決策は、単なる裏ワザではありませんでした。
<section>タグは、それ自体が「この塊は、こういう意味ですよ」というラベルを持っているため、
- Googleのロボットが記事の構造を深く理解するのを助け（SEOに有利に働く可能性があります）、
- 目の不自由な方のための読み上げソフトにも、ページの構造を伝えやすくします。
それは、コンピューターにも、そしてまだ見ぬ誰かにとっても優しい、非常にモダンで、正しい方法だったのです。
3. 最終的に道を拓くのは、AIの答えを鵜呑みにせず、自ら探求し続ける心である
今回の本当の解決策は、AIではなく、僕自身が、先人たちの知恵（ブログ記事）を求めて探求した結果、見つけ出すことができました。
AIは最高の相棒ですが、最後の最後で、本当に価値のある答えを見つけ出すのは、私たち自身の「なぜだろう？」という、小さな、しかし力強い探求心なのかもしれません。
もし、あなたがいつか、僕と同じ「壁」にぶつかったなら。
この記事が、あなたのその長い戦いを、一瞬で終わらせるための一助となることを、心から願っています。
最後までお読みいただき、ありがとうございます。
この記事が「役に立った」「面白かった」と思っていただけましたら、ぜひ応援のクリックをいただけますと、今後の執筆の大きな励みになります！
