マークダウン記法とは?意味や書き方を解説【おすすめエディタも】

  • このエントリーをはてなブックマークに追加

HTMLなどのマークアップ言語やプログラミング言語を勉強していると、マークダウンという言葉が出てきます。マークダウンとは一体どのような意味合いを持ち、どのような書き方をするのでしょうか。マークアップとマークダウンの違いは何なのでしょうか。ここではマークダウンについて、意味や書き方、使用するメリットを初心者の方にも分かりやすく解説。書き方の具体例として、改行やリンクの仕方、箇条書きや表の作り方をご紹介します。また、マークダウンを表示できるおすすめのエディタも載せているので、これからマークダウンについて勉強したい方は参考にしてみてくださいね。

マークダウンとは?

マークアップ言語の一つ

コンピューターが理解できるデジタル文章を書くには、マークアップと呼ばれる文章の構造化が必要になります。ネット上の記事に例えると、タイトルや「第~章」「第~節」といった見出し、箇条書きや改行などです。これら人間が書いた言語に重要な意味を持たせたり、読みやすく工夫することが文章構造であり、文章構造をコンピューターに的確に伝える役割を担うのがマークアップ言語。マークダウンはマークアップ言語の一種です。

HTMLを簡略化できるように作られた

マークアップを行う上で、最初に登場したのがHTMLXMLなどのマークアップ言語です。しかし、マークアップ言語でマークアップを行おうとすると、専門的な知識など覚えることが多く大変でした。そこで、マークアップ言語を簡略化できるよう開発されたのが、マークダウン記法です。

マークアップとマークダウンの違い

書き方の形式が異なる

マークアップは「タグ」で特定の文字列で囲む作業

マークアップを行う際には、不等号の記号と特定の文字列を組み合わせたタグを使用します。タグの種類はたくさんあり、書き方のルールも細かいのが特徴。各タグ毎に固有のルールが存在し、書き方を誤るとエラーがプログラムにエラーが生じます。

マークダウンは主に特殊記号を使用して文章を組み立てる作業

マークアップの書き方を簡略化したマークダウン記法は、私たちが普段見慣れたシャープ(#)やアスタリスク(*)などの特殊記号を使用します。マークアップで使用するタグに対し、マークダウンで使用する記号の方が覚えやすくタイピング数も少ないのがポイント。簡単に書けるので、効率よく作業できるのがマークダウンのメリットですね。

マークダウンの書き方

文全体を装飾する場合

見出し

冒頭に「#」(シャープ)を入力し、半角スペースを空けて文字を入力することで、入力後の文が見出しになります。「#」の数で見出しのレベル(大きさ)を変更できますよ。一例として、当記事の「マークダウンの書き方」は見出し2、「文章全体を装飾する場合」は見出し3、「見出し」は見出し4で定義しています。

箇条書き

冒頭に「-」(ハイフン)を入力し、半角スペースを空けて文字を入力することで、入力後の文が箇条書きになります。半角数字と「.」(ピリオド)で1.2.3.と書いていけば、箇条書きを数字で表現することも可能。また、番号付きリストと丸や四角の箇条書リストを組み合わせることもできますよ。

リンク

[表示する文字]+(リンク先URL)

「[]」(角括弧)に表示したい文字、「()」(丸括弧)の中にリンク先のURLを入力することで、指定したURLへリンクできるようになります。このリンクを使い回したい場合、「:」(コロン)を用いて、URLに文字を登録。リンク先を呼び出したいときは、URLに登録した文字を指定するだけで簡単にリンクできますよ。一度使用したリンク先を呼び出したいときは、「[]」を2回使用するだけで完結するので、再度URLを入力する手間が省けます。

引用

冒頭に不等号「>」(大なり)を入力し、半角スペースを空けて文字を入力することで、入力後の文が引用文になります。

文字の一部を装飾する場合

斜体

*+斜め文字+*

「*」(アスタリスク)で囲んだ文字が斜めになります。

太字

**+太字+**

「*」(アスタリスク)を二個使用して囲んだ文字が太字になります。

訂正線

~~+訂正文字+~~

「~」(波線)を二個使用して囲んだ文字に訂正線が引かれます。

文章構造を装飾する場合

水平線

「*」(アスタリスク)もしくは「-」(ハイフン)三個で水平線が引かれます。

表(テーブル)

表の中で分けたい部分に「|」(縦線)を入れ、次の行で文字の部分を「-」(ハイフン)変えて入力。その後は、表に入れたい文字や数字を境界に縦線を入れながら書いていくことで完成します。

画像

!+[画像名]+(画像URL)

「!」(ビックリマーク)に「[]」(角括弧)、「()」丸括弧で画像を表示できます。「[]」の中には画像の名前、「()」には画像のURLを入力することで、保存先から指定の画像を呼び出すことができますよ。

コード

コードは「`」(バッククォート)で囲むと表示できます。インラインコードは一個、コードブロックは三個記述します。

マークダウンにおすすめのテキストエディタ

Mac対応でおすすめ

Atom

GitHubが開発した完全無料のテキストエディタ。書いたコードがどのように反映されるのか、プレビュー画面ですぐに確認することができます。

Windows対応でおすすめ

Visual Studio Code

Microsoft社が提供する無料のテキストエディタ。使いやすく初心者の方にもおすすめです。

まとめ

覚えるためにエディタでマークダウンをどんどん書いていこう

マークダウンはマークアップに比べて覚えることが少なく、タイプ数も少なくて済むのがメリットです。しかし、インプットするだけでは中々覚えられません。記事中で挙げている例などを参考に、是非エディタで色々な表現方法を試してみてくださいね。

あなたにおすすめ


  • このエントリーをはてなブックマークに追加

コメントを残す

*