MarkDownの基礎文法についてまとめています。
先人達の記事を写経して勉強するために作成しました。
記載例に出てくる記号として、
␣ :半角スペース
↵ :改行
を表しています。
手を動かさなければ覚えない。
初心者さんは、この記事をMarkDown記法を用いて作成することで、ある程度基礎がつくんではないでしょうか。と、初心者が言っています。
なお、MarkDown記法を勉強したいって方は、「VSCode」を使うと、
左のタブにMarkDown記法
右のタブにプレビュー
という使い方ができて、わかりやすいですよ。
あとは、「Typora」というソフトを使うと、MarkDown記法で記述するのにMarkDownにならないという不思議体験ができます。(便利)
とりあえず試してみたいって人は、オンラインツールのStackEditを利用すればよかです。
1.見出しの書き方
行頭に#
と半角スペースを挿入すると、見出しになる。
#の数によって、見出しレベルが変わります。
【記載例】
#␣レベル1
##␣レベル2
###␣レベル3
####␣レベル4
#####␣レベル5
######␣レベル6
【結果】
レベル1
レベル2
レベル3
レベル4
レベル5
レベル6
2.空白(スペース)の挿入
通常、空白を挿入する際は「スペース」を入力しますが、MarkDownでは4種類の空白があります。
【記載例】
空白なしの行
  より狭い空白
半角スペースと同じサイズの空白
 半角スペースより少し広めの空白
 半角スペースよりさらに広めの空白 全角スペースとほぼ同じ幅
【結果】
空白なしの行
より狭い空白
半角スペースと同じサイズの空白
半角スペースより少し広めの空白
半角スペースよりさらに広めの空白 全角スペースとほぼ同じ幅
3.改行の挿入
改行方法には、
- 文末にスペース2個入れる方法
-
<br>
タグを挿入する方法
があります。
【記載例】
文末にスペース2個入れる方法␣␣
brタグを挿入する方法<br>
最終行
【結果】
文末にスペース2個入れる方法
brタグを挿入する方法
最終行
4.エスケープの挿入
前述してきた「 」や、「<br>」を文章中で入力すると、「空白」や「改行」になってしまいます。
その際は、バックスラッシュ\
を入力してやればよかとです。
【記載例】
空白を挿入するときは、「\ 」と入力します。
改行を挿入するときは、「\<br>」と入力します。
【結果】
空白を挿入するときは、「 」と入力します。
改行を挿入するときは、「<br>」と入力します。
5.文字装飾
強調タグ
*
か_
で文字を囲えば、強調タグ(emタグ)が適用されます。
Qiitaでは、イタリック体が適用されるはずなんだけど、されない。
【記載例】
イタリック
*イタリック*
_イタリック_
【結果】
イタリック
イタリック
イタリック
太字
**
か__
で文字を囲えば、字が太くなります。
【記載例】
ふとし
**ふとし**
__ふとし__
【結果】
ふとし
ふとし
ふとし
強調+太字
***
か___
で囲うのだ。
【記載例】
強調ふとし
***強調ふとし***
___強調ふとし___
【結果】
強調ふとし
強調ふとし
強調ふとし
打消し
~~
で囲うのだ
【記載例】
打消さない
~~打消し~~
【結果】
打消さない
打消し
5.リスト
順序なしリスト
-
、+
、*
を先頭に記載する。
基本的には、同じ記号を続けて使う。
入れ子のリストにしたい場合は、「タブ」か「半角スペース4つ」で可能。
【記載例】
- リスト
+ リスト
* リスト
[Tab] - 入れ子
[Tab] ␣␣␣␣- 入れ子の子
【結果】
- リスト
- リスト
- リスト
- 入れ子
- 入れ子の子
- 入れ子
番号付きリスト
1,2,3と番号付きのリストは…記載例をみてください。
実は、「数字」に意味はないので、「3」のところを「2000」にしてみても大丈夫。
何が大丈夫かはわからない。
【記載例】
1. これが
2. 番号付き
2000. リストである
【結果】
- これが
- 番号付き
- リストである
チェックボックス
記載例みたいに書くよ♡
【記載例】
- [ ] ノーチェック
- [x] チェック!
【結果】
- ノーチェック
- チェック!
6.引用
>
に続いて半角スペースで引用できます。
2つ以上置くと多重引用になります。
【記載例】
> 引用
>> 多重引用
>>> 多多重引用
>>>> 多多多重引用
【結果】
引用
多重引用
多多重引用
多多多重引用
7.水平線
3つ以上の-
,*
,_
を入力する。
間に半角スペースがあってもよか。
【記載例】
___
***
---
* * * *
【結果】
8.コード
インライン表示
コードをインライン表示する場合は、「`」で囲む。
コード表示内ではMarkdownは効かず、空白やタブなどもそのまま表示されます。
【記載例】
これ→`MarkDown<br>MarkDown`
【結果】
これ→MarkDown<br>MarkDown
コードブロック
コードブロックを生成するには、「```」か「~~~」で囲む。
【記載例】
```
<br>
この黒いのがコードブロック
<br>
```
【結果】
<br>
この黒いのがコードブロック
<br>
9.テーブル
-
と|
を組み合わせてテーブルを作成します。
-
は3つ以上ならおk。
両端の|
は省略可能。
【記載例】
|りんご|バナナ|牡蠣|
|-----|-----|---|
|2個|1房|3牡蠣|
【結果】
りんご | バナナ | 牡蠣 |
---|---|---|
2個 | 1房 | 3牡蠣 |
10.リンク
自動リンク
URLを<>
で囲む。
【記載例】
ググレ(<http://google.com>)カス
【結果】
ググレ(http://google.com)カス
インラインリンク
[]
でテキストを囲んだうえで()
でURLを囲む。
【記載例】
[ググレ](http://google.com)カス
【結果】
ググレカス
11.画像挿入
リンクのMarkDown記法の頭に!
を付けると画像を表示させることができます。
[]
内のテキストは画像のalt属性、()
内は画像のパスになります。
【記載例】
![hachi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482486/37f86ae9-c325-24cc-7ae4-a6332baa1766.png)
12.HTMLタグ
Markdown記法はもともと、ホームページを簡単に書くことを目的として作成されています。
よって、MarkDown記法にない装飾等は、HTMLタグが使えますよ。
【記載例】
<div><font size="1" color="red">フォントサイズと色変えてみた</font></div>
<div align="center">真ん中に寄せてみた</div>
【結果】
最後に
エディタによって癖があるので、自分でいろいろ試してみてください。
Qiita初投稿なので、至らないところもあるとおもいますが、なにとぞよろしくおねがいします。