Mac好きのアラフォーweb製作者ののんびりブログ

Mac好き、iPhone好きのアラフォーのWEB製作者がその日覚えたこと、気がついたことを備忘録的に淡々とつづるブログです。自分が忘れないために残したものが誰かのお役に立てれば…。

Markdownチートシート「リスト要素」編

だんだんとMarkdownの書き方もわかってきましたが、いやいやまだあるだろうということで、もしかしたら前回の「引用 」よりも使うことの多い「リスト」要素の書き方について。

htmlで言うリスト要素には、

  • 項目の順序に特に意味がなく「並列」であることを示す<ul>
  • 手順など、順序がある項目を示す際に使われる<ol>
  • 辞書や用語集のような「用語」と「定義」の組み合わせを記述するときの<dl>

が用意されています。

ちょっと長くなっちゃったので目次です。

順序のないリスト<ul>

どれもよく使われると思いますが、まずは<ul>から。

Daring Fireball: Markdown Syntax Documentationによると、

Unordered lists use asterisks, pluses, and hyphens — interchangably — as list markers:

つまり、順序なしリストは「アスタリスク」、「プラス」、「ハイフン」をリストマーカーとして使用。
しかもこれらは、互換的に使えるようです。

要は*でも+でも-でも良いということのようです。

ほんまかいな…、とさっそく書いてみると

* 砂糖
* 塩
* 酢
* 醤油
* 味噌

と書いても、

+ 砂糖
+ 塩
+ 酢
+ 醤油
+ 味噌

と書いても、

- 砂糖
- 塩
- 酢
- 醤油
- 味噌

と書いても良いということのようですね。

では、表示させてみよう。

行頭を*にした場合。

  • 砂糖
  • 醤油
  • 味噌

行頭を+にした場合

  • 砂糖
  • 醤油
  • 味噌

行頭を-にした場合

  • 砂糖
  • 醤油
  • 味噌

確かに、どれも同じ表示になりました。

同じことをするのに書き方が3種類用意されているのも面倒な感じもするので、キーボードにテンキーのないMacBook Proを普段使っている私的にはshiftキーを押さなくても済む-として覚えておこうかな、と思いましたが、ちょっと3つも用意されている意味を考えたところ…。

入れ子にしたときにわかりやすいかも!ということに気がつきました。

「大分類」「中分類」「小分類」のような感じで階層がある場合に使う入れ子の要素は

<ul>
    <li>大分類1
        <ul>
            <li>中分類1
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
            <li>中分類2
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
            <li>中分類3
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>大分類2
        <ul>
            <li>中分類1
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            <li>中分類2
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
            <li>中分類3
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>大分類3
        <ul>
            <li>中分類1
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
            <li>中分類2
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
            <li>中分類3
                <ul>
                    <li>小分類1</li>
                    <li>小分類2</li>
                    <li>小分類3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

みたいな書き方をしますが、これをMarkdown的にやった場合に、

* 大分類1
    + 中分類1
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類2
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類3
        - 小分類1
        - 小分類2
        - 小分類3
* 大分類2
    + 中分類1
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類2
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類3
        - 小分類1
        - 小分類2
        - 小分類3
* 大分類3
    + 中分類1
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類2
        - 小分類1
        - 小分類2
        - 小分類3
    + 中分類3
        - 小分類1
        - 小分類2
        - 小分類3

と書いてみてはどうだろう。

すると、

  • 大分類1
    • 中分類1
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類2
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類3
      • 小分類1
      • 小分類2
      • 小分類3
  • 大分類2
    • 中分類1
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類2
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類3
      • 小分類1
      • 小分類2
      • 小分類3
  • 大分類3
    • 中分類1
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類2
      • 小分類1
      • 小分類2
      • 小分類3
    • 中分類3
      • 小分類1
      • 小分類2
      • 小分類3

なりました。ちゃんと入れ子に♪

もちろん「入れ子」にしたい時には

* 大分類1
    * 中分類1
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類2
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類3
        * 小分類1
        * 小分類2
        * 小分類3
* 大分類2
    * 中分類1
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類2
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類3
        * 小分類1
        * 小分類2
        * 小分類3
* 大分類3
    * 中分類1
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類2
        * 小分類1
        * 小分類2
        * 小分類3
    * 中分類3
        * 小分類1
        * 小分類2
        * 小分類3

と書いても同様の表示になるので、*+そして-の3つとも覚えたり、使い分けをしなくてもいいのかもしれませんが、書きながらどれが「中分類」で、どれが「小分類」なのか、一目見てわかるように書けるところに3つも用意されているのかもしれませんね。

リスト中の「入れ子」の書き方

既に、上の解説の部分で書いてしまった感があるのですが、リストを入れ子にしたい場合には行頭に入れる記号は問わず、インデントしてあげることで実現できます。

* 大分類 // 行頭のインデントなし
    * 中分類 // 行頭のインデントを`tab`キー1つ
        * 小分類 // 行頭のインデントを`tab`キー2つ

と書くことで、

  • 大分類 // 行頭のインデントなし
    • 中分類 // 行頭のインデントをtabキー1つ
      • 小分類 // 行頭のインデントをtabキー2つ

という風にリスト中の入れ子を表すことができます。

項目に順序のあるリスト<ol>

項目に順序がある場合のリストは

Ordered lists use numbers followed by periods:

数字の後に「ピリオド」をつければ良いようです。

1. 具材を切る
2. 具材を煮込む
3. 盛り付ける

のように書けば、

  1. 具材を切る
  2. 具材を煮込む
  3. 盛り付ける

と手順を示すような数字がつきました。

ここで重要なのは、「数字プラスピリオドプラススペース or インデント」という書き方が上から順に1から始まる「順序のあるリスト」と解釈されるので、

1. 具材を切る
1. 具材を煮込む
1. 盛り付ける

と書いても

  1. 具材を切る
  2. 具材を煮込む
  3. 盛り付ける

となり、

3. 具材を切る
1. 具材を煮込む
8. 盛り付ける

と書いた場合でも

  1. 具材を切る
  2. 具材を煮込む
  3. 盛り付ける

と解釈されるという点です。

行頭に、「数字プラスピリオドプラススペース or インデント」という書き方をした場合に、それすなわち「順序のあるリスト」として変換されるので、書かれた「数字」のとは関係なく上から順に番号が振られる、という点です。
数字の順番をあべこべにする用途があまり思いつきませんが、なにはともあれ、行頭に、「数字プラスピリオドプラススペース or インデント」としてその後に項目を続ければ、「<ol>で表される順序のある」リストになる、ということで少し注意が必要です。

「用語」と「定義」の組み合わせ<dl>

用語集や辞書的な記述をしたいときに使う、<dl>要素。
作るサイトによっては頻繁に使う要素ですが、使わないときは全く…。

そんな<dl>要素のMarkdown的な書き方は…。

「無い。」

いくら探してもないんです。
tumblrで使えるMarkdown記法には用意されているようなのですが…。
参照:Markdownで定義済みリスト(dl、dt、dd) - Read Me Later!

要するに標準のMarkdownでは用意されていない…、ということのようです。

では、用意されていない要素をMarkdownの中で使うにはどうしたらいいのか?

見つけた答えが、Markdown中で普通にhtmlを書く。

そのまんまのような気もしますが、現状この手法をとれば良いようです。

<dl>
    <dt>ul</dt>
    <dd>ulタグはUnordered Listの略で、順序のないリストを表示する際に使用します。 リストの各項目はliタグを用いて記述します。  
        また、順序のあるリスト表示にはolタグを使用します。</dd>
    <dt>ol</dt>
    <dd>olタグはOrdered Listの略で、順序のあるリストを表示する際に使用します。 リストの各項目はliタグを用いて記述します。 また、順序のないリスト表示にはulタグを使用します。  
olタグではtype属性により、算用数字(1,2,3,...)、アルファベット小文字(a,b,c,...)、 アルファベット大文字(A,B,C,...)、ローマ数字小文字(ⅰ,ⅱ,ⅲ,...)、 ローマ数字大文字(Ⅰ,Ⅱ,Ⅲ,...)を指定することができます。 また、start属性により開始番号を指定できます。 </dd>
    <dt>dl</dt>
    <dd>dlはDefinition Listの略で、&lt;dl&gt;~&lt;/dl&gt;の範囲が定義リストであることを表します。 定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。  
    &lt;dt&gt;~&lt;/dt&gt;に定義する用語を記述し、 &lt;dd&gt;~&lt;/dd&gt;にその用語の説明を記述します。  
    これら定義語と定義説明のセットは&lt;dl&gt;~&lt;/dl&gt;の中に複数並べることができます。  
compact属性は、定義語と定義説明のセットの表示を小さく表示するよう指定するもので、用語が短いものである場合に限り有効です。 </dd>
</dl>

と普通に書いてあげれば、以下のようになります。

ul
ulタグはUnordered Listの略で、順序のないリストを表示する際に使用します。 リストの各項目はliタグを用いて記述します。 また、順序のあるリスト表示にはolタグを使用します。
ol
olタグはOrdered Listの略で、順序のあるリストを表示する際に使用します。 リストの各項目はliタグを用いて記述します。 また、順序のないリスト表示にはulタグを使用します。 olタグではtype属性により、算用数字(1,2,3,...)、アルファベット小文字(a,b,c,...)、 アルファベット大文字(A,B,C,...)、ローマ数字小文字(ⅰ,ⅱ,ⅲ,...)、 ローマ数字大文字(Ⅰ,Ⅱ,Ⅲ,...)を指定することができます。 また、start属性により開始番号を指定できます。
dl
dlはDefinition Listの略で、<dl>~</dl>の範囲が定義リストであることを表します。 定義リストとは、定義する用語とその用語の説明を一対にしたリストのことです。 <dt>~</dt>に定義する用語を記述し、 <dd>~</dd>にその用語の説明を記述します。 これら定義語と定義説明のセットは<dl>~</dl>の中に複数並べることができます。 compact属性は、定義語と定義説明のセットの表示を小さく表示するよう指定するもので、用語が短いものである場合に限り有効です。

参照:HTMLクイックリファレンス

結論から言うと、<dl><dt><dd>で構成される定義型のリスト要素は、Markdown的な書き方は特になく、用意されていない要素は、そのままhtmlタグを書いてあげることで実現出来る。
ということのようです。

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)

改訂第6版 HTML&スタイルシート ポケットリファレンス (POCKET REFERENCE)