Help us understand the problem. What is going on with this article?

Qiitaでも使える!Markdownの基本的な書き方と、ちょっと楽するポイント

More than 1 year has passed since last update.

Markdown内のHTML

Markdownの構文はHTMLで書き換えできます。

ブロックレベルのタグ

  • div
  • table
  • pre
  • p
  • li

等々。
実際に使ってみると、こんな感じになります。

<table>
    <tr>
        <th>Foo</th>
        <th>HOGE</th>
        <th>*HOGE*</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td>HOGE</td>
        <td>*HOGE*</td>
    </tr>
</table>
Foo HOGE *HOGE*
Foo HOGE *HOGE*

ただし、ブロックレベルのタグだと、タグ内ではMarkdownスタイルは使えません。

スパンレベルのタグ

  • span
  • cite
  • del
  • img
  • a

等々。

<cite>**Hello World**</cite>

Hello World

スパンレベルのタグ内なら、Markdownスタイルも使えちゃいます。

特殊文字のエスケープ

  • & : &amp;
  • < : &lt;

HTMLならリンクに含まれた&

<a href="http://images.google.com/images?num=30&q=larry+bird">Link</a>

著作権記号

&amp;copy;

&copy;
©

タグ

&lt;a>hogehoge&lt;/a>

<a>hogehoge</a>
hogehoge

Markdown内のブロック要素

段落・改行

段落の定義は 「1行以上の連続したテキスト」
改行するには、1行あける必要があります。
つまり 「2個改行」 を挟めばいいわけです。

ただし、Qiitaだと、1個で改行できちゃいました。

見出し

見出しの書き方は2種類あります。

Setext形式

This is an H1
=============

This is an H2
-------------

Atx形式

# This is an H1

## This is an H2

### This is an H3

#の数が増えるほど、小さい見出しになります。
#を最後に付け加えれば、見出しを綴じることもできます。

引用

> 引用したい文

引用したい文

  • 複数の>を並べると入れ子に
  • Markdown要素が使用可

実際に試してみるとこんな感じになりました。

> This is a blockquote with two paragraphs.
> # number
> > 1. one
> > 2. two
> > 3. three

This is a blockquote with two paragraphs.

number

  1. one
  2. two
  3. three

リスト

番号なしリスト

* + - をリストマーカーに使える。

* アスタリスク
+ プラス
- ハイフン
  • アスタリスク
  • プラス
  • ハイフン

番号付きリスト

Markdown

1. one
2. two
3. three
  1. one
  2. two
  3. three

実は1つめの番号以外は、順番と違っていても、問題ないみたいです。
これでも同じ表示になりました。

1. one
5. two
2. three
  1. one
  2. two
  3. three

HTML

<ol>
<li>one
<li>two
<li>three
</ol>
  1. one
  2. two
  3. three

また、リストの要素に
- 引用を入れるなら、1インデント。
- コードを入れるなら、2インデント。

*   A list item with a blockquote:
    > This is a blockquote
> inside a list item.

*   A list item with a code block:
        <code goes here>

表示するとこんな感じ。

  • A list item with a blockquote:

    This is a blockquote
    inside a list item.

  • A list item with a code block:

    <code goes here>
    

数字.をそのまま表示する場合は、バックスラッシュを挟んで数字\.とすればオッケーです。

コードブロック

各行を1つのタブでインデントすると、次のようなソースコードのブロックを作れます。

こんな感じ
# 全部の文字がそのまま表示される
&amp;

HTMLだとこれに対応します。

<pre><code>
こんな感じ
# 全部の文字がそのまま表示される
&amp;
</code></pre>

HTMLだと&amp;等が&として解釈されちゃいます。
一方、Markdownのコードブロックだと、その辺の文字をHTMLエンティティに勝手に変換してくれるので便利!

長いコードなら、全部インデントするの面倒ですし``` でコード囲った方が楽そうです。
しかし1・2行のコードなら、インデントした方が楽できるかもしれません。

水平線

水平線<hr />(HTML)ってこんなもの↓


これをMarkdownだと*-_のどれかを3つ並べるだけで書けます。

Markdown内のスパン要素

リンク

[リンクの表示名](URL "タイトル")

ただし、タイトルはリンクにカーソルを合わせたときに表示される名前。
タイトルがなければ、URLが表示されます。

This is [an example](http://example.com/ "Title") inline link.

This is an example inline link.


[リンクの表示名][ID]

とすると、[ID]に設定したURLに飛ぶリンクが作れる。
[ID]の設定は

[ID名]:URL "タイトル"

でできます。
""''()でも代用できます。
またこの記述は実際には表示されないので、ご心配いりません。

[id]: http://example.com/  "Optional Title Here"

This is [an example][id] reference-style link.

This is an example reference-style link.


「ID名」を「リンクの表示名」にすれば、[ID]の中を省略可能です。

I get 10 times more traffic from Google than from
Yahoo or MSN.

強調

_ * で文字を挟むと、強調できます。

1個なら 斜め

*moji*

moji

2個なら 太字

**moji**

moji

記号を表示したいなら、\を付けてエスケープしておきましょう。

\*\*moji\*\*

**moji**

インラインのコード

`コード`

とすると、段落内でソースコードをそのまま表示できます。

Use the `printf()` function.

Use the printf() function.

コード内の`をそのまま表示するには、
コードを囲う記号をに変えればオッケーです。

Use the `` `printf()` `` function.

Use the `printf()` function.

画像

![画像名](画像へのパス,)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google")

image.png


![画像のタイトル][ID名]

リンク同様、こうすることでIDに設定したURLにある画像とタイトルを表示できます。

[id2]:https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google"

![image.png][id2]

image.png

自動リンク

メールアドレスやURLを<>で囲えば、勝手にリンクを作ってくれます。

<hogehoge@hoge.com>

<http://example.com/>

hogehoge@hoge.com

http://example.com/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away