Markdown記法は、div タグなどのブロック要素内で、機能しないのが仕様です。
しかし、スタイルを適用したいという様な、本来 div タグで実装するような使い方は、したくなるものです。
Markdown記法を効かせたままスタイルなどを適用する方法を見つけたので紹介します。
目次
■div タグの代わり
用途として一番多いと思われるのは、Markdown で書かれた複数行の文章にスタイルを適用する場合だと思います。
そのような場合、普通は div タグで囲みスタイルを指定すると思います。
しかし、div タグはブロック要素なのでその中の文章には Markdown が効きません。
端的に結論から、div タグの代わりに section タグ を使用します。
今のところ、section タグは Markdown が効いています。
Markdown の仕様が変わると動作が変わるかもしれません。
仕様が見つけられませんでした。仕様変更等で動作が変わる可能性があることをご承知おきください。
□はてなブログの場合
『Python で使える Python-Markdown1というパーサーでは、ブロック要素に Markdown を効かせたい場合に「markdown="1"」2という属性を付加すると有効になります。同様の機能がありませんか？』
と「はてな」に問い合わせてみました。
回答は、『似たような機能はない』との事でした。
はてなブログの場合も同様の対応が必要です。
ここから、section タグを使ったいくつかの例を紹介します。
■色を変える
複数の行をまとめて色を変える場合について考えてみます。
□style 属性を使った場合
例１ div
ここの複数行の色を青くします。 <div style="color: blue;"> ここから 途中に **強調** があります。 ここまで </div>
▶色は変わりますが、改行・強調が効いていません。
div内のmarkdownが効いていません。
【結果】
ここの複数行の色を青くします。
例２ section
ここの複数行の色を青くします。 <section style="color: blue;"> ここから 途中に **強調** があります。 ここまで </section>
▶色も改行も強調も動作しています。
section内のmarkdownが効いています。
【結果】
ここの複数行の色を青くします。
途中に 強調 があります。
ここまで
■リストに枠を付ける
リストを枠線で囲う場合について考えてみます。
□style 属性を使った場合
例１ div
ここのリストを囲みます。 <div style="border: 3px solid #ddd;"> - ここから - ここまで </div>
▶枠は出ますが、リストにしたい内容が横に列挙されてしまいます。
div内のmarkdownが効いていません。
【結果】
ここのリストを囲みます。
例２ section
ここのリストを囲みます。 <section style="border: 3px solid #ddd;"> - ここから - ここまで </section>
▶枠が出てリスト表示もされています。
section内のmarkdownが効いています。
【結果】
ここのリストを囲みます。
- ここから
- ここまで
□CSSを使った場合
同様の内容を CSS を作成し、 class 属性で指定します。
例３ section+css
次のようなCSSがある場合
.temp { border: 3px solid #ddd; }
ここのリストを囲みます。 <section class="temp"> - ここから - ここまで </section>
▶枠が出てリスト表示もされています。
section内のmarkdownが効いています。
【結果】
ここのリストを囲みます。
- ここから
- ここまで
□CSSで隣接兄弟セレクタを用いる場合
CSSのセレクタには隣接する兄弟を指定するものがあります。
リストなどのように全体が ul タグで囲まれているようなものであれば、隣接兄弟セレクタを使用してスタイルを適用することができます。
そのような CSS を作成すれば、section タグで囲わなくても実現が可能です。
例４ div+css
次のようなCSSがある場合
.temp1 + ul { border: 3px solid #ddd; }
ここのリストを囲みます。 <div class="temp1"> - ここから - ここまで
▶枠が出てリスト表示もされています。
リストがブロック要素内ではないのでmarkdownが効いています。
【結果】
ここのリストを囲みます。
■段組み
段組みもできるようになります。
section タグを使用した場合だけ紹介します。
□style 属性を使った場合
例 section
<section style="columns: 2;"> こちらは左 - リスト① - リスト② こちらは右 - 箇条書き① - 箇条書き② </section>
- リスト①
- リスト②
こちらは右
- 箇条書き①
- 箇条書き②
■sectionタグについて
sectionタグについては、次のように説明されてます。
HTML の
<section>要素は、文書の自立した一般的なセクション (区間) を表します。そのセクションを表現するより意味的に具体的な要素がない場合に使用します。少数の例外を除いて、セクションには見出しを置いてください。 MDN Web Docs
また、次のような使用上の注意があります。
スタイル付けのためのラッパーとしてのみ使用する場合は、
<div>を使用してください。大まかに言うと、<section>は文書のアウトラインの中に論理的に現れるべきです。 MDN Web Docs
紹介した使い方は推奨される使い方ではないのかもしれません。
しかし、複数行に渡ってスタイルを適用したい場合というのは、セクションと言えなくもないと思います。
私の場合、他に良い方法が見つからないので、背に腹は代えられず使用しています。
■Markdownの仕様について
Daring Fireballに次のような記述があります。
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
Daring Fireball: Markdown Syntax Documentation
翻訳すると：
Markdownフォーマット構文はブロックレベルのHTMLタグ内では処理されないことに注意してください。 たとえば、HTMLブロック内でMarkdownスタイルの強調を使用することはできません。
個人的には、自分がやりたいことが現在の仕様でできないので、何とかならないのかなぁと思っています。
■さいごに
section タグについて、HTML の仕様としては、スタイル付けのためのラッパーとしての使用は推奨していないようです。
ですが、「文書の自立した一般的なセクション」としてスタイル付けすることもあるでしょうから、使用自体は問題ないと思っています。
とはいえ、今のまま使い続けられることを祈っています。
はてなブログで Markdown 記法を選択して記事を書いています。
読んでもらえるブログにするには、ある程度装飾する必要があると思います。
section タグを使用して、Markdown で書いた文章にも装飾を施していきたいと思っています。
■参考
- Markdown解説：Markdownとは · 日本語Markdownユーザー会
- Markdown解説：Markdown記法はdivなどのブロック要素内では動作しない - はてなブログカスタマイズメモ
- Markdown解説：はてなブログにおいて，Markdown記法で書いた記事をCSSで２段組にする． - Qiita
- Markdown仕様：Daring Fireball: Markdown Syntax Documentation
投稿：2021-08-30
