マークダウンに初めて触れてみた
はじめに
自分自身、IT専門学校でWebアプリ開発をしてたんだけど、
「ブログを作るならまたHTML,CSS,JavaScriptをおさらいしないとか…面倒臭い。」
なんて思い腰が上がらず。そんな中、マークダウン（今更だけど）を見つけ、
簡単に記事を作成できちゃうみたいでした。
下記の動画参考に、実際に触れてみた備忘録の記事になります。
マークダウンの参考動画
目次
①文字の大きさ
②リスト
③リンク
④改行
⑤引用
⑥インライン
⑦コード表記
⑧画像の挿入
⑨斜体
⑩太文字
⑪取り消し線
⑫テーブル
まとめ
Youtubeでわかりやすい解説があったから実践してみた。
結論：簡単に記事が作れる！
へ〜、マークダウンはHTMLにしてくれて記事が簡単に書けちゃうのね！
こりゃ便利で使いやすいや。
これから投稿していく記事でも多用するから、数をこなしていけば慣れるはず！ｗ大事なのは量ってね。
マークダウンの参考動画
Youtubeでわかりやすい動画を見て、自分の整理用に書いてみたよ。
簡単だからエンジニアでなくても皆かけると思う。
参考動画はこちら
参考：「しまぶーのIT大学」さんの動画より
①文字の大きさ
文字の大きさを調整するのは「#」で、HTMLで言う「H1」に当たる。
書く時はこんな感じ
# ①Hello World!!（H1）
## ②Hello World!!(H2)
### ③Hello World!!(H3)
#### ④Hello World!!(H4)
#### ⑤Hello World!!(H5)
#### ⑥Hello World!!(H6)
出力結果
①Hello World!!（H1）
②Hello World!!(H2)
③Hello World!!(H3)
④Hello World!! (H4)
⑤Hello World!! (H5)
⑥Hello World!! (H6)
ちなみに「#」を７個にしたけどH7は表示されなかった。
これ以上小さくならないのかもね。
②リスト
リストの表示は２種類ある。
1つめは「・」だけのリスト。こんな感じで書く。
- 1行目
- ２行目
- ３行目
出力結果
- １行目
- ２行目
- ３行目
2つめは「連番」のリスト。これは便利でこんな感じ。
1. １行目
1. ２行目
1. ３行目
出力結果
- １行目
- ２行目
- ３行目
「1.」のいいところは、順番の入れ替えが発生した時に、
リストの番号まで変えなくていいのが便利だね。
また、ネスト（L字に表示）させたい時とか1つめと2つめを組み合わせて
リストかできる。
- ジャガイモの下準備
1. 洗う
1. カットする
- ニンジンの下準備
1. 洗う
1. 皮を剥く
出力結果
- ジャガイモの下準備
- 洗う
- カットする
- ニンジンの下準備
- 洗う
- 皮を剥く
③リンク
URLリンクに飛ばす方法。これも簡単。
[xxxxxの参考サイトはこちら](https://www.sample.com)
出力結果
xxxxxの参考サイトはこちら
とあるURLを何回も使い回したい時は、対象のURLを「[]: 」で定義する。 googleを出してみよう。
[記事紹介１回目][サイトA]です！
xxxxxなことも[記事紹介２回目][サイトA]です！
[サイトA]: https://www.sample.com
出力結果
記事紹介１回目です！
xxxxxなことも記事紹介２回目です！
④改行
改行したい箇所でスペースを２回入力するだけ。
下の例ではスペースを△で表記するよ。
こんにちは△△
今日もいい天気ですね
出力結果
こんにちは
今日もいい天気ですね
⑤引用
「>」を付けるだけ。
参考サイトは[こちら](https://www.sample.com)
> Aさんのブログより引用
出力結果
参考サイトはこちら
Aさんのブログより引用
多重引用もできるみたい。（使用機会少なそうだから省略）
⑥インライン
ノートにマーカーでハッチングしたみたいなやつ。
バッククォート「`」で囲む。
`バッククォートで文字を挟むよ`
出力結果
バッククォートで文字を挟むよ
⑦コード表記
ITの参考サイトでよく出る黒い枠を表示するやつ。
コードを黒枠で表示させたい時は、コードをバッククォート３回で囲む。
こんな感じ。
出力結果
function hoge() {
return "mogemoge"
}
⑧画像の挿入
VScodeでブログを書いてるからパスを間違えないようにパス候補を選択して
確実にパスを間違えないようにしたいね。
hugoが自動的に「static」フォルダまで参照してくれるから、
その配下から画像までのパスを記載すればいいんだね。ふ〜ん。
さっきの画像を貼ってみよう。
コードはこんな感じ。
出力結果
⑨斜体
あんまり使わないと思うけど、斜体は「*」で文字列を囲む。
アンダースコアでも可能。
斜体にしたい文字（普通ver）
*斜体にしたい文字*
アンダースコアで囲むことでも可能（普通）
_アンダースコアで囲むことでも可能_
出力結果
斜体にしたい文字（普通ver）
斜体にしたい文字
アンダースコアで囲むことでも可能（普通ver）
アンダースコアで囲むことでも可能
⑩太文字
太文字は「**」で文字列を囲む。
参考動画ではアンダースコア2つでもできるみたいだけど、
現在使用してるテーマのせいかできなかった。。。
**太文字**と普通の文字
出力結果
太文字と普通の文字
⑪取り消し線
前回の記事を更新するときなどに使いそう。
「〜〜」で文字列を囲む。
~~サイトAを参考にしてください。~~
出力結果
サイトAを参考にしてください。
⑫ライン
記事の可読性を向上せるため、多くの記事はライン（横線）で区切られている。
「—」、「***」、「___」のいずれかでラインを引ける。
しかし、現在使用しているブログテーマでは、記事の横枠いっぱいに広げることはできないみたいだし、
「—」でもラインが表示されなかった。
CSSのファイルを編集する必要がありそうだな。。。
1
---
2
***
3
___
4
出力結果
1
2
3
⑫テーブル
最後はテーブル。HTMLで実装すると面倒臭いんだよね。。。
でもマークダウンなら簡単！
・列名は「|」で区切る
・列名と列の値の間は「-|-」で区切る
・列の値は「|」で区切る
No|都道府県名|都市
-|-|-
1|北海道|札幌
2|東京都|新宿
3|沖縄県|那覇
出力結果
| No | 都道府県名 | 都市 |
|---|---|---|
| 1 | 北海道 | 札幌 |
| 2 | 東京都 | 新宿 |
| 3 | 沖縄県 | 那覇 |
下記のように見やすくすることもできる。
こっちの方が好き。
No|都道府県名|都市
--|--------|----
1 |北海道 |札幌
2 |東京都 |新宿
3 |沖縄県 |那覇
出力結果
| No | 都道府県名 | 都市 |
|---|---|---|
| 1 | 北海道 | 札幌 |
| 2 | 東京都 | 新宿 |
| 3 | 沖縄県 | 那覇 |
まとめ
初めてマークダウンに触れてみた。
HTMLとCSSで開発してた時と比べて超簡単にサイトが作れて感動してます。ｗ
多分使用するテーマごとに①~⑬に対する使用があるのかもね。
その場合は独自にCSSファイルを作成して対応する必要がありそうと感じた。
とにかくブログ記事を作れてよかった。