LoginSignup
56
57

More than 1 year has passed since last update.

@maboy(maboy)

Qiitaに投稿するマークダウン（Markdown）記法のメモ

Last updated at Posted at 2018-08-23

Markdown記法とは

Markdown記法とはHTMLを簡単に編集できるように開発されたらしく、HTMLについて深く知らなくてもテキストを装飾することができます。

Qiitaで”Markdown”を検索すると、とても詳しくまとめられた記事が沢山ヒットします。

僕も練習を兼ねてこの記事を書きました。
覚えたことをここに書き足していこうと思います。

:pushpin:もくじ

レイアウト 装飾 挿入 リンク
見出し 強調と打消し 水平線 リンク　
改行 文字の色 画像 画像リンク
箇条書きリスト 引用 画像2 page内リンク
番号付きリスト インライン コード リンクカード
定義リスト 絵文字 テーブル -
チェックボックス 文字コード テーブル2 -
折りたたみ - 補足説明 -
注釈 - Diff -
- - - -
- - - -

:pushpin:見出し

「#」を使うと見出しとして表現できる。
1個から6個で使い分ける。
:pencil2:記述例

見出し
# 必ず当たる
### ハズレなし
###### 期間限定

:mag:表示例

必ず当たる

ハズレなし

期間限定

- もくじへ -

:pushpin:改行

改行は<br>タグを使いますが、行末にスペースを2つ置いても改行されます。

次の例では2行目の末尾にスペースが2個あります。
:pencil2:記述例

改行
1行目
2行目  
3行目<br>
4行目<br><br>
5行目

:mag:表示例
1行目
2行目
3行目

4行目


5行目

- もくじへ -

:pushpin:強調と打消し

強調表示は「*」(アスタリスク)で囲みます。
繋げる数で強調の度合いが変わります。
打消しは2連の「~」チルダで囲みます。
:pencil2:記述例

強調と打消し
*強調されてます*
**強調されてます。**
***強調されてます。***
~~打消されてます。~~

:mag:表示例
強調されてます
強調されてます。
強調されてます。
打消されてます。

- もくじへ -

:pushpin:引用

引用は「>」を付けるだけ。
:pencil2:記述例

引用
>> こんにちは

> 夜だけどね

:mag:表示例

こんにちは

夜だけどね

- もくじへ -

:pushpin:文字の色

文字の色を指定するMarkdown記法はありませんがHTMLの<fint>タグが使用できます。

:pencil2:記述例

文字の色
<font color="Red">赤い文字</font>
<font color="Blue">青い文字</font>

:mag:表示例
赤い文字
青い文字

- もくじへ -

:pushpin:絵文字

絵文字はEMOJI CHEAT SHEETの絵文字名を「:」(コロン)で囲みます。
これは絵文字というより画像で貼りつくのでプラットホームに関係なく同じ見た目になります。
次の例では、続けて絵文字とそれを表すUnicodeも並べてありますが、プラットホームによって見た目が変わります。

:pencil2:記述例

絵文字
:smile: 😀 &#x1f600;
:sunglasses: 😎 &#x1f60e;
:scream: 😱 &#x1f631;

:mag:表示例
:smile: 😀 😀
:sunglasses: 😎 😎
:scream: 😱 😱

- もくじへ -

:pushpin:文字コード

文字コードでも書けます。

:pencil2:記述例

文字コード
&#x1f4a9;

:mag:表示例
💩

- もくじへ -

:pushpin:水平線

水平線は「*」「_」「-」を3つ以上並べます。

:pencil2:記述例

水平線
——-
***
________________

:mag:表示例

- もくじへ -

:pushpin:注釈

注釈を入れることもできます。

:pencil2:記述例

注釈
番号[^1]で注釈[^5]

\[^1]: 同じ番号の注釈に飛びます。
\[^5]: 注釈はどこに記述しても末尾にまとめられます。

:mag:表示例
番号1で注釈2

- もくじへ -

:pushpin:箇条書きリスト

箇条書きリストは「+」「-」「*」
TABかスペース4個を入れるとネストされます。
番号付きリストと併用もできます。
:pencil2:記述例

箇条書きリスト
+ くだもの
    + カリン
        + 花梨
            + Chinese quince
    + レモン
        + 檸檬
- けだもの
    - キリン
        - 麒麟
            1. giraffe
            2. किरिन

:mag:表示例

  • くだもの
    • カリン
      • 花梨
        • Chinese quince
    • レモン
      • 檸檬
  • けだもの
    • キリン
      • 麒麟
        1. giraffe
        2. किरिन

- もくじへ -

:pushpin:番号付きリスト

番号付きリストは「1.」(数字にドット)
リストに階層的な番号をつけます。
数字はなんでも構わず、ただ数字として認識されて番号を付け直されます。
TABかスペース4個でネストされます。
箇条書きリストと併用もできます。

:pencil2:記述例

番号付きリスト
1. お湯を沸かす
    2. ヤカンに水を入れる
    3. 火にかける
2. カップ麺の封を開ける
    3. 中の具やスープの素を取り出す
3. お湯を注ぐ
    4. 説明書き通りに具やスープの素を入れる
        - 商品により先に入れるものと後に入れるものがあるので注意が必要です。
    5. 所定の位置までお湯を注ぐ
4. 待つ
    + 商品により待ち時間が異なり3分や5分が多いと思われる。
5. 出来上がり。

:mag:表示例

  1. お湯を沸かす
    2. ヤカンに水を入れる
    3. 火にかける
  2. カップ麺の封を開ける
    3. 中の具やスープの素を取り出す
  3. お湯を注ぐ
    4. 説明書き通りに具やスープの素を入れる
    - 商品により先に入れるものと後に入れるものがあるので注意が必要です。
    5. 所定の位置までお湯を注ぐ
  4. 待つ
    • 商品により待ち時間が異なり3分や5分が多いと思われる。
  5. 出来上がり。

- もくじへ -

:pushpin:定義リスト

<dl>,<dt>,<dd>タグを使った定義リスト

:pencil2:記述例

定義リスト
<dl>
<dt>くだもの</dt> 
<dd>カリン</dd>
<dt>けだもの</dt> 
<dd>キリン</dd>
</dl>

:mag:表示例

くだもの
カリン
けだもの
キリン

- もくじへ -

:pushpin:チェックボックス

箇条書きリストにはチェックボックスを付けることができます。
「x」(小文字のエックス)を入れるとチェック入ります。

:pencil2:記述例

チェックボックス
+ [ ] 項目1
+ [x] 項目2
+ [x] 項目3

:mag:表示例

  • 項目1
  • 項目2
  • 項目3

- もくじへ -

:pushpin:折りたたみ

<details>タグと<summary>タグを使うと折りたたみもできます。

:pencil2:記述例

折りたたみ
<details><summary> 要約として表示する文章 </summary> 追加情報として表示したい詳細情報 </details>

:mag:表示例

要約として表示する文章 追加情報として表示したい詳細情報

- もくじへ -

:pushpin:リンク

リンクはURLをそのまま書けば自動的にリンクされます。（リンクカード）
埋め込みは[リンクテキスト](URL)のように記述します。
リンク先を定義しておけば何度も使う場合に便利ですが、よくわからないので、ちゃんと調べてから書こうと思います。
こちら記事の「 複数箇所への同じリンクの書き方 」で学びました。
:pencil2:記述例

リンク

https://qiita.com

[キータ](https://qiita.com)

[キータ](https://qiita.com "Qiita ホーム")　(タイトル付き)

リンク先の定義は、[師匠の記事]から学びました。
[この][師匠の記事] リンクも [こちら][師匠の記事] のリンクも師匠の記事です。



[師匠の記事]:https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF

:mag:表示例

キータ

キータ　(タイトル付き)

リンク先の定義は、師匠の記事から学びました。
この リンクも こちら のリンクも師匠の記事です。

定義はページの末尾に書いても反映されます。

- もくじへ -

:pushpin:リンクカード

URLをそのまま書けばリンクカードとして表示されます。

URLの前後に空行が必要です。

:pencil2:記述例

リンクカード
<空行>
https://qiita.com
<空行>

:mag:表示例

- もくじへ -

:pushpin:page内リンク

ページ内リンクはURLではなく見出しの文字を書けば自動的にリンクされます。
埋め込みは[リンクテキスト](#見出し)のように記述します。
マークダウンをHTMLに変換するときに<a>タグのidに見出しの文字がそのまま適用されていれば思った通りの動作が期待できますが、同一の見出しが複数存在するなどHEMLのソースに見出し文字と違うidが付いてる場合は当然ながら動作しません。

:pencil2:記述例

page内リンク
[page内リンク](#pushpinpage内リンク)

[page内リンク](#pushpinpage%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF)

:mag:表示例
page内リンク

page内リンク

- もくじへ -

:pushpin:画像

画像の添付は「!」(エクスクラメーションマーク)に続けてリンクと同じように記述します。
[代替テキスト](URL)のように記述します。
[代替テキスト](URL "Title")のように記述するとマウスオーバーしたときに"Title"が表示されます。

:pencil2:記述例

画像
![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)タイトルなし

![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita logo")タイトルあり

[![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita ロゴ")](https://qiita.com "Qiita ホーム")リンクあり

:mag:表示例
Qiita logoタイトルなし

Qiita logoタイトルあり

Qiita logoリンクあり

画像のtitle属性はリンクのtitleより優先されます。

- もくじへ -

:pushpin:画像2

画像のサイズによってはHTMLの<img>タグで記述される場合もあります。
サイズを変更したい場合などは<img>タグを使います。

使用できた属性

  • alt：テキストベースのブラウザ用の代替テキスト
  • title：マウスオーバー時に表示される補足的な情報
  • width：画像の表示幅

:pencil2:記述例

画像2
<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">

:mag:表示例
Qiita logo

- もくじへ -

:pushpin:画像リンク

画像リンクはHTMLの<a>タグと<img>タグで記述できますが、マークダウンでもできます。

:pencil2:記述例

画像リンク
<!-- HTMLタグ <a><img></a> -->
<a href="https://qiita.com/"><img width="100" alt="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png"></a>

<!-- マークダウンとHTMLタグ [<img>](URL) -->
[<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">](https://qiita.com/)

<!-- マークダウン [![タイトル](画像のURL)](リンクのURL) -->
[![Qiita ホーム](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)](https://qiita.com/)

:mag:表示例

Qiita logo

Qiita logo

Qiita ホーム

- もくじへ -

:pushpin:インライン

インラインは「`」(バッククォート)で囲みます。
インライン中にカラーコードがあるとカラーも表示されます。
:pencil2:記述例

インライン
python3の最初のコードは`print('Hello World')`です。
僕の好きな色は`#0000ff`です。

:mag:表示例
python3の最初のコードはprint('Hello World')です。
僕の好きな色は#0000ffです。

- もくじへ -

:pushpin:コード

コードは3連の「`」(バッククォート)か「~」(チルダ)で囲みます。
続けて言語名を指定するとシンタックスハイライトが使えます。
「:」コロン以降にタイトルを入れることもできます。

シンタックスハイライト対応言語

Qiitaでシンタックスハイライト可能な言語一覧 - Qiita
ABAP ActionScript Apache API Blueprint AppleScript Awk BIML 1C (BSL) C Ceylon CFScript Clojure CMake CoffeeScript Common Lisp Config File Console Coq C++ Crystal C# CSS D Dart diff digdag Docker DOT Eiffel Elixir Elm ERB Erlang Factor Fortran FSharp Gherkin GLSL Go Gradle Graphql Groovy Hack Haml Handlebars Haskell Hashicorp Configuration Language HTML HTTP HyLang IDL IgorPro INI Io Irb Irb_output Java JavaScript Jinja JSON Json-doc Jsonnet JSX Julia Kotlin Lasso Liquid Literate CoffeeScript Literate Haskell LLVM Lua Make Markdown MATLAB MoonScript Mosel MXML Nasm nginx Nim Nix Objective-C OCaml Pascal Perl PHP Plain Text Plist Pony powershell Praat Prolog Prometheus .properties Protobuf Puppet Python Q QML R Racket Ruby Rust Sass Scala Scheme SCSS sed shell Sieve Slim Smalltalk Smarty SML SQL Swift TAP Tcl Terraform TeX TOML TypeScript Tulip Turtle/TriG Twig TypeScript Vala Visual Basic Verilog and System Verilog VHDL 2008 VimL Vue Wollok XML YAML
List of supported languages and lexers · rouge-ruby/rouge Wiki · GitHub

:pencil2:記述例

~~~python:sample.py
for i in range(1,101):
  j = (i % 3 == 0) + (i % 5 == 0) * 2
  s = [i,'Fizz','Buzz','FizzBuzz'][j]
  print(s)
~~~

:mag:表示例

sample.py
for i in range(1,101):
  j = (i % 3 == 0) + (i % 5 == 0) * 2
  s = [i,'Fizz','Buzz','FizzBuzz'][j]
  print(s)

- もくじへ -

:pushpin:Diff

Qiitaでサポートしている各シンタックスに、新たにdiff_*という名前をつけることでDiffを追加することができます。
-、+を行の先頭に書くことでDiffを表現することができます。

~~~diff_python:python
- print("Hello,")
+ print("World")
~~~
python
- print("Hello,")
+ print("World")

~~~diff_c:c
#include 

main()
{
-  printf("Hello");
+  printf("World");
}
~~~
c
#include <stdio.h>

main()
{
-  printf("Hello");
+  printf("World");
}

- もくじへ -

:pushpin:テーブル

Markdownでは「|」(バーティカルバー)と「-」(ハイフン)と「:」(コロン)を使ってテーブルを書きます。
テーブルは次の3つの行で構成されます。

  • ヘッダ行
    • 必ず必要です。
    • 強調表示になります。
  • アライメント行
    • 次のように列の文字位置を指定します。(3文字以上で「-」(ハイフン)は好きなだけ追加できます。)
      • 「:--」左寄せ
      • 「:-:」中央
      • 「--:」右寄せ
  • データ行
    • 必要な分だけ追加できます。

:pencil2:記述例

テーブル
| ヘッダ1 | ヘッダ2 | ヘッダ3 |
|:-------:|-------:|:-------|
| データa1 | データb1 | データc1 |
| データa2 | データb2 | データc2 |

:mag:表示例

ヘッダ1 ヘッダ2 ヘッダ3
データa1 データb1 データc1
データa2 データb2 データc2

- もくじへ -

:pushpin:テーブル2

HTMLタグを使えばもっと柔軟なテーブルを作ることが可能です。
:pencil2:記述例

HTMLのテーブル
<table>
<tr>
  <th colspan=2>Filza File Manager</th>
</tr>
<tr>
  <td><b>価格</b></td>
  <td>$5.99(トライアルは無料)</td>
</tr>
<tr>
  <td><b>開発者</b></td>
  <td><a href=http://www.tigisoftware.com/default/>TIGI Software</a></td>
</tr>
<tr>
  <td><b>リポジトリ</b></td>
  <td><a href=https://cydia.saurik.com/api/share#?source=http://apt.thebigboss.org/repofiles/cydia/
</a>BigBoss</td>
</tr>
</table>

:mag:表示例

Filza File Manager
価格 $5.99(トライアルは無料)
開発者 TIGI Software
リポジトリ BigBoss

- もくじへ -

:pushpin:補足説明

補足、注意、警告など、目を引く説明をしたい場合は、「:::」（3連のコロン）を使い、説明したい内容を:::noteと:::で囲みます。

noteの後にwarnをつけると「注意」、alertをつけると「警告」になります。

補足したい内容と :::note info と ::: はそれぞれ別の行にする必要があります。

:pencil2:記述例

補足説明
:::note
インフォメーション
説明を省きましたが `:::note info` の `info` は省略できます。
:::

:::note warn
注意
よく噛んで、ゆっくり食べましょう。
:::

:::note alert
警告
お使いのパソコンからコロナウイルスが検出されました。
:::

:mag:表示例

インフォメーション
説明を省きましたが :::note info の info は省略できます。

注意
よく噛んで、ゆっくり食べましょう。

警告
お使いのパソコンからコロナウイルスが検出されました。

note内では次のマークダウン記法が使用できます

  • リスト
    • これそのもの
  • 強調
    • 強調は結構使います。
  • 打ち消し線
    • これはあまり使いません。
  • コードスパン
    • これのこと？
  • リンク
  • 画像
    QiitaLogo
  • コードブロック
    hello
    print("Hello,World")

- もくじへ -

:rabbit:参考にさせていただきました。

Qiitaのテーブルの書き方についてまとめた

- もくじへ -

Topへ

  1. 同じ番号の注釈に飛びます。 ↩

  2. 注釈はどこに記述しても末尾にまとめられます。 ↩

56
57
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
Sign upLogin
56
57