前回、EvernoteにMarkdown記法でメモを残せるMarxicoを紹介しました。
これを書くにあたって、Markdown記法の書き方を見返してみたのですが、ほとんど使用してない書き方は、忘れてしまっているものが結構ありました。
Markdown記法は、とても簡単な書き方なので、忘れる人もあまりないとは思います。ただ、僕の場合とても忘れっぽいので、備忘録がてらのまとめ。
目次
Markdown記法とは
Markdown記法とは、軽量マークアップ言語のひとつです。
HTMLでマークアップを手打ちしたことがある方ならわかると思うのですが、テキストエディタでタグを打ち込むのは、結構大変ですし、慣れないうちは覚えきれない部分もあります。
ただ、Markdown記法を利用すると、覚えやすいちょっとした書き方を守ってプレーンテキストを書くだけで、HTMLを生成できるようになります。
ですので慣れてしまえば、HTMLを手入力したり、ツールなどでタグ付けなどをするよりは、早く基本的なHTML文書なら作成することができます。
Markdown記法を、ちょっとブラウザから試してみる場合は、以下のツールなどが便利です。
Markdown記法の書き方
Markdown記法を使うと、覚えやすい少ない文字で手軽にHTMLを書ける作りになっており、入力のコストを削減することができます。（※全てのHTMLの能力を利用できるわけではありません。）
段落
<p>タグを使った段落です。段落を分けて挿入するには、空行を挟んで文章を書きます。
記入例
段落を分けるには、空行で分ければOKです。 このとき、段落をスペースやタブでインデントするのはNG。
HTML出力
<p>段落を分けるには、空行で分ければOKです。</p> <p>このとき、段落をスペースやタブでインデントするのはNG。</p>
表示例
※見た目は、出力するツールやソフトによって異なります。
改行
<br>タグを使った改行です。文末に半角スペースを2つ入れます。
記入例
文中で強制的に改行をするには、 文末に半角スペースを2つ入れてください→ これで改行されているはずです。
HTML出力
<p>文中で強制的に改行をするには、 <br /> 文末に半角スペースを2つ入れてください→ <br /> これで改行されているはずです。</p>
表示例
テキストの強調
<em>や<strong>を用いた強調表示をするには、「*（アスタリスク）」や、「_（アンダーバー）」で強調したい文字を囲みます。
記入例
通常の強調は*アスタリスク*もしくは_アンダーバー_で囲みます。 強い協調は、**アスタリスク2つ**もしくは__アンダーバー2つ__で囲みます。
HTML出力
<p>通常の強調は<em>アスタリスク</em>もしくは<em>アンダーバー</em>で囲みます。</p> <p>強い協調は、<strong>アスタリスク2つ</strong>もしくは<strong>アンダーバー2つ</strong>で囲みます。</p>
表示例
見出し
<h1>～<h6>までの見出しをつけるには、「#（シャープ）」を用います。
h1とh2のみ、「=（イコール）」と、「-（ハイホン）」を用いた書き方もあります。
記入例
##見出し #見出し1 見出し1 ===== ##見出し2 見出し2 -------- ###見出し3 ####見出し4 #####見出し5 ######見出し6
HTML出力
<h1>見出し1</h1> <h1>見出し1</h1> <h2>見出し2</h2> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4> <h5>見出し5</h5> <h6>見出し6</h6>
表示例
順序なしリスト
<ul><li>の順序なしリストをマークアップするには、「*（アスタリスク）」、「+（プラス）」、「-（ハイホン）」を文頭において、半角スペースを入れます。
記入例
＊アスタリスク
* リストアイテム1 * リストアイテム2 * リストアイテム3
+プラス
+ リストアイテム1 + リストアイテム2 + リストアイテム3
-ハイホン
- リストアイテム1 - リストアイテム2 - リストアイテム3
HTML出力
上記のものはすべて以下のように出力されます。
<ul> <li>リストアイテム1</li> <li>リストアイテム2</li> <li>リストアイテム3</li> </ul>
表示例
順序付きリスト
<ol><li>を用いる順序付きリストは、文頭に『「半角数字」＋「.（ドット）」＋「半角スペース」』といったようにマークアップします。「1. 」といったような感じです。
記入例
1. リストアイテム1 2. リストアイテム2 3. リストアイテム3
HTML出力
<ol> <li>リストアイテム1</li> <li>リストアイテム2</li> <li>リストアイテム3</li> </ol>
表示例
引用
<blockquote>を用いる引用は、「>（大なり記号）」＋「半角スペース」を用います。
記入例
> 私はその人を常に先生と呼んでいた。 > だからここでもただ先生と書くだけで本名は打ち明けない。 > これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。
HTML出力
<blockquote> <p> 私はその人を常に先生と呼んでいた。 だからここでもただ先生と書くだけで本名は打ち明けない。 これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。</p> </blockquote>
表示例
リンク
<a>リンクでマークアップする方法です。以下は、最も簡単なリンク方法です。
記入例
[寝ログ](https://nelog.jp/) [寝ログ](https://nelog.jp/ "リンクのタイトル") [Simplicity](wp-simplicity.com) [Simplicity](wp-simplicity.com "無料のWordpressテーマ")
URL後に、半角スペースを挟んで文字列を「”（ダブルクォーテーション）」で囲むことにより、title属性を付加することができます。
HTML出力
<p><a href="https://nelog.jp/">寝ログ</a></p> <p><a href="https://nelog.jp/" title="リンクのタイトル">寝ログ</a></p> <p><a href="wp-simplicity.com">Simplicity</a></p> <p><a href="wp-simplicity.com" title="無料のWordpressテーマ">Simplicity</a></p>
表示例
参照目的のリンク
以下のように、リンク部分を参照として後でまとめて書けるようにもできます。参照目的のリンクを利用することで、文章部分に長いURLが入り込まないことにより、文章が読みやすくなります。
記入例
[当サイト][nelog]の名前は、[寝ログ][nelog]と言います。 他には、[Simplicity][1]というサイトもやっています。 よく[Amazon][2]で買い物をしますが[楽天][3]ではあまり買い物しません。 [nelog]: https://nelog.jp/ [1]: wp-simplicity.com "無料Wordpressテーマ" [2]: http://www.amazon.co.jp/ [3]: http://www.rakuten.co.jp/
HTML出力
<p><a href="https://nelog.jp/">当サイト</a>の名前は、<a href="https://nelog.jp/">寝ログ</a>と言います。 他には、<a href="wp-simplicity.com" title="無料Wordpressテーマ">Simplicity</a>というサイトもやっています。 よく<a href="http://www.amazon.co.jp/">Amazon</a>で買い物をしますが<a href="http://www.rakuten.co.jp/">楽天</a>ではあまり買い物しません。</p>
表示例
参照目的で、他の部分に書いたURLなどは当然表示されません。
コード
<code>や<pre>を用いるマークアップ方法です。
インラインコード、<code>は、「’（バッククォート）」で囲みます。
コードを整形済みテキスト<pre>で表示するには、行頭に半角スペースを4つ以上書きます。
記述例
インラインコードは、`inline code`のように記述します。
def say_hello
puts "Hello World!"
end
say_hello
#←行頭に半角スペース4つ以上
HTML出力
<p>インラインコードは、<code>inline code</code>のように記述します。</p> <pre><code>def say_hello puts "Hello World!" end say_hello #←行頭に半角スペース4つ以上 </code></pre>
表示例
水平線
<hr>を用いた水平線は、1行の中に3つ以上の「*（アスタリスク）」、「-（ハイホン）」、「_（アンダーバー）」を続けると利用できます。
＊、-、_の間には半角スペースを入れてもOK。
記入例
以下のものは、すべて<hr>に変換されます。
*** * * * --- ---------------------------- ___ ______________ _______________
HTML出力
<hr /> <hr /> <hr /> <hr /> <hr /> <hr />
表示例
今回利用した記入例
とりあえず、今回利用した記入例を以下に載せておきます。
Markdown記法のチートシート
===============
##段落
段落を分けるには、空行で分ければOKです。
このとき、段落をスペースやタブでインデントするのはNG。
##改行
文中で強制的に改行をするには、
文末に半角スペースを2つ入れてください→
これで改行されているはずです。
##テキストの強調
通常の強調は*アスタリスク*もしくは_アンダーバー_で囲みます。
強い協調は、**アスタリスク2つ**もしくは__アンダーバー2つ__で囲みます。
##見出し
#見出し1
見出し1
=====
##見出し2
見出し2
--------
###見出し3
####見出し4
#####見出し5
######見出し6
##順序なしリスト
*で記入
* リストアイテム1
* リストアイテム2
* リストアイテム3
*で記入
+ リストアイテム1
+ リストアイテム2
+ リストアイテム3
-で記入
- リストアイテム1
- リストアイテム2
- リストアイテム3
##順序付きリスト
1. リストアイテム1
2. リストアイテム2
3. リストアイテム3
##引用
> 私はその人を常に先生と呼んでいた。
> だからここでもただ先生と書くだけで本名は打ち明けない。
> これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。
##リンク
[寝ログ](https://nelog.jp/)
[寝ログ](https://nelog.jp/ "リンクのタイトル")
[Simplicity](wp-simplicity.com)
[Simplicity](wp-simplicity.com "無料のWordpressテーマ")
##参照目的のリンク
[当サイト][nelog]の名前は、[寝ログ][nelog]と言います。
他には、[Simplicity][1]というサイトもやっています。
よく[Amazon][2]で買い物をしますが[楽天][3]ではあまり買い物しません。
[nelog]: https://nelog.jp/
[1]: wp-simplicity.com "無料Wordpressテーマ"
[2]: http://www.amazon.co.jp/
[3]: http://www.rakuten.co.jp/
##コード
インラインコードは、`inline code`のように記述します。
def say_hello
puts "Hello World!"
end
say_hello
#←行頭に半角スペース4つ以上
##水平線
***
* * *
---
----------------------------
___
______________ _______________
Online Markdown Editor、もしくはMarxicoなどを利用して、いろいろ触って遊んでみると、かなり簡単であることがわかると思います。（それでも、しばらく使っていないと一部忘れてしまっていましたが。）
まとめ
Markdown記法を利用すれば、このように直感的な書き方で、基本的なHTMLなら手軽に利用することができます。
Markdown記法は、サービスによりそれぞれの方言がありますが、上記のものなら、だいたいどのサービスでも利用できるかと思います。
とりあえず、結構僕は面倒臭がりなので、このように少しでもキータッチを少なくできる書き方で、主なHTMLタグをマークアップできるのは、助かります。
