省エネHTML入力!基本Markdown記法のチートシート

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

前回、EvernoteにMarkdown記法でメモを残せるMarxicoを紹介しました。

EvernoteにMarkdown記法でメモできるChromeアプリ「Marxico」が便利
Evernoteはメモを手軽にノートに残せて便利です。 文字を装飾しようと思えば、ツールボタンでも装飾できます。 ただ、文字を選...

これを書くにあたって、Markdown記法の書き方を見返してみたのですが、ほとんど使用してない書き方は、忘れてしまっているものが結構ありました。

Markdown記法は、とても簡単な書き方なので、忘れる人もあまりないとは思います。ただ、僕の場合とても忘れっぽいので、備忘録がてらのまとめ。

スポンサーリンク
レクタングル(大)広告

Markdown記法とは

Markdown記法

Markdown記法とは、軽量マークアップ言語のひとつです。

HTMLでマークアップを手打ちしたことがある方ならわかると思うのですが、テキストエディタでタグを打ち込むのは、結構大変ですし、慣れないうちは覚えきれない部分もあります。

ただ、Markdown記法を利用すると、覚えやすいちょっとした書き方を守ってプレーンテキストを書くだけで、HTMLを生成できるようになります。

ですので慣れてしまえば、HTMLを手入力したり、ツールなどでタグ付けなどをするよりは、早く基本的なHTML文書なら作成することができます。

Markdown記法を、ちょっとブラウザから試してみる場合は、以下のツールなどが便利です。

Markdown記法の書き方

Markdown記法を使うと、覚えやすい少ない文字で手軽にHTMLを書ける作りになっており、入力のコストを削減することができます。(※全てのHTMLの能力を利用できるわけではありません。)

段落

<p>タグを使った段落です。段落を分けて挿入するには、空行を挟んで文章を書きます。

記入例

HTML出力

表示例

Markdown記法 段落

※見た目は、出力するツールやソフトによって異なります。

改行

<br>タグを使った改行です。文末に半角スペースを2つ入れます。

記入例

HTML出力

表示例

Markdown記法 改行

テキストの強調

<em>や<strong>を用いた強調表示をするには、「*(アスタリスク)」や、「_(アンダーバー)」で強調したい文字を囲みます。

記入例

HTML出力

表示例

Markdown記法 テキストの強調

見出し

<h1>~<h6>までの見出しをつけるには、「#(シャープ)」を用います。

h1とh2のみ、「=(イコール)」と、「-(ハイホン)」を用いた書き方もあります。

記入例

HTML出力

表示例

Markdown記法 見出し

順序なしリスト

<ul><li>の順序なしリストをマークアップするには、「*(アスタリスク)」、「+(プラス)」、「-(ハイホン)」を文頭において、半角スペースを入れます。

記入例

*アスタリスク

+プラス

-ハイホン

HTML出力

上記のものはすべて以下のように出力されます。

表示例

Markdown記法 順序なしリスト

順序付きリスト

<ol><li>を用いる順序付きリストは、文頭に『「半角数字」+「.(ドット)」+「半角スペース」』といったようにマークアップします。「1. 」といったような感じです。

記入例

HTML出力

表示例

Markdown記法 順序付リスト

引用

<blockquote>を用いる引用は、「>(大なり記号)」+「半角スペース」を用います。

記入例

HTML出力

表示例

Markdown記法 引用

リンク

<a>リンクでマークアップする方法です。以下は、最も簡単なリンク方法です。

記入例

URL後に、半角スペースを挟んで文字列を「”(ダブルクォーテーション)」で囲むことにより、title属性を付加することができます。

HTML出力

表示例

Markdown記法 リンク

参照目的のリンク

以下のように、リンク部分を参照として後でまとめて書けるようにもできます。参照目的のリンクを利用することで、文章部分に長いURLが入り込まないことにより、文章が読みやすくなります。

記入例

HTML出力

表示例

Markdown記法 参照目的のリンク

参照目的で、他の部分に書いたURLなどは当然表示されません。

コード

<code>や<pre>を用いるマークアップ方法です。

インラインコード、<code>は、「’(バッククォート)」で囲みます。

コードを整形済みテキスト<pre>で表示するには、行頭に半角スペースを4つ以上書きます。

記述例

HTML出力

表示例

Markdown記法 コード

水平線

<hr>を用いた水平線は、1行の中に3つ以上の「*(アスタリスク)」、「-(ハイホン)」、「_(アンダーバー)」を続けると利用できます。

*、-、_の間には半角スペースを入れてもOK。

記入例

以下のものは、すべて<hr>に変換されます。

HTML出力

表示例

Markdown記法 水平線

今回利用した記入例

とりあえず、今回利用した記入例を以下に載せておきます。

Online Markdown Editor、もしくはMarxicoなどを利用して、いろいろ触って遊んでみると、かなり簡単であることがわかると思います。(それでも、しばらく使っていないと一部忘れてしまっていましたが。)

まとめ

Markdown記法を利用すれば、このように直感的な書き方で、基本的なHTMLなら手軽に利用することができます。

Markdown記法は、サービスによりそれぞれの方言がありますが、上記のものなら、だいたいどのサービスでも利用できるかと思います。

とりあえず、結構僕は面倒臭がりなので、このように少しでもキータッチを少なくできる書き方で、主なHTMLタグをマークアップできるのは、助かります。