【Markdown】Md記法のすべてをここに集めてみた
2024-08-17
2024-08-17
Markdownのすべてを集めました。このガイドでは、最近話題のMarkdown記法について、基本的な使い方から応用的な使い方までをわかりやすく解説しています。 毎回記法を探すのが面倒だった、、のでまとめてみました。
見出し
Markdownでは、#の数で見出しレベルを指定します。
-
Markdown記法
# 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 -
HTML出力
<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
段落と改行
段落は空行で区切ります。単純な改行は、行末に2つのスペースを入れるか、<br>タグを使用します。
-
Markdown記法
これは1つ目の段落です。 これは2つ目の段落です。 これは行末に2つスペースがある行です。 次の行です。 これは<br>タグを使った改行です。 -
HTML出力
<p>これは1つ目の段落です。</p> <p>これは2つ目の段落です。</p> <p>これは行末に2つスペースがある行です。<br> 次の行です。</p> <p>これは<br>タグを使った改行です。</p>
強調
イタリック体、太字、打ち消し線を使用できます。
-
Markdown記法
*イタリック* _イタリック_ **太字** __太字__ ***太字かつイタリック*** ~~打ち消し線~~ -
HTML出力
<em>イタリック</em> <em>イタリック</em> <strong>太字</strong> <strong>太字</strong> <strong><em>太字かつイタリック</em></strong> <del>打ち消し線</del>
4. リスト
順序なしリストと順序付きリストを作成できます。
-
Markdown記法
- 項目1 - 項目2 - サブ項目A - サブ項目B 1. 番号付き項目1 2. 番号付き項目2 1. サブ番号付き項目A 2. サブ番号付き項目B -
HTML出力
<ul> <li>項目1</li> <li>項目2 <ul> <li>サブ項目A</li> <li>サブ項目B</li> </ul> </li> </ul> <ol> <li>番号付き項目1</li> <li>番号付き項目2 <ol> <li>サブ番号付き項目A</li> <li>サブ番号付き項目B</li> </ol> </li> </ol>
リンク
Markdownでは、リンクを簡単に作成できます。リンクには2つのタイプがあり、それぞれの使い方を紹介します。
インラインリンク
インラインリンクは、リンクテキストとURLを1行で記述する方法です。シンプルにリンクを作成したい場合に便利です。
-
Markdown記法
[リンクテキスト](https://www.example.com)[リンクテキスト]：クリックされる部分に表示されるテキスト(https://www.example.com)：リンク先のURL
-
HTML出力
<a href="https://www.example.com">リンクテキスト</a>
参照リンク
参照リンクは、リンクテキストとリンク先URLを別々に定義する方法です。複数の場所で同じリンクを使いたいときや、URLを本文から分離したいときに便利です。
-
Markdown記法
[リンクテキスト][1] [1]: https://www.example.com "オプションのタイトル"[リンクテキスト][1]：リンクテキストにリンクID[1]を設定[1]: https://www.example.com "オプションのタイトル"：リンクID[1]に対するリンク先URLとオプションのタイトルを定義
-
HTML出力
<a href="https://www.example.com" title="オプションのタイトル">リンクテキスト</a>
インラインリンクと参照リンクの違い
- インラインリンク リンク先をその場で指定するため、短い記事や単発のリンクを使用する際に便利です。
- 参照リンク リンク先を文末や別の場所で定義できるので、同じリンクを複数回使う場合や、URLが長くなりがちな場合に便利です。
参照リンクの活用
もし同じリンクを複数箇所で使いたい場合、参照リンクを使うと便利です。
この記事の詳細は[こちら][1]をご覧ください。さらに詳しく知りたい方は[こちら][1]をご参照ください。
[1]: https://www.example.com "詳細ページ"
これにより、URLを一箇所にまとめて管理でき、本文がすっきりします。
画像
画像の挿入も、リンクと似た構文で行います。
-
Markdown記法
 -
HTML出力
<img src="https://example.com/image.jpg" alt="代替テキスト" title="オプションのタイトル">
引用
引用は > を使用します。
-
Markdown記法
> これは引用です。 > > > これはネストされた引用です。 -
HTML出力
<blockquote> <p>これは引用です。</p> <blockquote> <p>これはネストされた引用です。</p> </blockquote> </blockquote>
コード
インラインコードとコードブロックを作成できます。
-
Markdown記法
def hello_world(): print("Hello, World!") -
HTML出力
<p>インラインの<code>コード</code>です。</p> <pre><code>4スペースインデントのコードブロック </code></pre> <pre><code class="language-python">def hello_world(): print("Hello, World!") </code></pre>
水平線
3つ以上の*、-、_で水平線を作成します。
-
Markdown記法
*** --- ___ -
HTML出力
<hr> <hr> <hr>
テーブル
テーブルは|と-を使って作成します。
-
Markdown記法
| 列1 | 列2 | 列3 | |-----|:---:|----:| | 左寄せ | 中央寄せ | 右寄せ | | データ1 | データ2 | データ3 | -
HTML出力
<table> <thead> <tr> <th>列1</th> <th align="center">列2</th> <th align="right">列3</th> </tr> </thead> <tbody> <tr> <td>左寄せ</td> <td align="center">中央寄せ</td> <td align="right">右寄せ</td> </tr> <tr> <td>データ1</td> <td align="center">データ2</td> <td align="right">データ3</td> </tr> </tbody> </table>
チェックボックス
タスクリストやチェックボックスを作成できます。
-
Markdown記法
- [ ] 未完了のタスク - [x] 完了したタスク -
HTML出力
<ul> <li><input type="checkbox" disabled> 未完了のタスク</li> <li><input type="checkbox" checked disabled> 完了したタスク</li> </ul>
まとめ
以上がMarkdownの主要な記法とその- HTML出力です。これらの要素を組み合わせることで、豊かで構造化された文書を簡単に作成できます。Markdownの美しさは、その簡潔さと可読性にあります。 実際の使用では、これらの記法を自由に組み合わせて、より複雑な構造を持つ文書を作成することができます。また、多くのMarkdownプロセッサは追加の拡張機能をサポートしており、さらに高度な機能を利用できる場合もあります。 Markdownを使いこなせば、効率的に美しい文書を作成できるようになります。ぜひ、実際に試してみてください！