トップ > はてなブログ > 手軽で快適！軽量言語「Markdown」記法まとめ。使い方、メリット・デメリット
最終更新日

手軽で快適！軽量言語「Markdown」記法まとめ。使い方、メリット・デメリット

はてなブログ Markdown 備忘録 ブログ運用


Markdown

手軽で快適！軽量言語「Markdown」記法まとめ。使い方、メリット・デメリット - hatebcustom


Markdown（マークダウン）は、文書を記述するための軽量なマークアップ言語です。この言語は、プレーンテキスト形式で手軽に書かれた文書をHTMLに変換するために開発されました。
Markdownを使用すると、文書の構造や文字の強調などを簡単に指定できるため、会議の議事録、社内ドキュメント、メモの作成など幅広い用途に利用できます。

Markdownの主な特徴は以下の通りです：

手軽に文章構造を明示できる：
　見出しやリスト、引用などを簡単に示すことができます。
簡単で、覚えやすい：
　シンプルな記法であり、多くのルールを覚える必要がありません。
特別なアプリが不要：
　Markdown文書はプレーンテキストで書かれており、特別なアプリケーションを必要としません。
快適な読み書き：
　Markdown対応のエディタを使用すると、快適に文書を読み書きできます。

一方、Markdownの欠点として以下が挙げられます：

独自の記法を覚える必要がある：
　基本的な記法を最初に修得しなければなりません。
ルールに慣れるまでは一苦労：
　改行やリストのルールなど、初めて利用する際は少し慣れが必要です。
Markdown用のエディタ：
　特に初心者にとって、専用エディタを利用しないと扱いにくい場合があります。

Markdownは多くのウェブサイトでサポートされており、はてなブログ、Qiita、GitHubなどのメジャーなプラットフォームで利用可能です。

Quoted from Search Generative Experience - blog.google


クリックで目次を開閉

段落

空白行を追加する。 改行を多く打っても行は増えない。 スペース、タブだけの行は段落にはならず、文と文の間のスペースとして足される。 

青春が幸福なのは、↲
↲
美しいものを見る能力を備えているためです。↲
↲
↲
美しいものを見る能力を保っていれば、↲
↲
↲
↲
人は決して老いぬものです。↲
↲
誰もが真実を見ることはできない。↲
　     （←全角スペース＋半角スペース＋Tab）↲
しかし真実であることはできる。↲

 Output

青春が幸福なのは、

美しいものを見る能力を備えているためです

美しいものを見る能力を保っていれば、

人は決して老いぬものです。

誰もが真実を見ることはできない。 　 （←全角スペース＋半角スペース＋Tab） しかし真実であることはできる。


引用（>）

> 
> 複数行にまたがる場合、改行のたびにこの記号を置く必要がある。
> **引用の上下にはリストと同じく空行がないと正しく表示されない。**
> 引用の中に別のMarkdownを使用することも可。
> 
> > ネスト。

 Output

複数行にまたがる場合、改行のたびにこの記号を置く必要がある。 引用の上下にはリストと同じく空行がないと正しく表示されない 引用の中に別のMarkdownを使用することも可。

ネスト。


改行（<br>）

「ニャー、ニャーと試みにやって見たが誰も来ない。<br><br>そのうち池の上をさらさらと風が渡って日が暮れかかる。<br>
腹が非常に減って来た。」<br>

 Output

「ニャー、ニャーと試みにやって見たが誰も来ない。

そのうち池の上をさらさらと風が渡って日が暮れかかる。
腹が非常に減って来た。」


強制改行

改行前に半角スペース２つ。 

阿井上男 ↲  (半角スペース１つ＋Enter)
あいうえお  ↲  (半角スペース２つ＋Enter)
かきくけこ 　↲  (全角スペース１つ＋Enter)
さしすせそ 　　↲  (全角スペース２つ＋Enter)
たちひろし

 Output

阿井上男 あいうえお
かきくけこ　 さしすせそ　　 たちひろし


スペース

半角スペースは無視される。 全角スペースはそのまま。 

スペースなし
文 字 と 文 字 の 間 に 半 角 ス ペ ー ス
文　字　と　文　字　の　間　に　全　角　ス　ペ　ー　ス
文頭に半角スペース
　文頭に全角スペース

 Output

スペースなし
文 字 と 文 字 の 間 に 半 角 ス ペ ー ス
文　字　と　文　字　の　間　に　全　角　ス　ペ　ー　ス
文頭に半角スペース
　文頭に全角スペース


罫線（<hr>）

※「HR」は「horizontal rule（水平方向の罫線）」の略。

プロパティは利用できないぽい。下２つの書き方で対応できそう？

<hr width="200" size="10" align="left">
<hr width="300" size="20" align="center">
<hr width="400" size="30" align="right">
<hr width="500" size="40" noshade="">
<div class="right" style="border-bottom: 5px solid #e2dc00; width: 80px;"></div><br>
<div class="left" style="border-bottom: 10px dashed #d1e69d; width: 50%;"></div>

 Output




コード１（『``』）

等幅フォント。バッククォート『`』（シフト＋＠）で囲む。

***`range(1, 10, 3)`で、数値`1, 4, 7`のイテレーションが発生。***
<hr>
`range(1, 10, 3)`は、Pythonのrange関数を使用して生成されるイテレータを表す。<br>
以下のrangeオブジェクトで増加する数値のシーケンスを生成。<br>
1. 最初の引数1は開始値<br>
2. 第二の引数は10終了値。（この値は範囲に含まず、9までの数値を生成）<br>
3. 第三の引数3は増加量<br>
<br>
`range(1, 10, 3)`によって生成されるイテレーションは1から始まり3ずつ増加して次の要素を生成し、10未満の範囲で停止。<br>
結果、このイテレーションは1, 4, 7を生成。<br>
<hr>
`>|python|`<br>
`for i in range(1, 10, 3):`<br>
`    print(i)`<br>
`||<`<br>
実行結果：<br>
`>|sh|`<br>
`1`<br>
`4`<br>
`7`<br>
`||<`
<br><hr>
「`」→スペース→ Enterキーで<br>`を追加。」

 Output

range(1, 10, 3)で、数値1, 4, 7のイテレーションが発生。

range(1, 10, 3)は、Pythonのrange関数を使用して生成されるイテレータを表す。
以下のrangeオブジェクトで増加する数値のシーケンスを生成。
1. 最初の引数1は開始値
2. 第二の引数は10終了値。（この値は範囲に含まず、9までの数値を生成）
3. 第三の引数3は増加量

range(1, 10, 3)によって生成されるイテレーションは1から始まり3ずつ増加して次の要素を生成し、10未満の範囲で停止。
結果、このイテレーションは1, 4, 7を生成。
>|python|
for i in range(1, 10, 3):
print(i)
||<
実行結果：
>|sh|
1
4
7
||<
「」→スペース→ Enterキーで<br>を追加。」


コード２（‘‘‘ バッククォート３つ）

言語名の指定も可。

 import numpy as np
 for i in range(1,10,2):
     print(i)

``` の前にスペースがあると、コードと認識されないので注意。

 Output

import numpy as np for i in range(1,10,2): print(i)


コード内バッククオート（`）

開始・終了のバッククオートをn+1個で囲む。

`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できる。

<div class="amikakenaoko">
`` `<div>内` ``  ``` ``でも効く`` ``` 。
</div>

 Output

`バッククオート` や ``2連続バッククオート`` も記述できる。

`<div>内` ``でも効く`` 。


表

Food Item | Calories [kcal] | Protein [g] | Carbohydrates [g] | Fat [g]
:---:|:---|---:|---:|---:|---:
Salmon | 206 | 22 | 0 | 13
Avocado | 160 | 2 | 9 | 15
Quinoa | 222 | 4 | 39 | 4
Kale | 33 | 2 | 6 | 1
Blueberries | 84 | 1 | 21 | 0

アイコン|コード|説明
:---:|:---|:---
<i class="fas fa-home"></i>|`<i class="fas fa-home"></i>`|ホーム|
<i class="fas fa-bookmark"></i>|`<i class="fas fa-bookmark"></i>`|ブックマーク
<i class="fas fa-tag"></i>|`<i class="fas fa-tag"></i>`|タグ
<i class="fas fa-cog"></i>|`<i class="fas fa-cog"></i>`|歯車
<i class="fas fa-external-link"></i>|`<i class="fas fa-external-link"></i>`|外部リンク
<img width=80>|<img width=400>|<img width=240>  <!– imgで幅を調整 –>


 Output

Food Item Calories [kcal] Protein [g] Carbohydrates [g] Fat [g]
Salmon 206 22 0 13
Avocado 160 2 9 15
Quinoa 222 4 39 4
Kale 33 2 6 1
Blueberries 84 1 21 0


アイコン コード 説明
<i class="fas fa-home"></i> ホーム
<i class="fas fa-bookmark"></i> ブックマーク
<i class="fas fa-tag"></i> タグ
<i class="fas fa-cog"></i> 歯車
<i class="fas fa-external-link"></i> 外部リンク


リンク

タイトル付き。（マウスホバー）
[リンクテキスト](URL "タイトル")
[ブログに音楽を埋め込む方法 | サウンドファイルのプレイヤー設置手順 - hatebcustom](https://rubirubi.hateblo.jp/entry/blog-music-embedding "ブログに音楽を埋め込む方法 | サウンドファイルのプレイヤー設置手順 - hatebcustom")

タイトルなし。
[リンクテキスト](URL)
[Googleブロガーの始め方、使い方。おすすめテンプレート、WordPressからの引っ越しなど](https://rubirubi.hateblo.jp/entry/blogger)

[ここ][link-1] と [この][link-1] リンクは同じ。
[link-1] という書き方もできる。
[link-1]: https://rubirubi.hateblo.jp/entry/blog-music-embedding

 Output

タイトル付き。（マウスホバー） リンクテキスト ブログに音楽を埋め込む方法 | サウンドファイルのプレイヤー設置手順 - hatebcustom

タイトルなし。 リンクテキスト Googleブロガーの始め方、使い方。おすすめテンプレート、WordPressからの引っ越しなど

[ここ][link-1] と [この][link-1] リンクは同じ。 [link-1] という書き方もできる。 [link-1]: https://rubirubi.hateblo.jp/entry/blog-music-embedding
この記法は効かない。環境のせいか、わたしの書き方が悪いのか・・


画像

![写真](https://cdn-ak.f.st-hatena.com/images/fotolife/f/fobitows/20230905/20230905224625.gif)

 Output

写真


脚注（[^1]）

[^1]や[^〇〇]と記述。注釈内容は[^1]: ...と書く。

Top 10 Monthly Web Traffic in June 2019

1. Google.com - 604.9 billion[^1] 
2. Youtube.com - 243.1 billion[^2] 
3. Facebook.com - 199.8 billion[^3] 
4. Baidu.com received - 97.7 billion[^4] 
5. Wikipedia.- 46.9 billion[^5] 

[^1]: Google.com is the world's most popular search engine.
[^2]: Youtube.com is a video-sharing platform.
[^3]: Facebook.com is a leading social media platform.
[^4]: Baidu.com is a major Chinese search engine.
[^5]: Wikipedia.org is a free online encyclopedia.

Top 10 Monthly Web Traffic in June 2019

  1. Google.com - 604.9 billion[^1]
  2. Youtube.com - 243.1 billion[^2]
  3. Facebook.com - 199.8 billion[^3]
  4. Baidu.com received - 97.7 billion[^4]
  5. Wikipedia.- 46.9 billion[^5]

[^1]: Google.com is the world's most popular search engine. [^2]: Youtube.com is a video-sharing platform. [^3]: Facebook.com is a leading social media platform. [^4]: Baidu.com is a major Chinese search engine. [^5]: Wikipedia.org is a free online encyclopedia.


装飾（*、または_ で囲むことで強調）

１つから３つまで、イタリック→ボールド→イタリック＋ボールドに変化。

Notable Literary Works and Authors:

1. *To Kill* a Mockingbird by _Harper Lee_
2. **Pride and Prejudice** by __Jane__ Austen
3. Moby-Dick*** by Her***man Melville
4. War ___and___ Peace ___by Leo Tolstoy___
5. *****The Great Gatsby***** by F. Scott Fitzgerald
6. 1984 ____by George Orwell____

1つ : *italic* _italic_  
2つ : **bold** __bold__   
3つ : ***italic＋bold*** ___italic＋bold___

 Output

Notable Literary Works and Authors:

  1. To Kill a Mockingbird by Harper Lee
  2. Pride and Prejudice by Jane Austen
  3. Moby-Dick by Herman Melville
  4. War and Peace by Leo Tolstoy
  5. The Great Gatsby by F. Scott Fitzgerald
  6. 1984 by George Orwell

1つ : italic italic
2つ : bold bold
3つ : italic＋bold italic＋bold

４つ以上だと、ただのboldになるぽい。


打消し（~~で囲む）

~ある日の事でございます。~  
~~御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになって…~~  
~~~池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色…~~~

 Output

~ある日の事でございます。~
御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになって…
池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色…


エスケープ（頭に \ バックスラッシュ）

**極楽は丁度朝なのでございましょう。**  （**2つなので装飾コードと認識される）
<hr>
\*\*やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間…\*\*<br>
（\*\*にしているのでただのテキストとして認識）

 Output

極楽は丁度朝なのでございましょう。 （**2つなので装飾コードと認識される）

**やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間…**
（**にしているのでただのテキストとして認識）


HTML

<span style="color: navy">ネイビー</span>
<span style="color: red">赤色</span>
<span style="color: gold">金色</span>
<span style="background-color: #00FFFF">青色</span>
<span style="background-color: #FF00FF">赤色</span>
<span style="background-color: #FFFF00">黄色</span>

 Output

ネイビー 赤色 金色 青色 赤色 黄色


CSS（<style>）

<p class="custom-text">背景色を変えたテキスト</p>
<style>
  .custom-text {
    background-color: #d1e69d;
    padding: 7px; /* 余白を追加 */
  }
</style>

 Output

背景色を変えたテキスト


上付き、下付き（^ , _ 文字と文字の間にいれる）

^ ・・・上付きになる。 _ ・・・下付きになる。

^ は全角英数など日本語が使えない。

z=x^2+y^2  
上付き^脚注1   
abcd^1234    
ABC^DEF    
上付き^1   
上付き^abc def

 Output

z=x2+y2
上付き^脚注1
abcd1234
ABCDEF
上付き1
上付きabc def


TEX（[tex:,] で囲む）

リアルタイムプレビューは使えない。

２次方程式[tex:ax\^2+bx+c=0] 
解の公式 [tex:\frac{-b\pm \sqrt{b\^2-4ac}}{2a}]

[tex:～～] と書くと使える。 [ , ] , ^ , _ は、Markdown で使用しているのでTEX の中でエスケープ必要。 \[ , \] , \^ , \_ に変換。

 Output

２次方程式ax^2+bx+c=0 解の公式 \frac{-b\pm \sqrt{b^2-4ac}}{2a}


折りたたみ（Details,summary）

※HTMLタグの上下に空行が必要。（</summary>の下、</details>の上）

 Output

ここをクリック

（上に空行） 

puts 'Hello, World'


箇条書き（* + - ＋スペース）

同じインデント（文章の行頭の空白）でマークを付けることで連続した箇条書きとして認識。 スペースを2つ以上付けてインデントすることでレベル分けしたマークが付く。

- aaaaa
  - bbbb
    - ccccc
    - ccccc
  - AAAA
  - BBBB
- あああ

* aaaaa
  * bbbb
    * ccccc
       * dddd
+ aaa
+ bbb
+ ccc

 Output

  • aaaaa

    • bbbb
      • ccccc
      • ccccc
    • AAAA
    • BBBB

  • あああ

  • aaaaa
    • bbbb
      • ccccc
        • dddd
  • aaa
  • bbb
  • ccc


リスト内リスト（dl,dt,dd）

<dl>
  <dt>リンゴ</dt>
      <dd>赤いフルーツ<br>
      黄色のフルーツ</dd>
  <dt>オレンジ</dt>
  <dd>橙色のフルーツ</dd>
</dl>

 Output

リンゴ
赤いフルーツ
黄色のフルーツ
オレンジ
橙色のフルーツ



まとめ（ケツのロン）

お読みいただきありがとうございます◝(⑅•ᴗ•⑅)◜..°♡
ブログ作成にはとり急ぎこれくらいあれば足りるかなぁ…？といった基本的な記法をご紹介しました。
とくに はてなブログでは「見たまま編集」をメインで使っていますが、HTMLにしたときの文字が小さく、また自動でタグを改変する機能もあったり、ちょっと重かったり、”そのまま”と”HTML”の切り替えが少しめんどうだったり…と、いろいろ悩ましいこともあったので、今回あらためてMarkdownの利便性に気付かされた次第です。
うっかりコードの書きミスとか（<div> </div>でちゃんと囲ってなかったり等）したままプレビューしちゃったりすると、、あら不思議😅、いつの間にやら今までの苦労が水の泡となっていたりします笑。いごとじゃない…

ということで、、
そういった事故も、Maekdownだと起きにくそうかな？とも思いました。

現場からは以上です🫡
何しろ、HTMLも普通の文書も、同じ場所にそのまま書けるので。まさに”プレーンテキスト形式で手軽に書かれた文書をHTMLに変換するために開発された言語”、という言葉どおりの実力でした！
※実際、何度かタグの囲み間違いみたいなミスをやらかしてましたが、忽然とデータが消えてしまう、といったこともなく間違いは間違いとして残ってくれる？ので、ブログやHTML初心者の方にはとてもやさしい環境だと感じました。 興味はあるけどまだ未体験、というかたは、最初慣れるまではとくに複雑な記法は使わず、見出しだけ # とかから始めてもいいかもです~

それでは。ここまで読んでくださり、ありがとうございました<(_ _)>
なにかしら、お役にたてたら、うれしいです。

AI vs．教科書が読めない子どもたち
新井 紀子 東洋経済新報社 2018年02月02日
楽天ブックス
Amazon
Kindle
7net
honto
紀伊國屋書店