マークダウンとは?Markdownの使い方について(コードの書き方、HTMLへの変換方法)
マークダウン(Markdown)とはオンライン文書の文書構造を下書きの段階から明示できる記述法です。
簡単な記号をつけるだけで、HTMLタグを打たなくても見出しや文章・箇条書きなどの構造を明示できます。
ほぼ共通の記述ルールなので共有しやすく、HTMLへもすぐに変換できるアプリが数多くあります。
マークダウンとは?
Markdown(マークダウン)とは、オンライン文書を活用するための統一管理方法として考案された文章の書き方です。
例えばメールの場合、基本的には見出しや段落などのルールがないので自由に書く事ができますよね。
しかし「文書」となると大見出しや小見出し、段落や小節など様々な構造があります。
オンライン上で文書構造をどのように表現するか
紙面に書いた文章と違い、オンライン文書は統一された記述ルールがないと誰もが同じように各構造を把握して読む事はできません。
オンライン上で文書の重要度や区分けをどのように表現するか、これを取り決める「下地ルール」がMarkdownと呼ばれるものです。
文書構造とは
文章には「章」や「節」といった「見出し」がありますし、各章や小節内には「段落」や「箇条書き」があります。
オンライン文書であれば「リンク」や画像も使われますよね。
文章のパーツそれぞれが分類化されたものを文章構造と言い、それを明示する事で便利に読み書きができているのです。
マークダウンの特徴
・WEB上の世界共通文法
・手軽な記号で文章構造を明示できる
・簡単で覚えやすい
・読み書きにはアプリは不要
・アプリにより即HTML変換できる
マークダウンがなぜ必要か
オンライン文書はWEBサイト上で確認する事がほとんどです(PDFとして確認する事もあります)。
ここが紙面の文書と大きく違う点ですよね。
通達をする文書は大見出しや小見出しや段落などで構成されています。同じ事がオンライン文書でも必要です。
タグを打つ前に文書構造をイメージできる
紙面の文書は大見出しや小見出しは文字の大きさや太さを変えればすぐに認識できますよね。
しかしオンライン文書の場合はHTMLタグを打たなければ文字は大きくなりませんし、タグの効果が反映されるのはブラウザで表示した時です。
下書きをしている段階からタグを打つのは非常に面倒なわけですね。
メンバーで文書構造イメージを共有
特に共同で文書を作成する際などは、見出しで書く部分や箇条書きで書く部分などの取り決めをメンバーで共有しておく必要があります。
このマークダウンを使えば、タグが入る前から「ここにはこのタグが入ってこういう風になる」とイメージできる訳です。
このマークダウンには世界共通の記述ルールがあります(細かいルールは分かれていますが)。
このルールがあるので、知らない人からもらった文書でもおおよその構造がわかるのです。
マークダウンの記述ルール
Markdownの代表的なルールには以下のような例があります。
基本的に記号の後ろは半角空ける
段落は空行で一行開ける
見出しは行頭に# を書く。その数でh1~h6を表現
引用は行頭に> を書く
リストは行頭に* + - や1. 2. 3. を書く
リンクは[]の中にリンク文字を書き、次に()の中にURLを書く
画像は![]の中にALTテキストを書き、次に()の中にパスを書く
Markdownは基本的にオンライン文書である「WEBサイトのHTMLコード」を簡単に書く事を目的としています。
HTMLでよく使われるタグは複雑で種類も多いのですが、これをHTMLより容易に記述できる書式と考えて下さい。
MarkdownだけではHTMLを完全に表現できない
ただ、Markdownだけで完璧にHTMLを表現できる訳ではありません。
複雑になる様な箇所があれば、直接HTMLタグを使って表現しなければなりません。
Markdownはあくまでシンプルな文書構造を反映させるためにできていると言えます。
Markdownを使う際の注意点
いくつかMarkdownを使う際の注意点をご紹介しましょう。
ブロック要素内ではMarkdownの記述が適用されない
ブロック要素の認識は以下のルールを守れば反映されます。
・前後に空行を置く
・タグは行頭に置く(手前にスペースやタブを入れない)
このように記述したブロック要素の内部では、Markdownの記法が適用されません。
以下はMarkdown強調表示の例です。
ここから文章が*shatai*になっています。
次はその変換結果です(多くのブラウザは斜体で表示されます)。
ここから文章がshataiになっています。
しかし次の例ではブロック要素が入るので、その内部では強調表示の「*...*」が適用されません。
(改行)
ここから文章が*shatai*になっています。
(改行)
結果は次の通りとなります。
<p>ここから文章がshataiになっています。</p>(中は斜体になっていない)
インライン要素内ではMarkdown文法が有効になる。
ブロック要素ではなくインライン要素であれば中もMarkdownの記述ができます。
ここから<span style="color:green">文章が緑で*shatai*になっています。</span>
上記の様に書くと結果は次の通りです。
ここから文章が緑でshataiになっています。
特殊文字の自動エスケープ
HTMLには特別な扱いを必要とする2つの文字があります。
それが<と&です。
左山括弧「<」はタグの開始に使用されます。
アンパサンド「&」は、HTMLエンティティを示すために使用されます。
それらをリテラル文字として使用したい場合は「<」や「&」としてエスケープする必要があります。
エスケープ例
AT&Tは、AT「& a m p ;」Tと書く 4 < 5は、4「& l t ;」5と書く
Markdown具体的な書き方(代表例)
・段落(pタグ)
(改行)
文章が入ります。
(改行)
前後が一行段落を開いた状態(スペースやタブで開けない事)
生成されたコード
<p>文章が入ります。</p>
・改行(brタグ)
改行したい位置でEnterで見た目の改行しておき、本来の改行位置で半角スペースを2回入れる。
文章の終わりです。 (←半角スペースが2個入っている)
次の文章です。
生成されたコード
<p>文章の終わりです。<br> 次の文章です。</p>
改行を入れるコツ
まずは記述ソフト上でEnterで改行しておきますが、このままではHTML変換後は改行されません。
上の文末に移動し、半角スペースを2回入れておくと変換後はbrタグが入ります。
「まずはEnter、その後文末で半角スペース2回」と覚えておきましょう。
・見出し(h1-h6タグ)
# h1
## h2
### h3
#### h4
##### h5
###### h6
閉じる際の#は必須ではないし、数は何個でも良い(見た目を揃えるため開始数と同じ数が好ましい)
生成されたコード
# 見出しタイトル # <h1> id="見出しタイトル">見出しタイトル</h1> ## header <h2> id="header">header</h2> ### 見出しタイトル3 <h3> id="見出しタイトル3">見出しタイトル3</h3>
id属性について
現状、各hタグタイトルを日本語で書くとid=""内に日本語が入ります。英数字であればそのまま英数字です。
・引用(blockquoteタグ)
> 文章が入ります。
> で始めると引用文タグが設置できます。
生成されたコード
<blockquote>文章が入ります。</blockquote>
・リスト(ul・liタグ)
箇条書き(番号なし・あり)
*
+
-
1.
2.
3.
番号は数字が順番でなくても全てリストタグとして機能します。
+ リストA
+ リストB
- リストC
1. リストD
2. リストE
上記の様に記号と番号を混ぜても全て共通でリスト化されます。
生成されたコード
<ul> <li>リストA</li> <li>リストB</li> <li>リストC</li> <li>リストD</li> <li>リストE</li> </ul>
・リンク(aタグ)
インラインリンクを作成するには角かっこの中にリンクテキストを入れ、すぐに通常のかっこを挿入します。
通常かっこ内にリンクURLを入れ、半角スペースした引用符内にリンクタイトルを配置できます。
[タイトルなし](https://example.com/)
[タイトル付き](https://example.com/ "タイトル")
生成されたコード
<p><a href="https://example.com/">リンクタイトルなし</a></p> <p><a href="https://example.com/" title="タイトル">タイトル付き</a></p>
相対パス
同じサーバー上のローカルリソースを参照する場合は、相対パスを使用できます。
詳しくは[こちら](/contact/ "お問い合わせフォーム")
詳しくは<a href="/contact/" title="お問い合わせフォーム">こちら</a>
・画像(imgタグ)
インライン画像の構文
インライン画像の構文は次のようになります。
![Altテキスト](images/top_img.jpg)
![Altテキスト](images/top_img.jpg "画像説明")
生成されたコード
<img src="images/top_img.jpg" alt="Altテキスト"> <img src="images/top_img.jpg" alt="Altテキスト" title="画像説明">
参照スタイルの画像構文
![Altテキスト][id]
[id]: images/top_img.jpg "画像説明"
生成されたコード
<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ソースをコピーできますので、メモ帳などに張り付けましょう。
まとめ
以上マークダウンについてご紹介をしました。
マークダウンのポイントと記述ルールを今一度おさらいしておきましょう。
マークダウンのポイント
オンライン文書の下書きによく使われる
簡単な記号で文章構造を明示する事ができる
ほぼ共通の記述ルールがある
HTMLへすぐに変換できる
HTMLへ変換できるアプリが数多くある
あまり複雑なHTML構造は実現できない
マークダウンの記述の仕方
基本的に記号の後ろは半角空ける
段落は空行で一行開ける
見出しは行頭に# を書く。その数でh1~h6を表現
引用は行頭に> を書く
リストは行頭に* + - や1. 2. 3. を書く
リンクは[]の中にリンク文字を書き、次に()の中にURLを書く
画像は![]の中にALTテキストを書き、次に()の中にパスを書く