コンテンツにスキップ

Markdown

出典: フリー教科書『ウィキブックス（Wikibooks）』

Markdown は、軽量で簡単に学習できるマークアップ言語です。文章を記述する際にシンプルな記法を使用し、HTMLや他のフォーマットへの変換を容易にします。主にブログ、ドキュメント、READMEファイル、技術文書で使用されます。本ハンドブックでは、Markdownの基本記法から応用テクニックまで幅広く解説します。

特徴

[編集]

Markdownの主な特徴は次の通りです：

  • シンプルな記法：記号を使った直感的な書き方。
  • 可読性：HTMLのようなタグではなく、プレーンテキストとしても読める。
  • 多用途：ブログ、ドキュメント、電子書籍など幅広く使用可能。
  • 拡張性：Markdown拡張（e.g., GitHub Flavored Markdown）を利用すれば、表やチェックリストなどの高度な要素も記述可能。

対象読者

[編集]
  • ブログ記事や技術文書を執筆する人
  • 簡単に使えるマークアップ言語を探している人
  • READMEやドキュメントの作成を効率化したいエンジニア

目次

[編集]
  1. Markdownとは
  2. 基本記法
  3. 拡張記法
  4. ツールとエディタ
  5. 応用テクニック
  6. 演習問題
  7. 参考文献

Markdownとは

[編集]

Markdownは、2004年にJohn Gruberによって作られたマークアップ言語です。以下の目的で設計されました：

  • HTMLのように複雑な記述を不要にする。
  • 誰でも直感的に理解できる記法を提供する。
  • プレーンテキストとしても読みやすいフォーマットを作成する。

Markdownは多くのツールやプラットフォームで採用されており、簡単にHTMLやPDFに変換できます。

基本記法

[編集]

見出し

[編集]

# を使うことで見出しを作成できます。 

# 見出し1
## 見出し2
### 見出し3
HTMLへの展開例
<h1 class="code-line" data-line-start=0 data-line-end=1 ><a id="1_0"></a>見出し1</h1>
<h2 class="code-line" data-line-start=1 data-line-end=2 ><a id="2_1"></a>見出し2</h2>
<h3 class="code-line" data-line-start=2 data-line-end=3 ><a id="3_2"></a>見出し3</h3>

強調

[編集]

文字を強調する方法は以下の通りです：

  • 太字：**太字** または __太字__
  • 斜体：*斜体* または _斜体_
これは **太字** と *斜体* の例です。
HTMLへの展開例
<p class="has-line-data" data-line-start="0" data-line-end="1">これは <strong>太字</strong> と <em>斜体</em> の例です。</p>

リスト

[編集]
  • 箇条書きリストは - または * を使用します。
  • 番号付きリストは数字とピリオドを使用します。
- 項目1
- 項目2
   - サブ項目1
   - サブ項目2

1. 手順A
2. 手順B
    1. サブ手順α
    2. サブ手順β
HTMLへの展開例
<ul>
<li class="has-line-data" data-line-start="0" data-line-end="1">項目1</li>
<li class="has-line-data" data-line-start="1" data-line-end="5">項目2
<ul>
<li class="has-line-data" data-line-start="2" data-line-end="3">サブ項目1</li>
<li class="has-line-data" data-line-start="3" data-line-end="5">サブ項目2</li>
</ul>
</li>
</ul>
<ol>
<li class="has-line-data" data-line-start="5" data-line-end="6">手順A</li>
<li class="has-line-data" data-line-start="6" data-line-end="9">手順B
<ol>
<li class="has-line-data" data-line-start="7" data-line-end="8">サブ手順α</li>
<li class="has-line-data" data-line-start="8" data-line-end="9">サブ手順β</li>
</ol>
</li>
</ol>

リンクと画像

[編集]
  • リンク：[リンクテキスト](URL)
  • 画像：![代替テキスト](画像URL)
[Google](https://www.google.com)

![サンプル画像](https://example.com/image.png)
HTMLへの展開例
<p class="has-line-data" data-line-start="0" data-line-end="1"><a href="https://www.google.com">Google</a></p>
<p class="has-line-data" data-line-start="2" data-line-end="3"><img src="https://example.com/image.png" alt="サンプル画像"></p>

コードブロック

[編集]

インラインコードはバッククォート ` ` を使います。複数行のコードブロックは3つのバッククォートで囲みます。 

文中に`インラインコード`を含めることが出来ます。

複数行コードブロック
```
function hello() {
   console.log("Hello, World!");
}
```
HTMLへの展開例
<p class="has-line-data" data-line-start="0" data-line-end="1">文中に<code>インラインコード</code>を含めることが出来ます。</p>
<p class="has-line-data" data-line-start="2" data-line-end="3">複数行コードブロック</p>
<pre><code class="has-line-data" data-line-start="4" data-line-end="8">function hello() {
   console.log(&quot;Hello, World!&quot;);
}
</code></pre>

引用

[編集]

引用は > を使います。 

> これは引用です。
引用は段落を単位に行われるので、次の空行までが引用になります。
HTMLへの展開例
<blockquote> <p class="has-line-data" data-line-start="0" data-line-end="2">これは引用です。<br> 引用は段落を単位に行われるので、次の空行までが引用になります。</p> 
</blockquote>

水平線

[編集]

水平線は --- または *** を使用します。 

---
HTMLへの展開例
<hr>

拡張記法

[編集]

Markdownの基本記法に加えて、拡張記法を使うことでさらなる機能を利用できます。これには以下が含まれます：

表

[編集]
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 値1 | 値2 | 値3 |
| 値a | 値b | 値c |
HTMLへの展開例
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>値1</td>
<td>値2</td>
<td>値3</td>
</tr>
<tr>
<td>値a</td>
<td>値b</td>
<td>値c</td>
</tr>
</tbody>
</table>

チェックリスト

[編集]
- [x] 完了項目
- [ ] 未完了項目
HTMLへの展開例
<ul>
<li class="has-line-data" data-line-start="0" data-line-end="1"><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">完了項目</label></li>
<li class="has-line-data" data-line-start="1" data-line-end="2"><input type="checkbox" id="checkbox1"><label for="checkbox1">未完了項目</label></li>
</ul>

GitHub Flavored Markdown

[編集]

GitHubでは以下のような追加記法が使用可能です：

  • タスクリスト
  • ハイライトコードの言語指定（例： ```python）

ツールとエディタ

[編集]

Markdownを編集する際に便利なツールやエディタを紹介します。

オンラインエディタ

[編集]

デスクトップアプリ

[編集]
  • Visual Studio Code（拡張機能でMarkdownプレビュー）
  • Typora

CLIツール

[編集]
  • Pandoc：MarkdownをHTMLやPDFに変換可能。
$ pandoc input.md -o output.html

応用テクニック

[編集]

Markdownを活用した応用テクニックを紹介します。

MarkdownをHTMLに変換

[編集]

MarkdownをHTMLに変換してWebページを作成できます。

Markdown + CSS

[編集]

スタイルを適用して見栄えの良いドキュメントを作成。

演習問題

[編集]

問題1

[編集]

Markdownを使って以下の構造の文書を作成してください：

  1. 見出し1
  2. リスト（箇条書きと番号付き）
  3. コードブロック

問題2

[編集]

GitHub Flavored Markdownを使って、チェックリストとテーブルを含むMarkdown文書を作成してください。

参考文献

[編集]
"https://ja.wikibooks.org/w/index.php?title=Markdown&oldid=264925" より作成