Markdownとはなんぞや?記述編

ってことでやっていきませう。 と、その前にちょろっと前回のまとめをば

ざっくりとMarkdownとはなんぞや?

Markdown
 → マークアップ言語の一つ。HTMLを簡単に記述できたりする。

マークアップ言語
 → マークアップするための言語。Markdownの他HTMLだとかXMLだとか。

マークアップ(Markup)
 → 機械に文章の構造や表示の仕方を理解してもらえるようにコードを付加すること。(IT的には)
 → 元の意味としては文章に対して校正したり朱筆を入れたりすること。

検索時の注意
 ⇒Markup・Markdownともに別の意味でマーケティングでも使われている用語でもあるので検索ワード選びに気をつける。



んじゃ記述法…の前にちょっとばかり使ってみて感じた長所と短所をば。

Markdownを使ってみて

<長所>

  • 編集画面をぱっと見するとスッキリして見える。
  • HTMLに比べて入力字数が大分減る。
  • 簡素に構成されているので覚える量も少なめ。
  • 直感的に使える。(多分個人差有り)
  • 割と使える範囲が広い。(GitHubだとかのプロジェクト管理ツールにも対応してるとかなんとか)

<短所>

  • 簡素故に大分表現の幅は狭まる。
  • ページのソースを見てもHTMLになるので参考にできるものが少ない。
  • 箇条書き・引用だとかに少し癖がある。
  • 段落・改行が1つづつしか入れれず数行開けたりが出来ない。(一応対処法あり。改行にて詳細記述。)
  • 改行が半角スペース2つなので妖怪全角スペースが生まれる場合がある。

こんなとこだろうか?
と言ってもブログを書くのに使った感じと調べた感じで書いているので、ドキュメント作成だとかだとまた変わるかもしれません。
その辺では触ってないので。



って事で今度こそ記法をば。
一応書いたものそのままとそれがどう表示されるかのサンプルも置いておこうと思います。
ちなみに現在このはてなブログのデザインはSmooth(デフォルトのもの)を使用しており、その設定上での表示ですのでご注意をば。

Markdownの記法

見出し

HTMLだと<h★>(★には数字が入る)
Markdownだと#の数で表します。

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

見出し<h1>

見出し<h2>

見出し<h3>

見出し<h4>

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



段落

HTMLだと<p></p>
Markdownでは (空行。何も書かずに改行)で表します。
空行の部分で</p><p>が入って次の段落に入る感じかな。

段落

段落

段落

段落



注意点としては2行以上空行を入れても1つ分の段落処理しかされませんので気をつけよう。

段落


段落

段落

段落

改行

HTMLだと<br>
Markdownだと (半角スペース2つ)で表します。

改行  
改行

改行
改行

というわけで前述してた例のもの。
ブログではプログラミングではないので動かなくなるだとかは出ないものの、日本語入力する故に全角スペースが混ざる危険のやるやべーやつです。
いや全文英語で書くとかなら問題にはならないんだろうけれども。

注意点としては段落と同じでこちらも2つ以上書いても1つ分の改行処理しかされません

じゃあどうやって数行あけるのさ!?ってなるわけです。
ちなみに昨日のブログでは. (ドット+半角スペース2つ)で無理やり表現してました。スマートじゃないけど。
でなにかないかと調べてみると、どうやらHTMLを併用してもきちんと表示されるらしいです。
ってわけで素直に<br>ぶち込みましょう

ちなみに僕は段落は空行、改行は<br>を使うって事で落ち着きました。編集画面ちょっと見づらくなるけどね。


箇条書き

というかまぁリスト。2種類あってまずは順序なしリストの方。中黒でまとめていくやつ。
HTMLでは<ul></ul>で囲った中に各箇条書きにしたい文字や文章を<li></li>で囲って入れていく。
Markdownでは- (半角ハイフン+半角スペース)で表します。

- 箇条書き
- 箇条書き
- 箇条書き
  • 箇条書き
  • 箇条書き
  • 箇条書き



次に順序付きリストの方。中黒ではなく1・2・3と順序付けてまとめていく方。
HTMLでは<ol></ol>で囲った中に各箇条書きにしたい文字を<li></li>で囲って入れていく。
Markdownでは1. (半角数字の1+ドット+半角スペース)で表します。

1. 箇条書き1
1. 箇条書き2
1. 箇条書き3
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3

ちなみに数字の部分は1・2・3とカウントアップしていっても動作します。

1. 箇条書き1
2. 箇条書き2
3. 箇条書き3
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3


が、順番の入れ替えなんかが面倒になるだけなので1.の形でやる方がおすすめです。

注意点としては箇条書きの部分を空行で挟まないと箇条書きが機能しないので気をつけよう。



引用

HTMLでは<blockquote></blockquote>
ちなみにcite 属性により引用元の文書の URL を、 要素により引用元の文書のタイトルなどを明示可能ってのがあったりする。表立っては見えないみたいなんだけども。
Markdownでは>(半角不等号)で表します。
ちなみに>>>のように重ねることで二重引用もできます。

>引用  
>>二重引用  

引用

二重引用


注意点としては引用内で行を変えても自動で改行はしてくれません。なので引用内で行を変えたい場合は段落もしくは改行を入れよう

>引用
>引用(改行)  
>引用  
>>二重引用
>>二重引用(改行)  
>>二重改行

引用 引用(改行)
引用

二重引用 二重引用(改行)
二重改行

リンク

HTMLでは<a herf = '★'>☆</a>
Markdownでは[☆](★)で表します。
ともに★にはリンク先のアドレス、☆にはリンクを設定する文章等が入ります。

僕のブログは[sakuya_no_neko’s blog](https://sakuya-no-neko.hatenablog.com/)です。

僕のブログはsakuya_no_neko’s blogです。



注意点としてはHTMLとMarkdownで"リンク先のアドレス"と"リンク貼る要素"の記入順が逆なので気を付けましょう。

強調

こちらも2種。 HTMLでは<em></em>。更に強調する場合は<strong></strong>
Markdownでは前者が*で囲う、後者が**で囲うことで表します。

*強調`<em>`*  
**強調`<strong>`**

強調<em>
強調<strong>



テーブル

HTMLでは<table></table>で表の部分を作って<tr><td>を使って作っていきます。
Markdownでは...まぁ以下の通りで|-を使って構築していきます。

| 左揃え | 中央揃え | 右揃え |
|:---|:---:|---:|
|左 |中 |右 |
|左 |中 |右 |
左揃え 中央揃え 右揃え

上の通り項目を入れた次の行の---部分で何処に:を入れるかで何処揃えかを指定できます。


コード

というか入力そのままを表示する方法。
HTMLでは<pre></pre>
Markdownでは```(Shft+@で入力できるものを3つ)で囲うことで表します。

…が、正確にはこれでやると<pre>Class = "code"だとかの属性も付きます。
ちなみにはじめの```の後に続けてプログラミング言語名を書くことでコードがどの言語なのかの指定もできます。

ついでで<pre></pre>になるのは (半角スペース4つ)だとかTabだとかで作った場合になります。

プログラミングのコードの手持ちがないんでこのページの改行で使ったやつを参考に。

\```  
改行  
改行
\```  

```
改行
改行
```

こうやってページ内のコードやらを書いてました。
ちなみにここでは```を表示させるために\(バックスラッシュ)が加えられてます。
いわゆるエスケープってやつで、この後のはコードとして処理しないでねってやつです。


以上!


結局気になって編集を決行。最後のコードの部分を書き直しました。参考元の追加はまとめられてなさすぎたんで断念。無念… [2019/07/13 1:00]