マークダウンを愛でたくて。
はじめましての方は、はじめまして。
そうでない方はこんにちは。
初めての投稿なので簡単に自己紹介をしたいと思います。
改めましてこんにちは。
本日よりブログを書くことになりました、FOX HOUNDの痛風野郎こと植田と申します。こんにちは。
年齢は28歳、趣味はカメラとお城巡り、
前職は車の設計を3年ほどしておりました。
好きなものはポケモンとドット絵。
車の運転と、虫とサプライズが苦手です。
若輩者ではないのですが、いかんせん未熟者ですので皆さんお手柔らかにお願い致します。
さて。
ブログを書くにあたり、テーマが１つありまして。
それは「ITの技術に関係すること」
うーん、広い。
ITと言ってもいろいろあります。
参考にと思い先輩方の記事を拝見しましたが、皆さんの知識の深いこと深いこと。
とてもじゃないがあんなクオリティの高い内容は私には書くことができません。
ということで、私は新人目線の身近な技術をテーマに記事を書いていこうと思います。
地球誕生からの長い歴史を見れば人類みな新人ってね。
暖かい目で見ていただければ幸いです。
まず記事を書くにあたり、「マークダウン記法で書くといいよ。」と言われました。
そもそもマークダウン記法って、一体なんなんだ、と。
使ったことはあるが本格的に知らなかったので改めて調べるついでに記事にしてみました。
マークダウン記法とは？
そもそもマークダウンとはなんなのでしょうか。
Markdown（マークダウン）は文章を記述するための記法（マークアップ言語）の一つです。 Markdown（マークダウン）とは、メールを記述する時のように書きやすくて読みやすいプレーンテキストをある程度見栄えのするHTML文書へ変換できるフォーマットとしてジョン・グルーバーによって開発されました。
ふーん、なるほど。
ジョン・グルーバーによって開発された記法、それがマークダウン記法というわけか。
HTMLよりも簡単に、かつ、ただのテキストを見栄え良くする書き方ということですね。
マークダウン記法の特徴
マークダウン記法には以下の特徴があります。
- 手軽に文章構造を明示できること
- 簡単で、覚えやすいこと
- HTMLへの変換が容易にできること
- 拡張子が.md
.mdというマークダウン特有の拡張子はIT業界以外では見る機会はあまりないのではないでしょうか。
私も初めての現場で先輩に資料をもらった際、見慣れない拡張子のファイルがあり戸惑った記憶があります。
それがマークダウンとの出会いでした。
当時の先輩は「便利だから新人のうちにしっかり覚えておいた方がいい」と言ってくれていたのを覚えています。
私にとってはメモの書き方ごとき、しっかり調べて学ぶのは本当にめんどうくさく、後回しにしておりました。
使わなければいけない機会がくる度に調べて簡単なものを使うということを繰り返しておりました。
あの時、先輩の言うことをしっかり聞いていれば。
マークダウンの書き方
準備編
まずマークダウンを書くにあたり、.mdファイルを作成しなければなりません。
テキストエディタでファイルの新規作成を行い、任意の名前.mdという名前で保存します。
テキストエディタは使い慣れているものであれば何でも良いのですが、個人的にはマークダウンと相性の良いVisual Studio CODEがおすすめです。
何故相性が良いのかは省略します。面倒くさいです。
基本編
.mdファイルが作成できたら早速マークダウンを書いていきます。
まずはマークダウンの代表的なものを見ていきましょう。
見出し
行頭に「 # (ハッシュ記号 )」をつけると、見出しに変換されます。
HTMLで言うところのh1タグなどのhタグに対応しています。
見出しレベルに応じて、#の数を増して使用します。
見出し1
見出し2
見出し4
見出し6
# 見出し1
## 見出し2
#### 見出し4
###### 見出し6
テキスト装飾(イタリック、太字)
「 * 」もしくは「 _ 」で文字を囲めばイタリック体が適用されます。
2つ囲めば、太字になります。
HTMLではemタグとstrongタグに対応しています。
余談ですが、適切なemタグとstrongタグの使い方にはSEO対策の効果があるとかないとか。
ですので使用するときは適材適所で使ってください。
SEO対策についてもいつか詳しく書きます。
イタリック
イタリック
太字
太字
*イタリック*
_イタリック_
**太字**
__太字__
改行
改行は少しクセがあり、半角スペース2個で実現できます。
半角スペースは一見、どこに入ってるかが分かりづらいためテキストエディタに半角スペースを視覚的に確認出来るプラグインを導入するといいのではないでしょうか。
リンク
リンクしたい文字列を[ ]で囲み、リンク先URLを()で囲みます。
HTMLではご存知、aタグに対応しています。
[FOX HOUND](https://www.fox-hound.co.jp/)
[FOX HOUND tech](https://blog.fox-hound.tech/)
画像の挿入
画像の代替テキスト(alt属性)を![ ]内に記入し、画像のURLを()で囲みます。
HTMLでは、imgタグに対応しています。
水平線
「 – 」「 * 」「 _ 」などを3つ以上連続して記述することで水平線を表示します。
※連続する記号の間にはスペースがあっても良いので、間隔を広げると仕切りだなと見やすくなります。
HTMLではhrタグに対応しています。
---
* * *
* * * * * * * * *
実践編
さて、ここから実践編です。
使う機会は限られるものの、しっかり使い分けることが出来ればより美しく構造的な文書になります。
リスト
文頭に「 * 」「 + 」「 – 」のいずれかを入れると箇条書きリストになります。
文頭に「 1. 」「 2. 」「 3. 」..を入れると番号付きリストになります。
HTMLではそれぞれulタグ、olタグ、リスト項目はliタグに該当します。
マークダウンではリストの上下に空行を入れる必要があります。
- リスト項目1
- リスト項目2
- リスト項目3
(空行)
* リスト項目1
+ リスト項目2
- リスト項目3
(空行)
- リスト項目1
- リスト項目2
- リスト項目3
(空行)
1. リスト項目1
2. リスト項目2
3. リスト項目3
(空行)
引用
行頭に「 > 」を置く事で引用した文章となります。
複数行にまたがる場合、改行の度に「 > 」を置く必要があります。
引用の中に別のマークダウンを使用する事も可能です。
2重引用も可能です。
HTMLでは1行の引用はqタグ、複数行の引用はblockquoteタグに対応します。
上下に空行を入れる必要があります。
春が２階から落ちてきた。
(空行)
>春が２階から落ちてきた。
(空行)
「扉があったら、開けるしかないでしょ。開けたら、入ってみないと。
人がいたら、話しかけてみるし、皿が出てきたら、食べてみる。
機会があったら、やるしかないでしょ。」いつも彼女は軽やかに言ったものだった。
そして、インターネットを利用している最中も、「押すしかないでしょ」と画面のあちらこちらを片端からクリックしていたものだから、コンピューターウィルスに絶えず、感染していた。
(空行)
>「扉があったら、開けるしかないでしょ。開けたら、入ってみないと。
> 人がいたら、話しかけてみるし、皿が出てきたら、食べてみる。
> 機会があったら、やるしかないでしょ。」
>
>いつも彼女は軽やかに言ったものだった。
>そして、インターネットを利用している最中も、「押すしかないでしょ」と画面のあちらこちらを片端からクリックしていたものだから、コンピューターウィルスに絶えず、感染していた。
(空行)
コード
「 ` 」バッククオートで文章を囲むと、HTML、CSS、JavaScriptなどのコードがインラインで表示出来ます。
HTMLのcodeタグに対応しています。
また上下に空行を入れる必要があります。
print('HelloWorld!');
(空行)
`print('HelloWorld!');`
(空行)
テーブル
「 | 」パイプで囲むと1つのセルになります。
下の行を「 – 」ハイフンで繋げばその上のセルは見出しとなります。
また「 – 」ハイフンの片隅、または両隅を「 : 」コロンとしておくことで文字揃えをすることができます。
HTMLではtableタグ、trタグ、thタグ、tdタグなどのテーブル関連タグに対応しています。
| Left align | Right align | Center align |
|---|---|---|
| This | This | This |
| column | column | column |
| will | will | will |
| be | be | be |
| left | righ | center |
| aligned | aligned | aligned |
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This | This | This |
| column | column | column |
| will | will | will |
| be | be | be |
| left | righ | center |
| aligned | aligned | aligned |
マークダウン記法に便利なMacDown
マークダウンを使っていく上でとても便利なMacアプリがあります。
その名もMacDownです。
MacDown
詳しく調べてないけどおそらくMac専用です、悪しからず。
このアプリはマークダウンで文章を書くことに非常に特化しています。
特徴的な2画面の左側が記入するエリア、右側が、プレビューとなっております。
ライブビューとなっていて、書き込むのと同時に更新されます。
画面の位置もリンクしているので無駄なスクロールがいりません。
そして何より、軽い。
やっぱり何事も軽いのがいいですね。
まとめ
マークダウンは.txtファイルよりも見栄え良く、HTMLよりも簡単に素早くテキストをマークアップすることが出来る記法です。
ブラウザ上だけでなく、ファイルそのままでもとても見やすく綺麗なことから、様々なシーンで使用されています。
この記事もマークアップで書きましたが、終了タグなどを書く必要がなく、基本的に記号1つか2つで構造的な文章としてマークアップできるので、非常にスッキリとしている印象です。
まだ使ったことないよって人は一度使ってみてはいかがでしょうか。
今回わかったこととしては、マークダウンはとても便利で綺麗だということ。
あと先輩の言うことは聞いておいた方がいいということ。
