LoginSignup
781
844

More than 1 year has passed since last update.

Markdown記法一覧

Last updated at Posted at 2015-03-04

Markdownとは

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。
Markdown - Wikipedia より

🎁 Block elements

💎 見出し - Headers

example.md
# This is an H1
## This is an H2
###### This is an H6

🎉 結果

This is an H1

This is an H2

This is an H6

💎 引用 - Blockquotes

example.md
> 引用引用引用引用
引用引用
> 引用本文引用本文
>> 入れ子

🎉 結果

>によって引用をすることができます

ダブルクォーテーション内は途中で改行されません

💎 リスト - Lists

Disc型

example.md
* リスト1
  * リスト1-2  
* リスト2  

🎉 結果

  • リスト1
    • リスト1-2
  • リスト2

Decimal型

example.md
1. リスト1
    1. リスト1-1 
    2. リスト1-2  
2. リスト2 

🎉 結果

  1. リスト1
    1. リスト1-1
    2. リスト1-2
  2. リスト2

Definition型

example.md
<dl>
  <dt>オレオ</dt>
  <dd>クッキー&クリーム</dd>
  <dt>リッツ</dt>
  <dd>プレーンクラッカー</dd>
</dl> 

🎉 結果

オレオ
クッキー&クリーム
リッツ
プレーンクラッカー

Checkbox型

example.md
- [ ] リスト1
- [x] リスト2

🎉 結果

  • リスト1
  • リスト2

💎 水平線 - Horizontal Rules

3つ以上のハイフン、アスタリスクを記述することで水平線を出力できます。

example.md
***
* * *
--- 
- - -  

🎉 結果





🎁 Span Elements

💎 リンク - Links

自動リンク

example.md
<http://qiita.com>
http://qiita.com

🎉 結果
http://qiita.com
http://qiita.com

インラインリンク

example.md
[Qiita](http://qiita.com)
[Qiita](http://qiita.com "Qiita")

🎉 結果
Qiita
Qiita (タイトル付き)

💎 強調 - Emphasis

example.md
*強調*
**強調**
***強調***

🎉 結果

アスタリスク 書体 表示
1つ イタリック体 サンプル
2つ Bold体 サンプル
3つ イタリック&Bold体 サンプル

アスタリスク(*)だけでなくアンダースコア(_)でも同様の機能が使えます

💎 画像 - images

example.md
![ダミー画像](https://via.placeholder.com/150)
![ダミー画像](https://via.placeholder.com/150 "ダミー画像")

🎉 結果
ダミー画像
ダミー画像 (タイトル付き)

💎 打ち消し

example.md
~~打ち消し~~

🎉 結果
打ち消し

💎 注釈

example.md
    本文本文本文\[^注釈]
    \[^注釈]:注釈テキスト注釈テキスト注釈テキスト

🎉 結果
現実と理想は良く見れば隣り合わせ、いつだって自分次第でどっちにも手が届く。1

🎁 Code

💎 コード表示

インライン

example.md
`$hoge = 1`
`.md`

🎉 結果
$hoge = 1
.md

シンタックスハイライト

example.md
```html:sample
   <div class="radioWave">
      <p>迷いの中あてなく見上げた空彩る星たちが</p>
      <p>嘘みたいに晴れた朝に繋がることを教えてくれた</p>
   </div>
```/

🎉 結果

example
<div class="radioWave">
  <p>迷いの中あてなく見上げた空彩る星たちが</p>
  <p>嘘みたいに晴れた朝に繋がることを教えてくれた</p>
</div>

🎁 Extra

💎 テーブル記法

example.md
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

🎉 結果

左寄せ 右寄せ 中央
コロンの位置で テキストの位置を 指定できます
コード記法や 強調表示も 使用可能です
要素の前後には 必ずスペースを 入れましょう

#🔗 参考にしたサイト等

#🔗 この辺も参考になるかも?

  1. イロドリセカイ(でんぱ組.inc)

781
844
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
781
844