BFT名古屋 TECH BLOG

日々の業務で得た知識を所属するエンジニアたちがアウトプットしていきます。

【Markdown】はてなブログ用Markdownチートシート

こんにちは!
BFT名古屋支店の、佐野です。

筆者の記事は今回で14回目、着実に書けているなと実感できる量になってきました。
さて、筆者は記事を作成する際にはMarkdownにて記述を行なっており、以前案件で資料作成した際の記法をこちらでも使っていたりするのですが、細かい差異などがあって一発で上手くいかないことがあったりしました。
ですので今回は自分のメモがてら、はてなブログで使用できるMarkdownの記法についてお送りします。


はじめに

そもそもMarkdownとは何なのかという所を説明します。
Markdownとはテキストを構造的に記述する軽量マークアップ言語のひとつです。
元々は小難しいHTMLを簡素化するために作られたもので、手軽に文章構造を明示でき、簡単で覚えやすいことが特徴です。
ただしHTMLのように文字色の変更やグラフィカルな装飾をする機能は持っていないので、そういった場合はHTMLタグと併用するといった手法を使うことが必要となります。

ちなみにタイトルの「チートシート」とは、ようはカンニングペーパー、カンペやあんちょこと言われるものです。
(最近あんちょこという言葉を使ってる人を見ないですが)
言語やコマンド、今回のような記法の使い方をまとめておき、困った時や忘れた時に見直してつまづきを解決するために作ります。
今回の記事もチートシートと言えるものになりますので、もしMarkdown記法で困っている方にもオススメできるものになっているかと思います。


はてなブログで使えるMarkdown記法

● 見出し

↑の「はてなブログで使えるMarkdown記法」のような見出し部分を表現するには「#」を使います。
Markdownの見出しはHTMLと同じく<h1>~<h6>までの見出しを作ることができ、#が多いほど下層の見出しを表すことになります。
(ちなみに「はてなブログで使えるMarkdown記法」部分は<h3>相当です)

見出しの構文とサンプルは以下の通りです。

# 見出し<h1>
## 見出し<h2>
### 見出し<h3>
#### 見出し<h4>
##### 見出し<h5>
###### 見出し<h6>

↓結果↓

見出し<h1>

見出し<h2>

見出し<h3>

見出し<h4>

見出し<h5>
見出し<h6>

● 段落と改行

記事を書く時には見出しと同じくらい、もしくはそれ以上に重要なのが段落と改行です。
Markdownでは空白行で囲まれた文章が段落になります。
段落の途中で改行したい場合、その行の末尾に半角スペースを2つ記述することで改行ができます。HTMLで言う所の<br>です。

段落と改行を使った例は以下の通りです。

文末に半角スペースふたつを入れなかった場合、
テキスト上は改行していても構文上は改行されていないことになってしまいます。

文末に半角スペースふたつを入れてから改行ことで  
改行を行なうことができます。

↓結果↓

文末に半角スペースふたつを入れなかった場合、 テキスト上は改行していても構文上は改行されていないことになってしまいます。

文末に半角スペースふたつを入れてから改行ことで
改行を行なうことができます。


● テキストの装飾

テキストを太文字、斜体、取消線付きに変えることができます。
「じゃあ下線は?」と思うかもしれませんが、残念ながら下線はMarkdownではサポートされていません。
Markdown記法の中でテキストに下線を付けたい場合は、HTMLタグの<u></u>を使って対応しましょう。
また斜体表示に関しては、ブラウザによっては日本語(というより2バイト文字)は斜体とならないようです。
12/15現在、PCでのchromeとedgeで斜体とならないことを確認しています。
iPhoneからのchromesafariだと日本語も斜体が適用されます。

各テキスト装飾の構文の例は以下の通りです。

**太文字**

*斜体全角*

*Italic*

~~取消線~~

**_太文字と斜体_**

**_Bold&Italic_**

↓結果↓

太文字

斜体全角

Italic

取消線

太文字と斜体

Bold&Italic


● 箇条書き・番号付き

先頭にハイフン(-)等を付けることで箇条書き、「1.」という風に付けることで番号付きのリストの形式にすることができます。
特に番号付きの場合は、入力した数字に寄らずに順番となるよう自動で数字が入ります。 箇条書きの場合、筆者はハイフン(-)にて行っていますが、プラス(+)でもアスタリスク(*)でも同じように機能します。
ただしそれぞれの記号の後に必ず半角スペースを入れるようにしてください。
加えて、リストと前の段落の間には必ず空行が必要となります。リスト1つで段落1つ使うイメージです。
また、リスト内の階層は半角スペース4つか、タブ1つを使って表現します。

リスト化の構文の例は以下の通りです。

●箇条書きの場合

- リスト1
    - リスト1下層1
        - リスト1下層1-1
        - リスト1下層1-2
    - リスト1下層2
- リスト2
- リスト3

●番号付きリストの場合

1. 番号付きリスト1
    1. 番号付きリスト1下層1
    1. 番号付きリスト1下層2
1. 番号付きリスト2
1. 番号付きリスト3

↓結果↓

●箇条書きの場合

  • リスト1
    • リスト1下層1
      • リスト1下層1-1
      • リスト1下層1-2
    • リスト1下層2
  • スト2
  • リスト3

●番号付きリストの場合

  1. 番号付きリスト1
    1. 番号付きリスト1下層1
    2. 番号付きリスト1下層2
  2. 番号付きリスト2
  3. 番号付きリスト3

引用

先頭に「>」を付けることで引用文にすることができます。
重ねることで入れ子にすることも可能ですが、それぞれ記号の後の半角スペースを忘れない章にしましょう。 また、複数行にわたり記述する場合は、上述した「改行」が必要となります。

引用文の構文の例は以下の通りです。

> 引用する文章  
> 引用する文章
> 
> > 引用する文章  
> > 引用する文章

↓結果↓

引用する文章
引用する文章

引用する文章
引用する文章


● 水平線

筆者が見出しと見出しの間に引いている水平線は、ハイフン(-)またはアンダースコア(_)またはアスタリスク(*)を3つ以上連続して並べることで表示できます。
どの記号を使っても表示される水平線は同じで、水平線の種類(色、太さ等)を変えることはできません。

水平線の構文の例は以下の通りです。

---

***

___

↓結果↓




● テーブル

バーティカルバー(|)で区切ると、テーブルを表示することができます。
ただし少なくとも「表項目」「文字寄せ行」が必要になることに注意してください。
「文字寄せ行」のコロン(:)の置き方によって、左寄せか中央寄せか右寄せを指定することができます。
指定しなかった場合は左寄せとなります。

テーブルの構文の例は以下の通りです。

|デフォルト|左寄せ|中央寄せ|右寄せ|
|---|:---|:---:|---:|
|default|left|center|right|

↓結果↓

デフォルト 左寄せ 中央寄せ 右寄せ
default left center right

● インライン表示とコードブロック

テキストをバッククォート(`)ひとつで囲むことで、インライン表示にすることができます。
またバッククォート3つで囲んだ範囲はコードブロックとなります。
コードブロックには使用言語を指定可能で、対応した言語であれば例のようにコード部分が強調されて表示されます。
言語を指定する場合は、囲い初めのバッククォートの後に言語名を入力します。

インライン表示とコードブロックの構文の例は以下の通りです。

  
  ●インライン表示  
  `aws --version`

  ●コードブロック
  ```python
  print("Hello World!")
  ```
  

↓結果↓

●インライン表示
aws --version

●コードブロック

print("Hello World!")

最後に

以上がはてなブログで使えるMarkdownになります。
この他にもリンクや画像の挿入といったことがMarkdownで可能ではありますが、こちらははてなブログMarkdownエディタでも挿入機能を使った方が早いと感じたので割愛しております。

この記事にある記法を覚えれば、Markdownでの記述はおおよそ問題ないと言えるでしょう。
ただし先述した通り、MarkdownはHTMLと比べてできないこともそこそこありますので、装飾された文書を作成する際はHTMLとの併用を行なっていく必要があります。
状況に応じて、使い分けていきたいところです。

Markdownを使ってはてなブログ始め、ブログの執筆やドキュメントの作成を行なおうとしている方にとって、この記事が助けになれば幸いです。