HTMLとマークダウン(Markdown)記法を覚えよう

Webライターとライターの違いはもちろん、執筆する媒体。
Webで公開されるほぼすべての文章は「HTML(HyperText Markup Language)」と呼ばれるフォーマットで書かれています。

ここでは基本的な「HTML」と、そのHTMLを誰でも簡単に書ける「マークダウン記法」をご紹介します。
「表示の一例」としてHTMLで書かれた文章がどのように見えるかも紹介していますが、HTMLはあくまで「文章の役割(意味)」を示す言語で、本来的には見栄えを制御する機能はありません。
あくまで一例としてご理解ください。

見出し(Heading)

Webの文章には欠かせない「見出し」は、英語で見出しを表す「Heading(ヘディング)」の頭文字「H」と、「1~6」までの数字で記述できます。

<h1>一番おおきな見出し</h1>
<h2>二番目におおきな見出し</h2>
<h3>三番目におおきな見出し</h3>
<h4>四番目におおきな見出し</h4>
<h5>五番目におおきな見出し</h5>
<h6>六番目におおきな見出し</h6>

きちんと情報を整理すると<h5>以降を使う機会は稀です。
マークダウン記法では、

# 一番おおきな見出し
## 二番目におおきな見出し
### 三番目におおきな見出し
#### 四番目におおきな見出し
##### 五番目におおきな見出し
###### 六番目におおきな見出し

このように「#」の数で見出しを表します。

表示の一例

見出し(Heading)

段落(Paragraph)と改行(Break)

HTMLの中で特によく使われる段落。
英語で段落を表す「Paragraph(パラグラフ)」の頭文字「P」からそのまま「p」と記述します。

<p>この文章は段落です。</p>
<p>一段落したら新しい「p」で次の段落。<br>簡単ですね!</p>

表示の上では段落ごとに一行ほどのスペースが開くのが一般的です。
マークダウン記法では、

この文章は段落です。

一段落したら新しい「p」で次の段落。
簡単ですね!

このように一行開けて書くだけで段落となります。

表示の一例

段落(Paragraph)と改行(Break)

強調(Emphasis)と強い強調(Stronger Emphasis)

重要な一文を強調する際に利用する「強調」と「強い強調」。
ノートを取る際の「赤ペン」や「蛍光ペン」に近い役割かも知れません。

<p>これだけは言いたい。<em>これはとても重要なことだと。</em></p>
<p>さらに言いたい。<strong>あれは更に、特別に重要なことだと。</strong></p>

マークダウン記法では、

これだけは言いたい。*これはとても重要なことだと。*

さらに言いたい。**あれは更に、特別に重要なことだと。**

このように「*」ひとつで囲むと強調、「**」とふたつで囲むとより強い強調となります。
重要な箇所を際立たせるのに便利な赤ペンや蛍光ペンですが、多用しすぎると結局どこが重要なのかかえってわかりにくくなってしまうため注意してください。

表示の一例

強調(Emphasis)と強い強調(Stronger Emphasis)

順番のあるリスト(Ordered List)と順番のないリスト(Unordered List)

HTMLで「箇条書き」のような「リスト」を表現する際に利用するふたつのリスト。
順番があるかどうかで二種類のリストを使い分けます。


<h1>順番のあるリスト(Ordered List)</h1> <ol> <li>中のものを取り出してください</li> <li>かやくを入れてください</li> <li>お湯をいれてください</li> <li>三分お待ちください</li> </ol> <h1>順番のないリスト(Unordered List)</h1> <ul> <li>性別、年齢不問</li> <li>履歴書をお持ちください</li> <li>アットホームな職場です</li> </ul>

順番があるかどうかを表す「ol ul」の中にリストの項目を表す「li」を記述します。
マークダウン記法では、

# 順番のあるリスト(Ordered List)

1. 中のものを取り出してください
2. かやくを入れてください
3. お湯をいれてください
4. 三分お待ちください

# 順番のないリスト(Unordered List)

- 性別、年齢不問
- 履歴書をお持ちください
- アットホームな職場です

このように記述できます。
ほとんど見たままでわかりやすいですね。

表示の一例

順番のあるリスト(Ordered List)と順番のないリスト(Unordered List)

引用(Quote)

自分以外の言葉や文章を引用する際は「引用のかたまり」を表す「Block Quote」を利用します。

<blockquote>
Place your trust in me- it’s crucial to my Well-being.<br>
あなたの信頼を得られる事が、私にとって最も大切で、生き甲斐なのです。
</blockquote>

マークダウン記法の場合は、

> Place your trust in me- it’s crucial to my Well-being.
> あなたの信頼を得られる事が、私にとって最も大切で、生き甲斐なのです。

このように「>」で引用を表現します。メールの返信などで似た表記をみたことのある人も多いのではないでしょうか。

表示の一例

引用(Quote)

アンカーテキスト(Anker Text)

アンカーテキストはWeb特有のもののため説明が難しいのですが、「ワンクリック(タップ)で違うWebサイトを開く」ための記述で、「リンク」とも呼ばれます。

<a href="http://corony.jp/study/10commandments-of-dog.html" title="ぜひ読んで欲しい「犬の十戒」">犬の十戒</a>

このように「リンク先のURL」「リンク先を表す文言」と、表示するテキストを記述します。
マークダウン記法では、

[犬の十戒](http://corony.jp/study/10commandments-of-dog.html "ぜひ読んで欲しい「犬の十戒」")

このように記述します。

表示の一例

アンカーテキスト(Anker Text)