6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Markdown記法の基本を初心者向けに徹底解説!今すぐ使える実践テクニック

Posted at

【完全版】Markdown記法の基本を初心者向けに徹底解説!今すぐ使える実践テクニック

はじめに

プログラミングを始めたばかりの方や、技術ブログを書きたいと思っている方にとって、Markdown記法は必ずマスターしておきたいスキルの一つです。Qiita、GitHub、Notion、Slackなど、多くのプラットフォームでMarkdownが使われており、覚えておくと非常に便利です。

この記事では、Markdown記法の基本を初心者の方にもわかりやすく、実践的な例を交えながら解説していきます。読み終わる頃には、あなたもMarkdownを使って美しいドキュメントを作成できるようになっているはずです。

Markdownとは?なぜ学ぶべきなのか

Markdownの基本概念

**Markdown(マークダウン)**は、軽量マークアップ言語の一つです。2004年にJohn Gruberによって開発され、現在では世界中の開発者やライターに愛用されています。

Markdownの最大の特徴は、シンプルで読みやすいことです。HTMLのような複雑なタグを使わずに、簡単な記号だけで見出しやリスト、強調などを表現できます。

Markdownを学ぶべき理由

  1. 多くのプラットフォームで使用可能

    • Qiita、GitHub、GitLab、Bitbucket
    • Notion、Obsidian、Typora
    • Slack、Discord、Reddit
    • 多くのブログサービス
  2. 学習コストが低い

    • 基本的な記法は30分程度で覚えられる
    • 複雑なツールを覚える必要がない
  3. バージョン管理がしやすい

    • テキストファイルなので、Gitで管理しやすい
    • 差分が見やすく、レビューしやすい
  4. 将来性がある

    • 技術文書の標準的な記法として定着
    • 多くの企業で採用されている

Markdown記法の基本構文

それでは、実際にMarkdown記法を学んでいきましょう。基本的な構文から順番に解説していきます。

見出し(Heading)

見出しは、#記号を使って表現します。#の数によって見出しのレベルが決まります。

# 見出し1(最大)
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6(最小)

実践例:

# プロジェクトの概要
## 機能一覧
### ユーザー管理機能
#### ログイン機能

ポイント:

  • #の後には必ずスペースを入れる
  • 見出し1と見出し2は、下に水平線が自動的に引かれる場合がある
  • 見出しは階層構造を意識して使うと読みやすい

段落と改行

Markdownでは、段落は空行で区切ります。単純に改行するだけでは、同じ段落として扱われます。

これは最初の段落です。
同じ行に続けて書いても、同じ段落として扱われます。

空行を入れると、新しい段落になります。

実践例:

Markdownは簡単に覚えられる記法です。
基本的な構文を覚えれば、すぐに使い始められます。

次のセクションでは、より高度な使い方を紹介します。

ポイント:

  • 段落を分けたい場合は、必ず空行を入れる
  • 行末に2つのスペースを入れると、強制改行になる(あまり使わない)

強調(太字・斜体)

テキストを強調するには、*_を使います。

*斜体*
_斜体_

**太字**
__太字__

***太字かつ斜体***
___太字かつ斜体___

実践例:

これは*重要な*ポイントです。
**注意**してください。
***非常に重要***な情報です。

ポイント:

  • *_は基本的に同じ意味
  • 太字は**または__で囲む
  • 斜体は*または_で囲む
  • 太字と斜体を組み合わせることも可能

リスト(箇条書き・番号付き)

リストは、読みやすいドキュメントを作る上で欠かせない要素です。

箇条書きリスト

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

または

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

または

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

ネスト(入れ子)も可能:

- 親項目1
  - 子項目1
  - 子項目2
- 親項目2
  - 子項目1
    - 孫項目1

実践例:

## 今日のタスク
- コードレビュー
- ドキュメント作成
  - Markdownで書く
  - 図を追加する
- テストを書く

番号付きリスト

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

実践例:

## インストール手順
1. パッケージをダウンロード
2. 解凍する
3. インストールスクリプトを実行
4. 設定ファイルを編集

ポイント:

  • 番号は自動的に振られるので、1, 2, 3...と書く必要はない(ただし、順序を明確にするために書くこともある)
  • リストの項目間は空行を入れない方が良い
  • ネストする場合は、インデントを2スペースまたは4スペースで統一する

リンク

リンクは、[表示テキスト](URL)の形式で記述します。

[リンクテキスト](https://example.com)

実践例:

[Qiita](https://qiita.com)
[GitHub](https://github.com)

タイトル付きリンク:

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

参照形式のリンク:

[リンクテキスト][参照名]

[参照名]: https://example.com "オプションのタイトル"

ポイント:

  • URLをそのまま書くと自動的にリンクになる場合もある
  • 参照形式は、同じリンクを複数回使う場合に便利

画像

画像は、リンクの記法の前に!を付けるだけです。

![代替テキスト](画像のURL)

実践例:

![ロゴ](https://example.com/logo.png)
![スクリーンショット](./images/screenshot.png)

タイトル付き画像:

![代替テキスト](画像のURL "タイトル")

ポイント:

  • 代替テキストは、画像が表示されない場合やスクリーンリーダーで重要
  • 相対パスも使用可能
  • GitHubやQiitaでは、画像をドラッグ&ドロップでアップロードできる

コードブロック

コードを書く際には、コードブロックを使います。

インラインコード

文中にコードを書く場合は、バッククォートで囲みます。

`コード`

実践例:

`console.log()`関数を使ってログを出力します。
`const`キーワードで定数を宣言できます。

コードブロック

複数行のコードを書く場合は、3つのバッククォートで囲みます。

```
コード
複数行
```

シンタックスハイライト付き:

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

実践例:

```python
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
```

ポイント:

  • 言語名を指定すると、シンタックスハイライトが効く
  • よく使う言語:javascript, python, java, go, rust, html, css, json, yaml, bash
  • コードブロック内では、Markdownの記法は解釈されない

引用

他の文章を引用する場合は、>を使います。

> 引用文
> 複数行にわたる引用

実践例:

> プログラミングは、問題を解決するための思考プロセスです。
> 
> - 有名なプログラマー

ネストした引用:

> 最初の引用
> > ネストした引用

ポイント:

  • 引用内でもMarkdown記法が使える
  • 複数段落の引用は、段落の間に空行を入れる

水平線

区切り線を引くには、---***___を使います。

---

***

___

ポイント:

  • 3つ以上の記号が必要
  • 前後に空行を入れることが推奨される

テーブル(表)

テーブルは、|-を使って作成します。

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| データ1 | データ2 | データ3 |
| データ4 | データ5 | データ6 |

実践例:

| 言語 | 用途 | 難易度 |
|------|------|--------|
| Python | データ分析、Web開発 | 易しい |
| JavaScript | フロントエンド、バックエンド | 普通 |
| Rust | システムプログラミング | 難しい |

配置の指定:

| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
| データ1 | データ2 | データ3 |

ポイント:

  • :で配置を指定できる(左::---、中央::---:、右:---:
  • テーブルの作成は少し複雑だが、エディタの拡張機能を使うと便利

取り消し線

テキストに取り消し線を引くには、~~で囲みます。

~~取り消し線~~

実践例:

~~古い情報~~ 新しい情報に更新しました。

チェックボックス(タスクリスト)

タスクリストは、GitHubや一部のプラットフォームで使用できます。

- [ ] 未完了のタスク
- [x] 完了したタスク

実践例:

## 今日のタスク
- [x] コードレビュー
- [ ] ドキュメント作成
- [ ] テストを書く

実践的な使い方とTips

エスケープ

Markdownの記号をそのまま表示したい場合は、\でエスケープします。

\*これはアスタリスク\*
\# これはハッシュ

HTMLタグの使用

Markdownでは、HTMLタグも使用できます。

<details>
<summary>クリックして展開</summary>

ここに詳細な内容を書きます。

</details>

実践例:

<details>
<summary>解答を見る</summary>

答えは**42**です。

</details>

数式(一部のプラットフォーム)

GitHubや一部のプラットフォームでは、数式も書けます。

インライン数式: $E = mc^2$

ブロック数式:
$$
\sum_{i=1}^{n} i = \frac{n(n+1)}{2}
$$

よくある間違いと対処法

  1. 見出しの#の後にスペースを忘れる

    • ? #見出し
    • ? # 見出し
  2. リストのインデントがずれる

    • ネストする場合は、2スペースまたは4スペースで統一
  3. コードブロックの閉じ忘れ

    • 3つのバッククォートで開始したら、必ず3つで閉じる
  4. リンクの記法ミス

    • [テキスト](URL)の順序を間違えない

プラットフォーム別の注意点

Qiita

  • コードブロックのシンタックスハイライトが充実
  • 画像はドラッグ&ドロップでアップロード可能
  • 数式は$で囲むと表示される
  • チェックボックスは使えない

GitHub

  • チェックボックス(タスクリスト)が使える
  • 数式が使える
  • 画像はリポジトリにコミットして参照
  • 自動リンクが充実

Notion

  • ほぼすべてのMarkdown記法が使える
  • /コマンドでMarkdownを入力できる
  • 独自の拡張機能が多い

まとめ

この記事では、Markdown記法の基本を初心者向けに解説してきました。主要なポイントをまとめると:

  1. 見出し#で表現し、階層構造を意識する
  2. 強調***で囲む
  3. リスト-1.で作成し、ネストも可能
  4. リンク[テキスト](URL)の形式
  5. コードブロックは3つのバッククォートで囲む
  6. テーブル|-で作成

Markdownは、一度覚えてしまえば非常に便利な記法です。最初は慣れないかもしれませんが、実際に使いながら覚えていくのが一番です。

次のステップ

  • 実際にQiitaやGitHubで記事を書いてみる
  • エディタのMarkdownプレビュー機能を使う
  • 他の人のMarkdownファイルを読んで、書き方を学ぶ
  • より高度な記法(数式、Mermaid図など)を学ぶ

Markdownをマスターすれば、技術文書の作成が格段に楽になります。ぜひ、この記事を参考に、Markdown記法を習得してください!

参考リンク


この記事が役に立ったら、ぜひいいねやストックをお願いします!

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?