【初学者必見！】よく使われるマークダウン記法ガイド【Markdown/Zenn/記事/README.md】
おはこんばんにちは！
今日は、マークダウン記法について、どの記事よりも初学者目線で詳しく解説していきます。
マークダウンは、シンプルで直感的な書き方が特徴のフォーマット言語で、テキストの装飾や構造を簡単に整えることができます。
よく使われるマークダウン記法をピックアップして、初心者の方にも分かりやすく説明するので、ぜひ参考にしてみてくださいね。
目次
◯ 見出し！
見出しは、文章の構造を明確にするために使います。
見出しのレベルを変えることで、情報の階層を表現できます。
マークダウンでは、 # 記号を使って見出しを作成します。
【⭐️使用例⭐️】
# 大見出し
## 中見出し
### 小見出し
#### さらに小さな見出し
##### もっと小さな見出し
###### 最小の見出し
【⭐️実際の表示⭐️】
大見出し
中見出し
小見出し
さらに小さな見出し
もっと小さな見出し
最小の見出し
◯ リスト！
リストは、項目を整理して表示する際に使います。
マークダウンでは、順序付きリストと順序なしリストの2種類があります。
順序なしリスト 【⭐️使用例⭐️】
順序なしリストは、- または * を使って作成します。
- 項目1
- 項目2
- サブ項目1
- サブ項目2
* 項目3
【⭐️実際の表示⭐️】
- 項目1
- 項目2
- サブ項目1
- サブ項目2
- 項目3
順序付きリスト 【⭐️使用例⭐️】
順序付きリストは、数字とドットを使って作成します。
1. 項目1
2. 項目2
1. サブ項目1
2. サブ項目2
3. 項目3
【⭐️実際の表示⭐️】
- 項目1
- 項目2
- サブ項目1
- サブ項目2
- 項目3
◯ リンク！
リンクは、他のウェブページやリソースへのリンクを作成するために使います。
マークダウンでは、[リンクテキスト](URL) の形式でリンクを作成します。
【⭐️使用例⭐️】
[Googleの公式サイト](https://www.google.com)
【⭐️実際の表示⭐️】
◯ 画像！
画像を挿入するには、 の形式で記述します。
代替テキストは、画像が表示されないときに表示される説明文です。
【⭐️使用例⭐️】
【⭐️実際の表示⭐️】
◯ 引用！
引用は、他の人の発言や文章を引用する際に使います。
マークダウンでは、> 記号を使います。
【⭐️使用例⭐️】
> これは引用です。
【⭐️実際の表示⭐️】
これは引用です。
◯ コード！
コードは、プログラムやコマンドを表示する際に使います。
マークダウンでは、インラインコード（文章中のコード）とコードブロックの2種類があります。
インラインコード（文章中のコード） 【⭐️使用例⭐️】
インラインコードは、バッククォートで囲みます。
`コード例`
【⭐️実際の表示⭐️】
コード例
コードブロック 【⭐️使用例⭐️】
複数行のコードは、3つのバッククォート（```）で囲みます。
( ※ここを3つのバッククォートに置き換えてください )
function greet() {
console.log("Hello, world!");
}
( ※ここを3つのバッククォートに置き換えてください )
【⭐️実際の表示⭐️】
function greet() {
console.log("Hello, world!");
}
◯ 強調！
テキストを強調するためには、* または _ を使います。
太字と斜体の2種類の強調があります。
太字 【⭐️使用例⭐️】
太字にするには、テキストを2つのアスタリスク**またはアンダースコア__で囲みます。
**太字のテキスト**
__太字のテキスト__
【⭐️実際の表示⭐️】
太字のテキスト
太字のテキスト
斜体 【⭐️使用例⭐️】
斜体にするには、テキストを1つのアスタリスク*またはアンダースコア_で囲みます。
*Italicized text*
_Italicized text_
【⭐️実際の表示⭐️】
Italicized text
Italicized text
◯ テーブル！
テーブルは、情報を整理して表示するために使います。
テーブルの作成には、|（パイプ）記号を使用します。
【⭐️使用例⭐️】
| ヘッダー1 | ヘッダー2 |
| -------- | -------- |
| 行1列1 | 行1列2 |
| 行2列1 | 行2列2 |
【⭐️実際の表示⭐️】
| ヘッダー1 | ヘッダー2 |
|---|---|
| 行1列1 | 行1列2 |
| 行2列1 | 行2列2 |
◯ 水平線！
水平線を使うことで、文書内に区切りを入れることができます。
複数の-(ハイフン)や*(アスタリスク)を使って作成します。
【⭐️使用例⭐️】
---
【⭐️実際の表示⭐️】
👇️ここです！👇️
👆️ここです！👆️
◯ チェックリスト！
チェックリストを使うことで、タスクや項目の進行状況を管理できます。
- [ ] または * [ ] で作成します。
【⭐️使用例⭐️】
- [ ] タスク1
- [x] タスク2
- [ ] サブタスク1
- [x] サブタスク2
【⭐️実際の表示⭐️】
- タスク1
-
タスク2
- サブタスク1
- サブタスク2
◯ 脚注！
脚注は、追加の説明や、参考情報を提供するために使います。
マークダウンでは、[^脚注名] で脚注を作成し、文末で脚注の内容を記述します。
【⭐️使用例⭐️】
これは脚注の例です[^1]。
[^1]: ここが脚注の内容です。
【⭐️実際の表示⭐️】
これは脚注の例です[1]。
◯ Zenn 独自の記法！
Zenn では、以下のような独自のマークダウン記法を使って、よりリッチなコンテンツを作成することができます。
メッセージボックス 【⭐️使用例⭐️】
メッセージボックスは、特定の情報やアドバイスを目立たせるために使います。
:::message で始まるブロックを使用します。
:::message
これはメッセージボックスです。
:::
【⭐️実際の表示⭐️】
アラートボックス 【⭐️使用例⭐️】
アラートボックスは、警告や注意を促すためのボックスです。
:::message alert で始まるブロックを使用します。
:::message alert
これはアラートボックスです。
:::
【⭐️実際の表示⭐️】
詳細ボックス 【⭐️使用例⭐️】
詳細ボックスは、折りたたみ可能なセクションを作成するために使います。
:::details タイトル で始まるブロックを使用します。
:::details 詳細情報
ここに折りたたみ可能な詳細情報を記述します。
:::
【⭐️実際の表示⭐️】
詳細情報
ここに折りたたみ可能な詳細情報を記述します。
これで、マークダウン記法の基本をカバーしました。
どの記法も、シンプルで効果的に文章を整えるためのツールです。
ぜひ試してみて、自分のスタイルに合った使い方を見つけてくださいね。
楽しいマークダウンライティングを！
気軽に コメント(↓) していただければとても嬉しいです！
" ❤️ " や、フォロー、バッジなどもお待ちしています！
-
ここが脚注の内容です。 ↩︎
Discussion