ちょっと整えるだけで変わる！Markdown装飾の基本

こんにちは、フジオカです。
3月になっても寒い日が続いていますが、それ以上に花粉で鼻水やのどがやられているこの頃です。
今年は市販薬で対策中ですが、種類がいろいろあるのでどれに手を出すか迷いました…。
（飲み薬と鼻スプレーで乗り切ります！）

今日は、前回書いた「知らないと損をする（かも） 整う×早く書けるMarkdown入門」の続編になります。
文章をちょっと見やすく、ちょっと伝わりやすくする“装飾”まわりを紹介します！

md記法（Markdown）は「プレーンテキストで書けるのに、見た目を整えやすい」のが便利なところ。
見出しも頭に#を付ける（つける数によって見出しの強さが変わる）等、覚えたら文章を整えるのが少し楽になります！
また、md記法ではがっつりデザインするというより、必要な部分を強調して読みやすくするのが得意です。

「文章がなんとなくのっぺりして見える…」
「どこが大事なのか伝わりにくい…」

そんなときに使える記法をまとめてみました！

太字

文章の中で特に強調したい部分があるときに使います。

**ここを太字にする**

表示例：

※わかりづらかったので通常文字も入れてます

たとえば、手順の中で「ここ大事！」という部分や、結論を目立たせたいときに便利です。

斜体

太字ほどではないけど、強調したいときは斜体が使えます。
個人的にはあまり使うことがないのですが、HTMLでも見かけることが多いので見覚えがある方もいるかもしれません。

*ここを斜体にする*

表示例：

太字＋斜体

さらに強く目立たせたい場合は、太字と斜体を組み合わせることもできます。

***ここを太字＋斜体にする***

表示例：

記述も*（アスタリスク）が3つ並ぶので、「しっかり強調している感じ」が見た目でもわかりやすいと思います！

打ち消し線

「修正前の内容」や「取り消し」を表現したいときに便利な打ち消し線もあります。

~~ここを打ち消し線にする~~

表示例：

インラインコード

文の途中で、ファイル名・コマンド・変数名・タグ名などを見せたいときは、インラインコードが便利です。

記号はバッククォート ` を使います。
キーボードだと、環境によっては変換キーの近くやEscの下あたりにあります。

`style.css`

表示例：

コードブロック

複数行のコードを書きたいときは、コードブロックを使います。
バッククォート3つで囲みます。

“`
<h1>Hello</h1>
<p>こんにちは</p>
“`

表示例：

さらに、最初の “` のあとに html や css、js などを書くと、環境によっては色分け表示されて見やすくなることもあります。

※VSCode上では見出しを付けて囲うと入力でもタグやコードに色がついてわかりやすくなります

引用

誰かの発言や、補足として別枠っぽく見せたい文章には引用が使えます。

> これは引用です

表示例：

区切り線

話題の切れ目を見やすくしたいときには、区切り線も使えます。

—

表示例：

※VSCodeでは区切りの上の文字は何もしなくても見出しのように調整してくれます

セクションの切り替わりや、「ここから別の話です」と見せたいときに便利です。
自分は見出しの次くらいに使っています。

記法は便利。でも、盛りすぎには注意

md記法は装飾ができるとはいえ、たくさん飾ればいいというものでもありません。

たとえば、

• 太字だらけ
• 区切り線だらけ
• 強調が多すぎる
• 引用やコード装飾が必要以上に多い

こんな状態になると、かえって読みにくくなってしまいます。

md記法のよさは、シンプルなのに必要なところだけ整えられること。
「目立たせたいところだけ使う」くらいが、ちょうどいいかもしれません。

まとめ

今回は、md記法の装飾まわりの基本を紹介しました。
文章の内容そのものも大事ですが、少し整えるだけで見やすさ・伝わりやすさはかなり変わります。
HTMLのタグを書くほど手間もかからず、覚えたらいろんなツールで使えるmd記法、ぜひぜひ使ってみてください！