Markdown は、テキストエディタだけで簡単に書式を付けたい人にとって救世主のような存在です。
HTML を知る必要がなく、数本のシンボルで見栄えの良い記事や文書が作れます。
初心者の「Markdown は何から始めればいい？」という疑問に答えるべく、
基本の使い方から実務で役立つ応用テクニックまで分かりやすく解説します。
Markdown とは何か
Markdown は 2004 年にジョン・グルーバーによって開発された軽量マークアップ言語です。
目的は「人が読むことを最優先し、同時に機械にも解釈しやすいテキストを作る」こと。
そのため、文章に直接書き込むのに手間のかからない書式指定が特徴です。
- 見出しは
#、##で作成 - 強調は
*や_で - 箇条書きは
-や*で
HTML のように複雑なタグを覚える必要がないので、文書作成の初心者にも最適です。
基本構文のまとめ
| 構文 | 例 | 生成される結果 |
|---|---|---|
| 見出し | ## 見出し二 | H2 見出し |
| 強調 | *強調* | 強調 (斜体) |
| 太字 | **太字** | 太字 |
| 列挙 | - 1. 事柄 | 箇条書きリスト |
| 番号付き | 1. 事象 | 番号付きリスト |
| 画像 |  | 画像 |
| リンク | [リンクテキスト](URL) | ハイパーリンク |
| コード | `コード` | インラインコード |
| ブロックコード | `コード` | コードブロック |
| 区切り線 | --- | 区切り線 |
上記の構文はほとんどの Markdown エンジンで共通しています。
エディタのプレビュー機能を活用すれば、入力と出力を同時に確認できます。
Markdown エディタの選び方
オンラインエディタ
- Typora: WYSIWYG で、リアルタイムプレビューを備えています。
- Mark Text: オープンソースで軽量。
- HackMD／CodiMD: コラボレーションが必要な場合に最適。
デスクトップエディタ
- Visual Studio Code: 拡張機能で Markdown が強化。
- Atom: 同様にパッケージでプレビュー可。
VSCode で Markdown を活用するコツ
- 拡張機能「Markdown All in One」をインストール。
- キーボードショートカットで見出しやリストを自動生成。
CTRL+K+CTRL+Vでプレビュー表示。
コンテンツの構造化
Markdown で長文を書く際は「頭書き・本文・まとめ」の構造を意識します。
- 頭書き: 読者の注意を引く短い導入。
- 本文: 見出し (
##) で章立て。 - まとめ: 要点を箇条書きで再確認。
例:
## 1. はじめに
Markdown は…
## 2. 基本構文
- 見出し
- リスト
- コード
## 3. 応用テクニック
- YAML Front Matter
- タブ補完
- コメント
**まとめ**
- 手軽に書けるから…
YAML Front Matter で静的サイトに活かす
静的サイトジェネレータ（Jekyll、Hexo、Hugo など）では、記事ファイル上部に YAML を書くことでメタ情報を付与できます。
---
title: "Markdown 基本ガイド"
date: 2024-03-26
tags:
- markdown
- tutorial
layout: post
---
これにより、記事一覧ページや検索機能が自動生成されます。
初心者の方も --- で区切って入力するだけで、記事にタグや日付を付与できます。
コードスニペットのハイライト
プログラミング記事を書くときは、コードのハイライトが読者の目を引きます。
Markdown ではコードブロックの最初に言語名を書くだけでハイライトが効きます。
```python
def hello():
print("Hello, Markdown!")
> **Tip**:
> もしエディタが自動でハイライトを表示しない場合、拡張機能「Highlight.js」を追加すると便利です。
## 画像と図の扱い
画像は `` で挿入。
代替テキストは SEO 検索や視覚障害者向けに必須です。
また、複数行にわたる図を挿入したい場合は、リンク先を GitHub などにホストして、相対パスを使用すると管理しやすいです。
## コラボレーションとバージョン管理
Markdown はテキストベースなので、Git でのバージョン管理に適しています。
- `git diff` で変更点を簡単に確認。
- ブランチを使い、レビュー後にマージ。
さらに、オンラインエディタの **HackMD** などは、リアルタイム共同編集が可能です。
コメント機能を使えば、編集履歴を追いやすくなります。
## よくある質問 (FAQ)
| 質問 | 回答 |
|------|------|
| **Markdown で画像を縦横比を保ったままリサイズしたい** | 画像拡張子に `=widthxheight` を付ける（例: ``） ただし、すべてのレンダラーが対応しているわけではありません。 |
| **他のマークアップ言語と併用は可？** | はい。たとえば **LaTeX** や **HTML** を埋め込むことができる場合があります。 |
| **スマホで Markdown 編集は可能？** | 例えば「Markor」や「Dillinger」などの専用アプリがあります。 |
## おわりに
Markdown は「シンプルに書き、きれいに読める」ことを目指した言語です。
初心者であっても基本構文を覚えればブログ記事やメモ、技術ドキュメントを手軽に作成できます。
エディタやプラグインを活用しつつ、実際に書くことで覚えが定着します。
ぜひ今日から Markdown を使って、文章作成の時間を軽く、読みやすいコンテンツを手に入れましょう！
コメント