マークダウンとは？Markdownの使い方について（コードの書き方、HTMLへの変換方法）

マークダウン（Markdown）とはオンライン文書の文書構造を下書きの段階から明示できる記述法です。

簡単な記号をつけるだけで、HTMLタグを打たなくても見出しや文章・箇条書きなどの構造を明示できます。

ほぼ共通の記述ルールなので共有しやすく、HTMLへもすぐに変換できるアプリが数多くあります。

マークダウンとは？

Markdown（マークダウン）とは、オンライン文書を活用するための統一管理方法として考案された文章の書き方です。

例えばメールの場合、基本的には見出しや段落などのルールがないので自由に書く事ができますよね。

しかし「文書」となると大見出しや小見出し、段落や小節など様々な構造があります。

オンライン上で文書構造をどのように表現するか

紙面に書いた文章と違い、オンライン文書は統一された記述ルールがないと誰もが同じように各構造を把握して読む事はできません。

オンライン上で文書の重要度や区分けをどのように表現するか、これを取り決める「下地ルール」がMarkdownと呼ばれるものです。

文書構造とは

文章には「章」や「節」といった「見出し」がありますし、各章や小節内には「段落」や「箇条書き」があります。

オンライン文書であれば「リンク」や画像も使われますよね。

文章のパーツそれぞれが分類化されたものを文章構造と言い、それを明示する事で便利に読み書きができているのです。

マークダウンの特徴

マークダウンがなぜ必要か

オンライン文書はWEBサイト上で確認する事がほとんどです（PDFとして確認する事もあります）。

ここが紙面の文書と大きく違う点ですよね。

通達をする文書は大見出しや小見出しや段落などで構成されています。同じ事がオンライン文書でも必要です。

タグを打つ前に文書構造をイメージできる

紙面の文書は大見出しや小見出しは文字の大きさや太さを変えればすぐに認識できますよね。

しかしオンライン文書の場合はHTMLタグを打たなければ文字は大きくなりませんし、タグの効果が反映されるのはブラウザで表示した時です。

下書きをしている段階からタグを打つのは非常に面倒なわけですね。

メンバーで文書構造イメージを共有

特に共同で文書を作成する際などは、見出しで書く部分や箇条書きで書く部分などの取り決めをメンバーで共有しておく必要があります。

このマークダウンを使えば、タグが入る前から「ここにはこのタグが入ってこういう風になる」とイメージできる訳です。

このマークダウンには世界共通の記述ルールがあります（細かいルールは分かれていますが）。

このルールがあるので、知らない人からもらった文書でもおおよその構造がわかるのです。

マークダウンの記述ルール

Markdownの代表的なルールには以下のような例があります。

Markdownは基本的にオンライン文書である「WEBサイトのHTMLコード」を簡単に書く事を目的としています。

HTMLでよく使われるタグは複雑で種類も多いのですが、これをHTMLより容易に記述できる書式と考えて下さい。

MarkdownだけではHTMLを完全に表現できない

ただ、Markdownだけで完璧にHTMLを表現できる訳ではありません。

複雑になる様な箇所があれば、直接HTMLタグを使って表現しなければなりません。

Markdownはあくまでシンプルな文書構造を反映させるためにできていると言えます。

Markdownを使う際の注意点

いくつかMarkdownを使う際の注意点をご紹介しましょう。

ブロック要素内ではMarkdownの記述が適用されない

ブロック要素の認識は以下のルールを守れば反映されます。

このように記述したブロック要素の内部では、Markdownの記法が適用されません。

以下はMarkdown強調表示の例です。

次はその変換結果です（多くのブラウザは斜体で表示されます）。

ここから文章がshataiになっています。

しかし次の例ではブロック要素が入るので、その内部では強調表示の「*...*」が適用されません。

結果は次の通りとなります。

<p>ここから文章がshataiになっています。</p>（中は斜体になっていない）

インライン要素内ではMarkdown文法が有効になる。

ブロック要素ではなくインライン要素であれば中もMarkdownの記述ができます。

ここから<span style="color:green">文章が緑で*shatai*になっています。</span>

上記の様に書くと結果は次の通りです。

ここから文章が緑でshataiになっています。

特殊文字の自動エスケープ

HTMLには特別な扱いを必要とする2つの文字があります。

それが<と&です。

それらをリテラル文字として使用したい場合は「<」や「&」としてエスケープする必要があります。

エスケープ例

AT&Tは、AT「& a m p ;」Tと書く 4 < 5は、4「& l t ;」5と書く

Markdown具体的な書き方（代表例）

・段落（pタグ）

前後が一行段落を開いた状態（スペースやタブで開けない事）

生成されたコード

<p>文章が入ります。</p>

・改行（brタグ）

改行したい位置でEnterで見た目の改行しておき、本来の改行位置で半角スペースを2回入れる。

生成されたコード

<p>文章の終わりです。<br> 次の文章です。</p>

改行を入れるコツ

まずは記述ソフト上でEnterで改行しておきますが、このままではHTML変換後は改行されません。

上の文末に移動し、半角スペースを2回入れておくと変換後はbrタグが入ります。

「まずはEnter、その後文末で半角スペース2回」と覚えておきましょう。

・見出し（h1-h6タグ）

閉じる際の#は必須ではないし、数は何個でも良い（見た目を揃えるため開始数と同じ数が好ましい）

生成されたコード

# 見出しタイトル # <h1> id="見出しタイトル">見出しタイトル</h1> ## header <h2> id="header">header</h2> ### 見出しタイトル3 <h3> id="見出しタイトル3">見出しタイトル3</h3>

id属性について

現状、各hタグタイトルを日本語で書くとid=""内に日本語が入ります。英数字であればそのまま英数字です。

・引用（blockquoteタグ）

> で始めると引用文タグが設置できます。

生成されたコード

<blockquote>文章が入ります。</blockquote>

・リスト（ul・liタグ）

箇条書き（番号なし・あり）

番号は数字が順番でなくても全てリストタグとして機能します。

上記の様に記号と番号を混ぜても全て共通でリスト化されます。

生成されたコード

<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> <li>リストD</li> <li>リストE</li> </ul>

・リンク（aタグ）

インラインリンクを作成するには角かっこの中にリンクテキストを入れ、すぐに通常のかっこを挿入します。

通常かっこ内にリンクURLを入れ、半角スペースした引用符内にリンクタイトルを配置できます。

生成されたコード

<p><a href="https://example.com/">リンクタイトルなし</a></p> <p><a href="https://example.com/" title="タイトル">タイトル付き</a></p>

相対パス

同じサーバー上のローカルリソースを参照する場合は、相対パスを使用できます。

詳しくは<a href="/contact/" title="お問い合わせフォーム">こちら</a>

・画像（imgタグ）

インライン画像の構文

インライン画像の構文は次のようになります。

生成されたコード

<img src="images/top_img.jpg" alt="Altテキスト"> <img src="images/top_img.jpg" alt="Altテキスト" title="画像説明">

参照スタイルの画像構文

生成されたコード

<img src="images/top_img.jpg" alt="Altテキスト" title="画像説明">

Markdownには画像のサイズを指定する構文はありませんので、サイズ指定が必要な場合は通常の<img>タグを使います。

マークダウンの使い方

HTML文書を手書きするのは大変な作業

MarkdownはよくHTMLの代わりとして使われる事が多くあります。

しかし通常の文章に加えてHTMLタグで囲みながらを書くのは簡単ではありません。

HTMLを書く時に使う文章タグ<p>やリストタグ<li>は、<p>なら</p>と、閉じるタグも必ず入れなければなりませんからね。

HTMLタグに注意がいってしまう

同時にこなしているとどうしてもタグを打つ事に重きが置かれてしまい、結果本来の文章作成に集中できなくなる訳です。

ですので文章作成に気軽に使えるとは決して言えません。

マークダウンはHTML変換も容易

しかしMarkdownの書き方はタグと比べると簡単ですし、HTMLに簡単に変換する事ができます。

そのためのアプリが多数ありますので、Markdownで書いた後はすぐにHTMLタグ付きの状態に変換できます。

仮にMarkdownに未対応のソフトでも、HTMLに変換する場合はMarkdownに対応したアプリにコピー&ペーストするだけですからね。

WordpressはMarkdown対応

今主流のCMS（コンテンツ管理システム）であるWordpressは、Markdownの文法変換に対応しているので、そのままコピー&ペーストする事で投稿できます。

投稿画面の欄にタグを打たずに直接文字を入力しても、投稿ページはきちんと表示されていますよね。あれがまさにそうです。

入力画面の空白段落がそのままpタグとして判断・自動挿入されています。

ローカルで記事を書く際のタグ目安として使う

今日も大勢のブロガーや企業WEB担当者が、Markdownでブログ記事やコンテンツを書いています。

記事はブログ等のCMS管理画面上に直接書くのではなく、まずはローカル環境で下書きを作ります。

その方が簡単ですし、チームでプロジェクトを進める時などは共有もしやすく大変便利です。

この時Markdownで記述しておけば、メンバーは下書きの段階から文書構造の把握ができます。

最終的にインターネット上に文書として上がる時にHTMLに変換できていればいい訳ですからね。

HTMLへ変換できるソフト例

Brackets

Markdownを使うならAdobeのテキストエディタ「Brackets」がお勧めです。

無料で使えて、かつmarkdownの文書と実際のHTMLプレビューとを確認しながら記述できます。

インストール

1.Bracketsを持っていない場合は、ダウンロードしましょう。

2.「ファイル」メニューから「拡張機能マネージャー」を開きます。

3.「入手可能」タブを開いて検索窓に「MarkDown」と入力して検索します。

4.表示された一覧から「MarkDown Preview」の右端の「インストール」をクリックしましょう。

これでインストールは完了です。

プレビューの使い方

Bracketsで変換したい文書テキストファイル（Markdownで記述済み）を開きます。

「表示」メニューから一番下にある「MarkDown Preview」を押します。

すると下のプレビューエリアに、マークアップされたページが表示されます。

上のテキストを直接編集すると、下のプレビューが自動更新されるので、きちんとMarkdownの記述ができているか一発でわかります。

HTMLタグソースのコピペ

実際のHTMLソースを貼り付ける段階になっても操作は簡単です。

プレビューエリアの白地内で右クリック→「」をクリックします。

テキストファイルでコードが表示されますので必要な箇所をコピペして使えます。

GoogleChromeでのマークダウンの確認

書いた文書ファイルをGoogleChromeのブラウザにドラッグドロップするとHTML変換された状態をプレビューできます。

手元のメモ帳などのソフトで文書を修正しつつ、ブラウザで確認ができます。

Chrome ウェブストアより「Markdown Preview Plus」アプリを追加します。

次はchrome://extensionsにアクセスしましょう。アドレス欄に左のURLを貼り付けてください。

Markdown Preview Plusを選択し、「ファイルURLへのアクセスを許可する」にチェックを入れます。

プレビュー例

Markdownの記述をプレビューした状態

HTMLソースの確認

右上の拡張機能の欄に「Markdown Preview Plus」のアイコンを出しましょう。

アイコンをクリックし、メニューから「Copy as html」を押すとHTMLソースをコピーできますので、メモ帳などに張り付けましょう。

まとめ

以上マークダウンについてご紹介をしました。

マークダウンのポイントと記述ルールを今一度おさらいしておきましょう。

マークダウンのポイント

マークダウンの記述の仕方

一押し人気コーナー紹介