Markdownチートシート:完全な構文ガイド

· 12分で読む

目次

Markdownとは?

Markdownは、2004年にJohn GruberとAaron Swartzによって作成された軽量マークアップ言語で、Web向けの執筆方法に革命をもたらしました。シンプルで直感的な構文を使用してプレーンテキストをフォーマットでき、人間が読みやすく、機械が解析可能です。

冗長なタグと閉じ要素を必要とするHTMLとは異なり、Markdownはアスタリスク、ハッシュ、括弧などの自然な記号を使用します。これにより、執筆が速くなり、レンダリングしなくてもソーステキストが読みやすくなります。Markdown文書は生の形式でもクリーンで論理的に見えるため、技術文書の普遍的な標準となっています。

Markdownの背後にある哲学はシンプルです:執筆は簡単であるべきで、構文は見えないべきです。Markdownファイルを読むとき、まずコンテンツを読み、次にマークアップを読みます。これは、タグがしばしば実際のコンテンツを覆い隠す従来のマークアップ言語とは根本的に異なります。

Markdownが使用される場所

Markdownは、技術エコシステム全体とその先で普及しています:

Web公開のためにMarkdownをHTMLに変換する必要がありますか?即座に正確な変換を行うMarkdownからHTMLへのコンバーターをお試しください。

プロのヒント: Markdownファイルは.mdまたは.markdown拡張子を使用します。ほとんどのプラットフォームは両方を認識しますが、.mdがより一般的で簡潔です。

見出しと文書構造

見出しはMarkdownにおける文書構造の骨格です。階層を作成し、読みやすさを向上させ、人間と検索エンジンの両方がコンテンツの構成を理解するのに役立ちます。

基本的な見出し構文

Markdownはハッシュ記号(#)を使用して6レベルの見出しをサポートします。ハッシュの数が見出しレベルを決定します:

# 見出し1 (H1)
## 見出し2 (H2)
### 見出し3 (H3)
#### 見出し4 (H4)
##### 見出し5 (H5)
###### 見出し6 (H6)

各見出しレベルには意味的な意味があります。H1は文書のタイトル、H2は主要なセクション、H3はサブセクションなどです。この階層はアクセシビリティとSEOにとって重要です。

H1とH2の代替構文

MarkdownはH1とH2見出しの代替「下線」構文もサポートしています:

見出し1
=========

見出し2
---------

この構文は有効ですが、ハッシュ構文がより一般的で、6つすべての見出しレベルをサポートします。ほとんどの開発者は、文書全体でハッシュを使用する一貫性を好みます。

見出しのベストプラクティス

クイックヒント: 多くのMarkdownパーサーは見出しから自動的にアンカーリンクを生成し、「はじめに」を#はじめにに変換します。これにより、特定のセクションへのディープリンクが可能になります。

テキストの書式設定と強調

Markdownは、一般的なテキスト書式設定のニーズに対して直感的な構文を提供します。これらの書式設定オプションは段落内でインラインで機能し、より複雑なスタイリングのために組み合わせることができます。

太字と斜体のテキスト

強調はアスタリスクまたはアンダースコアを使用して作成されます:

**太字テキスト** または __太字テキスト__
*斜体テキスト* または _斜体テキスト_
***太字と斜体*** または ___太字と斜体___

アスタリスクとアンダースコアの両方が同じように機能しますが、アスタリスクがより一般的です。1つのスタイルを選択し、一貫性のためにそれに固執してください。多くのスタイルガイドは、入力が簡単で視覚的により明確であるため、アスタリスクを推奨しています。

取り消し線とその他の書式設定

追加の書式設定オプションには以下が含まれます:

~~取り消し線テキスト~~
`インラインコード`
==ハイライトされたテキスト== (一部のパーサー)
X^2^ (上付き文字、一部のパーサー)
H~2~O (下付き文字、一部のパーサー)

ハイライトされたテキスト、上付き文字、下付き文字は、すべてのMarkdownパーサーでサポートされていない拡張機能であることに注意してください。GitHub Flavored Markdown (GFM)は取り消し線をサポートしていますが、デフォルトではハイライトをサポートしていません。

引用ブロック

引用ブロックは大なり記号(>)を使用して作成されます:

> これは引用ブロックです。
> 複数行にまたがることができます。

>> ネストされた引用ブロックも可能です。
>> より多くの>記号を追加するだけです。

引用ブロックは、引用、プル引用、または重要な情報を強調するのに最適です。見出し、リスト、コードブロックを含む他のMarkdown書式設定を含めることができます。

水平線

水平線でコンテンツに視覚的な区切りを作成します:

---
***
___

3つの構文すべてが同じ結果を生成します。独自の行に3つ以上のハイフン、アスタリスク、またはアンダースコアを使用します。ほとんどの開発者は明確さのためにハイフン(---)を好みます。

特殊文字のエスケープ

リテラルMarkdown文字を表示するには、バックスラッシュでエスケープします:

\*斜体ではない\*
\# 見出しではない
\[リンクではない\]

これは、ドキュメントやチュートリアルのように、Markdown構文自体を表示する必要がある場合に不可欠です。

プロのヒント: コードや技術的なトピックについて書くときは、関数名、変数、ファイルパス、コマンドにインラインコード書式設定(`バッククォート`)を使用してください。これにより読みやすさが向上し、読者がコードと文章を区別するのに役立ちます。

リンクと画像はMarkdownで類似した構文を使用するため、覚えやすく使いやすくなっています。両方とも、さまざまなユースケースに対してインラインスタイルと参照スタイルの形式をサポートしています。

リンクの作成

基本的なリンク構文は簡単です:

[リンクテキスト](https://example.com)
[タイトル付きリンク](https://example.com "ホバーテキスト")

リンクテキストは角括弧内に表示され、その直後にURLが括弧内に続きます。オプションのタイトル属性はURL後の引用符内に表示され、ホバー時に表示されます。

参照スタイルのリンク

繰り返しリンクが多い文書の場合、参照スタイルのリンクはコンテンツをよりクリーンに保ちます:

[リンクテキスト][reference-id]
[別のリンク][reference-id]

[reference-id]: https://example.com "オプションのタイトル"

このアプローチは、リンク定義をコンテンツから分離し、ソースをより読みやすくします。長い文書や同じURLが複数回表示される場合に特に便利です。

自動リンク

URLとメールアドレスは自動的にリンクに変換できます:

<https://example.com>
<[email protected]>

多くのMarkdownパーサーは、山括弧なしで裸のURLも自動リンクしますが、この動作は普遍的ではありません。山括弧を使用すると、プラットフォーム間で一貫した動作が保証されます。

画像の追加

画像構文は、感嘆符のプレフィックスを除いて、リンクとほぼ同じです:

![代替テキスト](image.jpg)
![代替テキスト](image.jpg "画像タイトル")
![代替テキスト][image-reference]

[image-reference]: image.jpg "オプションのタイトル"

代替テキストはアクセシビリティとSEOにとって重要です。スクリーンリーダー用に画像を説明し、画像の読み込みに失敗した場合に表示されます。常に画像のコンテンツとコンテキストを説明する意味のある代替テキストを提供してください。

画像のサイズ設定と配置

標準のMarkdownは画像のサイズ設定や配置をサポートしていません。これらの機能にはHTMLを使用する必要があります:

<img src="image.jpg" alt="代替テキスト" width="300">
<img src="image.jpg" alt="代替テキスト" style="float:right;margin:10px">

ほとんどのMarkdownパーサーはインラインHTMLを許可するため、画像の表示をより細かく制御する必要がある場合、これは実用的なソリューションになります。

クイックヒント: 内部ページにリンクする場合は、絶対URL(https://example.com/about/)の代わりに相対URL(/about/)を使用してください。これによりコンテンツが移植可能になり、開発環境で正しく機能します。

リスト:順序付き、順序なし、タスクリスト

リストはMarkdownで情報を整理するための基本です。作成が簡単で、複雑な階層のネストをサポートしています。

順序なしリスト

アスタリスク、ハイフン、またはプラス記号を使用して箇条書きリストを作成します:

* 項目1
* 項目2
* 項目3

- 項目1
- 項目2
- 項目3

+ 項目1
+ 項目2
+ 項目3

3つの記号すべてが同じように機能します。1つを選択し、文書全体で一貫して使用してください。ほとんどの開発者は、視覚的な明確さのためにハイフンを好みます。

順序付きリスト

番号付きリストは、ピリオドが続く数字を使用します:

1. 最初の項目
2. 2番目の項目
3. 3番目の項目

便利な機能があります:実際の数字は重要ではありません。Markdownはレンダリング時にリストを自動的に再番号付けします:

1. 最初の項目
1. 2番目の項目
1. 3番目の項目

これにより、すべてを手動で再番号付けする必要がないため、項目の並べ替えが簡単になります。ただし、すべての項目に1.で始めると、ソースを読むときに混乱する可能性があります。

ネストされたリスト

スペースまたはタブで項目をインデントして階層リストを作成します:

1. 最初の項目
   - ネストされた箇条書き
   - 別のネストされた箇条書き
2. 2番目の項目
   1. ネストされた番号
   2. 別のネストされた番号
      - さらに深いネスト

各ネストレベルに一貫したインデント(通常2〜4スペース)を使用してください。ほとんどのパーサーは柔軟ですが、一貫性により読みやすさが向上します。

タスクリスト

GitHub Flavored Markdownは、ToDoを追跡するためのタスクリストを導入しました:

- [ ] 未チェックのタスク
- [x] チェック済みのタスク
- [ ] 別の未チェックのタスク

タスクリストは、GitHubなどのプラットフォームでインタラクティブです—レンダリングされたビューで直接項目をチェックおよびチェック解除できます。プロジェクト計画、イシュー追跡、共同文書に最適です。

リストのベストプラクティス

コードとコードブロック

Markdownはコードの表示に優れており、技術文書やプログラミングチュートリアルに好まれる形式となっています。

インラインコード

単一のバッククォートでインラインコードをラップします:

デバッグには`console.log()`関数を使用します。
`<div>`要素はコンテナです。

インラインコード書式設定はスペースを保持し、Markdown解釈を防ぎます。文内でコード要素に言及するために不可欠です。

コードブロック

トリプルバッククォート(フェンスコードブロック)を使用してコードブロックを作成します:

```
function hello() {
  console.log("Hello, world!");
}
```

これは現代的で好まれる構文です。古いインデント方法(4スペースまたは1タブ)よりもクリーンで柔軟です。

シンタックスハイライト

シンタックスハイライトのために開始バッククォートの後にプログラミング言語を指定します:

```javascript
function hello() {
  console.log("Hello, world!");
}
```

```python
def hello():
    print("Hello, world!")
```

```css
.container {
  max-width: 1200px;
  margin: 0 auto;
}
```

ほとんどのMarkdownパーサーは数十の言語をサポートしています。一般的な識別子には以下が含まれます

We use cookies for analytics. By continuing, you agree to our Privacy Policy.