Markdown（マークダウン）は、文書を記述するための軽量なマークアップ言語です。この言語は、プレーンテキスト形式で手軽に書かれた文書をHTMLに変換するために開発されました。
Markdownを使用すると、文書の構造や文字の強調などを簡単に指定できるため、会議の議事録、社内ドキュメント、メモの作成など幅広い用途に利用できます。
Markdownの主な特徴は以下の通りです：
手軽に文章構造を明示できる：
見出しやリスト、引用などを簡単に示すことができます。
簡単で、覚えやすい：
シンプルな記法であり、多くのルールを覚える必要がありません。
特別なアプリが不要：
Markdown文書はプレーンテキストで書かれており、特別なアプリケーションを必要としません。
快適な読み書き：
Markdown対応のエディタを使用すると、快適に文書を読み書きできます。一方、Markdownの欠点として以下が挙げられます：
独自の記法を覚える必要がある：
基本的な記法を最初に修得しなければなりません。
ルールに慣れるまでは一苦労：
改行やリストのルールなど、初めて利用する際は少し慣れが必要です。
Markdown用のエディタ：
特に初心者にとって、専用エディタを利用しないと扱いにくい場合があります。Markdownは多くのウェブサイトでサポートされており、はてなブログ、Qiita、GitHubなどのメジャーなプラットフォームで利用可能です。
クリックで目次を開閉
- 段落
- 引用（>）
- 改行（<br>）
- 強制改行
- スペース
- 罫線（<hr>）
- コード１（『``』）
- コード２（‘‘‘ バッククォート３つ）
- コード内バッククオート（`）
- 表
- リンク
- 画像
- 脚注（[^1]）
- 装飾（*、または_ で囲むことで強調）
- 打消し（~~で囲む）
- エスケープ（頭に \ バックスラッシュ）
- HTML
- CSS（<style>）
- 上付き、下付き（^ , _ 文字と文字の間にいれる）
- TEX（[tex:,] で囲む）
- 折りたたみ（Details,summary）
- 箇条書き（* + - ＋スペース）
- リスト内リスト（dl,dt,dd）
- まとめ（ケツのロン）
段落
空白行を追加する。 改行を多く打っても行は増えない。 スペース、タブだけの行は段落にはならず、文と文の間のスペースとして足される。
青春が幸福なのは、↲ ↲ 美しいものを見る能力を備えているためです。↲ ↲ ↲ 美しいものを見る能力を保っていれば、↲ ↲ ↲ ↲ 人は決して老いぬものです。↲ ↲ 誰もが真実を見ることはできない。↲ （←全角スペース＋半角スペース＋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|147||<
「
」→スペース→ 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
この記法は効かない。環境のせいか、わたしの書き方が悪いのか・・
画像
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
- Google.com - 604.9 billion[^1]
- Youtube.com - 243.1 billion[^2]
- Facebook.com - 199.8 billion[^3]
- Baidu.com received - 97.7 billion[^4]
- 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:
- To Kill a Mockingbird by Harper Lee
- Pride and Prejudice by Jane Austen
- Moby-Dick by Herman Melville
- War and Peace by Leo Tolstoy
- The Great Gatsby by F. Scott Fitzgerald
- 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
２次方程式
解の公式
折りたたみ（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
- bbbb
あああ
- aaaaa
- bbbb
- ccccc
- dddd
- ccccc
- bbbb
- 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初心者の方にはとてもやさしい環境だと感じました。
興味はあるけどまだ未体験、というかたは、最初慣れるまではとくに複雑な記法は使わず、見出しだけ # とかから始めてもいいかもです~
それでは。ここまで読んでくださり、ありがとうございました<(_ _)>
なにかしら、お役にたてたら、うれしいです。
