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

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

Markdown記法とは

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

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

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


📍もくじ

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

📍見出し

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

✏️記述例

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

🔍表示例

必ず当たる

ハズレなし

期間限定

- もくじへ -


📍改行

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

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

✏️記述例

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

🔍表示例

1行目
2行目

3行目

4行目


5行目

- もくじへ -


📍強調と打消し

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

✏️記述例

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

🔍表示例

強調されてます
強調されてます。
強調されてます。
打消されてます。

- もくじへ -


📍引用

引用は「>」を付けるだけ。

✏️記述例

引用
>> こんにちは

> 夜だけどね

🔍表示例

こんにちは

夜だけどね

- もくじへ -


📍文字の色

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

✏️記述例

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

🔍表示例

赤い文字
青い文字

- もくじへ -


📍絵文字

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

✏️記述例

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

🔍表示例

:smile: 😀 😀
:sunglasses: 😎 😎
:scream: 😱 😱

- もくじへ -


📍文字コード

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

✏️記述例

文字コード
&#x1f4a9;

🔍表示例

💩

- もくじへ -


📍水平線

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

✏️記述例

水平線
——-
***
________________

🔍表示例




- もくじへ -


📍注釈

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

✏️記述例

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

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

🔍表示例

番号1で注釈2

- もくじへ -


📍箇条書きリスト

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍番号付きリスト

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍定義リスト

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍チェックボックス

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍折りたたみ

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍リンク

リンクはURLをそのまま書けば自動的にリンクされます。
埋め込みは[リンクテキスト](URL)のように記述します。
リンク先を定義しておけば何度も使う場合に便利ですが、よくわからないので、ちゃんと調べてから書こうと思います。

✏️記述例

リンク
https://qiita.com

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

🔍表示例

https://qiita.com

キータ

- もくじへ -


📍page内リンク

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

✏️記述例

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

🔍表示例

page内リンク

- もくじへ -


📍画像

画像の添付は「!」(エクスクラメーションマーク)に続けてリンクと同じように記述します。
[代替テキスト](URL)のように記述します。

✏️記述例

画像
![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)

🔍表示例

Qiita logo

- もくじへ -


📍画像2

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

✏️記述例

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

🔍表示例

Qiita logo

- もくじへ -


📍インライン

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍コード

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

シンタックスハイライト対応言語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

✏️記述例

~~~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)
~~~

🔍表示例

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

- もくじへ -


📍テーブル

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

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

✏️記述例

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

🔍表示例

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

- もくじへ -


📍テーブル2

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

✏️記述例

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>

🔍表示例

Filza File Manager
価格 $5.99(トライアルは無料)
開発者 TIGI Software
リポジトリ BigBoss
🐰参考にさせていただいた記事

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

- もくじへ -

編集



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

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

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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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