【Qiita/初心者】マークダウン記法まとめ

# 概要

Qiitaで記事を投稿したい。
そんな方に知ってほしい「マークダウン記法」をまとめました。
(一部マークダウンじゃないのもあります)

試しに使ってみてください。

<br>

# 基本

## 見出し

``#(半角スペース)文字``

| マークダウン | HTML |
|:--|:--|
| # h1見出し | ``<h1>h1見出し</h1>``  |
| ## h2見出し  | ``<h2>h2見出し</h2>``  |
| ### h３見出し  | ``<h3>h3見出し</h3>``  |

> ``#``の後ろの半角スペースはなくても見出しは表示されます。
ただ、ブログ等で用いられるWordPressでは、半角スペースがないと見出しとして認識されませんでした(たしか)
よって他の媒体でも汎用的に使えるように、半角スペースを入れることをおすすめします。
（ちなみに半角スペースをいくら入れても文字の位置は動きません）

<br>

## 改行

文字を書いて、
一回だけ改行すると、
このようにすぐ下に文字が表示されます。
<br>
文字を書いて、

二回改行すると

このように間が空きます。

これは何回改行しても同じ幅です。

<br>

## 行間をもっと広げたい : ``<br>``タグ

``<br>``タグを使うと、

<br>
<br>
<br>

使った数だけたくさん行間を広げられます。

ちなみにこの記事は、``<h1>見出し``の前に``<br>``を入れています。

<br>

# リンク

``<a href="リンク先URL">表示したいリンク名</a>``

<a href="#">表示したいリンク名</a>

<br>

# Gyazo, Gyazo GIFのリンク先プレビュー

``![demo](画像やGIFのURL/raw)``

![demo](https://gyazo.com/507f7852079c2f1ee2e87938f7ac8358/raw)

<br>

# 文字の装飾

## 太字

``**太字にしたい文字**``

**太字になります**

<br>

## 斜体

``_斜体にしたい文字_`` ``*もしくはこの書き方*``

_どちらでも斜体になります_

<br>

## 引用

``>(半角スペース)引用したい文字``

> これで引用できるようになります
僕はよくエラー文と、その日本語訳などに使ったりしますね。

<br>

## マーカー（エスケープ）

バッククオート2つ `` で文字を囲むと。

``このように表示されます``

ちなみにこの場合、

``<h1>HTMLタグなどもエスケープされて表示されます</h1>``

<br>

# コードの挿入

上下にバッククオート3つ ``` を書いて、その間に記載します。

```
このように黒い背景になります
```

> このコードブロックを使うときは、前後に改行を入れてください。
そうしないと表示されません。

## ファイル名の挿入

もし、ファイル名を挿入したい場合は、上側の```に続いてファイル名を入力。

```index.html
<h1>このようにファイル名が上に表示されます</h1>
<h2>拡張子に合ったシンタックスハイライトが表示されます</h2>
```

```test.rb
def string
  puts "rubyならこんな感じです"
end

string
# コメントアウトもしっかり表示されます。
<!-- HTML用のコメントアウトはRubyファイルでは認識されません -->
```

<br>

## ファイル名の挿入(どんなファイル名もOK)

先頭にコロン ":" を入れるとファイル名を表示できます。
`````:terminal``みたいな感じです

```:teminal
こんな感じです。

下の例では":"をつけずに書いてみます。
```

```terminal
やはりterminalの文字は表示されませんね。
```

<br>

## Railsを使う方へ(ERBファイルのハイライト)

Railsで用いるERBファイルについて。
``index.html.erb``のように書いてみましょう。

```index.html.erb
<h1>ファイル名は表示されますが</h1>
<h2>ハイライトはされません</h2>
```

ERBはハイライトがサポートされているのに、ファイル名をそのまま書いても適用されません。
この場合は``erb:index.html.erb``のように書きましょう。

```erb:index.html.erb
<h1>これでハイライトされるようになりました</h1>
```

もしシンタックスハイライトがサポートされているのに認識されないときは、この記法を使ってみましょう。

<br>

# リスト

## 箇条書き

``*(半角スペース)リストの文字``

* これでリストを書けます
* ちなみに改行直後にTABキーを押すと
    * このように入れ子を使えます
        * 3段目以降は
            * 同じマークになるようですね
        * さらに
    * 改行した後に Shift+TAB で
* このようにインデントを上げることができます

もし、間を空けたい時は。

* リストを書いてから

* 2回改行して

* さらにリストを記載します

<br>

## 順序あり

``1.(半角スペース)リストの文字``

1. このように
2. 改行すると、
3. 数字が自動で挿入されます
    4. ちなみにTABを押すと
    5. 入れ子構造を作れます
6. そしてShift+TABで
7. 入れ子を戻せます

<br>

# 表(テーブル)

## 中央揃え

``| 1 | 2 |``
``|:-:|:-:|``
``| 値１ | 値２ |``
``| longlong | longlong |``

| 1 | 2 |
|:-:|:-:|
| 値１ | 値２ |
| longlong | longlong |

## 左揃え(デフォルト)

``| 1 | 2 |``
``|---|---|``
``| 値１ | 値２ |``
``| longlong | longlong |``

| 1 | 2 |
|---|---|
| 値１ | 値２ |
| longlong | longlong |

## 右揃え

``| 1 | 2 |``
``|--:|--:|``
``| 値１ | 値２ |``
``| longlong | longlong |``

| 1 | 2 |
|--:|--:|
| 値１ | 値２ |
| longlong | longlong |

## テーブルをぱぱっと出す(列x行)

``列x行 (x:"エックス")``と入力してエンターを押すと、

| 1 | 2 | 3 | 4 |
|:-:|:-:|:-:|:-:|
|   |   |   |   |
|   |   |   |   |

簡単にテーブルを作れます。

<br>

# 水平線

``---`` ``***``

---
これで区切り線が表示されます。
***
どちらの方法でもできますね。

<br>

# さいごに

技術のアウトプットをすると、「人に見られる」という責任感からか、インプットの質も必然的に上がります。

もしアウトプットを始めたい方は、ぜひこのページを見ながら試してみてください！