Markdown記法の書き方【見出し・表・リスト(箇条書き)・引用などなど】

この記事では実際のプレビュー画面を表示した画像を使用してMarkdown記法の書き方を初心者にもわかりやすく解説しているので、直感的に学ぶことができますよ！

初めてMarkdown記法を学ぼうと思っている方は、この記事で解説するMarkdown記法の解説を確認しながら、1,2回ブログ記事を頑張って書いてみてください。

ただ読むよりも実際に実践しながらだとすぐに覚えれます！

僕はMarkdown記法を覚えたことで、これまで3日かかっていたブログ記事執筆が今では3～5時間にまで短縮することができ、1日1記事ペースで難なく書けるようなりました！

この機会にあなたもぜひMarkdown記法をマスターしましょう！

Markdown記法の書き方

MarkdownではHTMLで表す見出しやテーブル(表)、リスト(箇条書き)、引用などなど様々なタグに対応した簡単な記号で書くことができます。

さっそく各タグの書き方について簡単な解説と画像でわかりやすく解説していきますね！

なお、解説内で使用している各実例画像はVSCodeを使用して右側にリアルタイムプレビューを表示した画像です。

※画像内入力画面に時々表示されている黄色波線は気にしないでください。

よく使うMarkdown記法

見出し

行頭に『#』を付けると見出しになります。

通常リスト/箇条書き(HTML：ul)

行頭に『–』『+』『*』を付けると箇条書きリスト(HTML：<ul>)になります。

ネスト(入れ子)

リスト内で記号の前に半角空白を入力することでさらにリストを入れるネスト(入れ子)も可能です。

順序リスト/箇条書き(HTML：ol)

行頭に『1.』や『2.』を付けると箇条書きリスト(HTML：<ol>)になります。

引用

行頭に『>』を付けると引用になります。

また、引用内で他Markdownタグを利用することも可能です。

テーブル(表)

『|』で囲むことでテーブル表示になります。

最上段がヘッダ行、2段目でテーブルセル内の位置指定(左寄せ、右寄せなど)をします。

水平線

『*』『–』『_』のいずれかを3個以上連続入力で水平線になります。

たまに使うMarkdown記法

テキスト装飾【太字】

『**』または『__(アンダースコア2個)』で文字を囲みます。

1つで囲めばイタリック、2つで囲めば太字になります。

テキスト装飾【イタリック(斜め文字)】

『*』または『_』で文字を囲みます。

テキスト装飾【取り消し線】

『~~(チルダ2個)』で囲むと取り消し線が表示されます。

リンク

『[文字列](URL)』の形式で入力します。

画像

『![Alt](URL "補足説明")』の形式で入力します。

『Alt』は画像が何を意味するのか文字で表現するための代替文字のことで、SEO対策に有効です。

『”補足説明”』(HTML：title属性)はマウスを載せた時にポップアップで小さく表示される補足説明のようなもののことで、省略OKです。

コード

『`』で【HTML・CSS・PHP等】のコードを囲むと、ただの文字として表示できるようになります。

『`』一つで囲めばインライン(文中内表示)として、『“`』3つで囲めば行単位でブロックとして使えます。

コード表示はほとんどの方が使うことはないと思いますが、例えばブログ記事上でHTMLタグや本記事のようにMarkdownの解説をしたい時に役立ちますね！

例えば、先程のリンクのMarkdown記法での書き方の解説ですが、そのままWordPressに貼り付けると以下のようにコードとして認識されてしまい、コード自体の説明になっていません。

そこで、『`』で囲むとコードではなく文字として認識されるため、しっかりとコードの解説ができるようになるわけですね。

まとめ

一通りMarkdown記法を見てみると、意外と覚えることは少ないことがわかったかと思います。

たったこれだけを覚えるだけで、ブログ作成スピードが劇的に早くなるなら覚えないほうが損ですね！

1,2回Markdown記法で記事を書けば自然とほとんど覚えることができるので、ぜひ頑張ってみてください！

さらにブログ1記事書く時間を短縮したい方は以下記事も参考にしてみてくださいね。

ブログが嫌になる前に！記事作成スピードが速くなる【5つの方法】

この記事ではブログを仕上げるスピードをアップさせるための5つの方法をご紹介！ブログを始めた当初は1記事書くのに必要な時間は3日程度でしたが、この記事でご紹介する5つの方法を実践した結果、3～5時間程度にまで短縮できた経験に基づく方法を教えます。

literacyboxes.com