Markdown記法、入門！

Qiitaで記事を投稿し始めて知った「Markdown」
ちょっと興味が湧いたのと、さらなる良記事が書けるようにとの願いを込めて、
今回はMarkdown記法について勉強していきます。

**まずはじめに**

「そもそもMarkdown記法とはなによ？」ってところなんですが一言で言い表すと、
「テキストをHTMLに変換するための記法」だそうです。

**...うん。とにかくやってみよう！**

#公式サイトにアクセス
https://daringfireball.net/projects/markdown/
![コメント 2020-09-06 175608.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/8175b236-be08-1763-cdfe-f4d94ac1db14.jpeg)

「Dingus」というリンクから実際に試せるみたいので、ここでMarkdown記法を試してみます！

##リスト
![コメント 2020-09-06 180016.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/b2d20e07-0d6f-4d37-f543-3aed09425e0f.jpeg)
「Convert」を押して変換
![コメント 2020-09-06 180145.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/2b0ab173-fd41-c500-2eff-cee932705b74.jpeg)
なんと！簡単な記述でHTMLのリストが書かれており、
プレビューを見てもちゃんとリストの形になっている！

**す、すごいな...！**

------------

といった感じで、面倒なタグをいちいち入力しなくても簡単にわかりやすく覚えやすく書けるのがこの**"Markdown記法"**です。

それではドンドンやっていきましょう。

#コード
コードの前後を「`」(バッククォート)を3つずつ書いて囲む
![コメント 2020-09-06 182701.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/f3cf32f0-39d9-9a87-106e-c8ef0a7a8c96.jpeg)
![コメント 2020-09-06 182720.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/789665ba-13c4-ca47-32ee-68c47c90ce94.jpeg)


ちなみに、Qiitaではこんな感じになります

```
public class Excercise {
  public static void main(String[] args) throws Exception{
   for (int i = 1; i <= 9; i++) {
     System.out.println((3 * i) + " " );
   }
  }
 }
```

**のっぺりとしたコードに比べて、ぐッと見やすくなりましたね。**

-----------

**※AtomエディターのMarkdownプレビュー機能が直感的でわかりやすいので、これ以降はAtomエディターを使っていきます。
Markdown記法は対応しているサービスで若干のローカルルールがあるので気を付けてください**



## 見出し
「#」を付けると見出しになる
![コメント 2020-09-06 184618.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/67363c7b-cc29-d624-47c0-805cd687f4fb.jpeg)


##パラグラフ
HTMLで言うところのPタグ。間に空の行を入れてあげる。
![コメント 2020-09-06 185807.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/1e311be9-a221-5969-33ff-29473513fce8.jpeg)

## 改行
改行したい部分に半角スペースを2個以上つける
![コメント 2020-09-06 190157.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/6a959263-33a8-242e-766d-609ad29a9a80.jpeg)
**QiitaではEnterキーで改行できるので直感的でいいですね。**

------------

## 引用
文の先頭に「>」を入れる
![コメント 2020-09-06 191731.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/068c58c3-9a30-f863-f52d-c0e866426307.jpeg)
> Qiitaでも同じ記述でいけます。

------------

## 区切り線
「-」「*」「_」を3つ以上を並べる
![コメント 2020-09-06 192159.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/372658f0-1c5d-2f94-058b-48efa288144e.jpeg)

## 斜体

強調したい文字を「*」もしくは、「_」で囲む
![コメント 2020-09-06 193609.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/f48b91aa-fd9a-b8fe-1f87-301487f9573e.jpeg)


## 太字
強調したい文字を「*」もしくは、「_」2つで囲む
![コメント 2020-09-06 193011.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/280198ac-edae-9063-8d0a-f1ef86ff539c.jpeg)

## 斜体かつ太字
強調したい文字を「*」もしくは、「_」3つで囲む
![コメント 2020-09-06 193159.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/9c07d938-5a66-1007-50a0-ceb45e6e0262.jpeg)

## 箇条書き、いろいろ
注意点は記号のあとに**必ず半角スペース**を入れること
![コメント 2020-09-06 224536.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/26f4d42b-01ca-97b5-b77e-3b32b3e15118.jpeg)

## 連番付きのリスト
数字、ピリオドのあとには必ず半角スペースを入れること
![コメント 2020-09-06 224425.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/7e5ee201-05b8-1089-6fae-804c0cf59ad6.jpeg)


## ネスト
上下の行を空行にし、4文字以上の字下げ(スペース)をしたあとに文字を入力すれば、そのリスト内の項目として認識される。
![コメント 2020-09-06 223948.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/7020722e-4f0d-e5b7-bf60-8638c0d51663.jpeg)

## リンク
1. **「<>」**

    <>にリンク先のURLを書くことでタップするとリンク先に飛べるようになる

1. **「[]」「()」**

    []内にテキスト、()内にリンク先のURLを書くことでテキストリンクになる

1. **「""」**

    「"」で囲んだ内容がマウスオーバー時に説明として表示される


![コメント 2020-09-06 224901.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/8a44c23e-e83a-eea4-bace-3f080dae4d6c.jpeg)

## コードを見やすくするために
先頭に空白を4つ空ける
![コメント 2020-09-06 230348.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/94be293b-9d0a-0cb4-6936-92d2847ea66c.jpeg)

インラインの中にあるコードをわかりやすく見せるためには、コードの部分を「`」で囲む
![コメント 2020-09-06 231042.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/88c66b76-9371-fde6-2a69-fe086509ccb8.jpeg)

## 画像の表示
**「!」「[]」「()」**
この文法、よく見るなぁ～って思ったら、Qiitaで記事を書くときに画像添付したら出てくるMarkdown記法ですね！また、書き方は多少違いますが、リンクとほぼほぼ同じような書き方なので、あまり迷うこともなかろうかと思います。
!<!-- [alt属性のテキスト] -->(画像のパス、もしくはURL)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619833/bf881d50-d56d-a006-37d3-da821cdb869c.png)

# 終わりに
たくさんの方の記事を読んたあとに、こうして自分でも記事を投稿し始めたわけなのですが、
「自分が見ていたような、読みやすくてちょっとシャレた感じに書くのはどうすればええんやー」って思って、調べ始めたのがMarkdown記法との出会いです。
すごい難しい記述をするわけではなく、記号を付け足したり、挟んだり、空白入れてみたりと、直感的にできるのが楽しいです。Markdown記法が使えれば、記事や質問をする時にすごく読みやすくなるので、これからも積極的に使っていこうと思います。

この記事を書くまでにもたくさんの記事を参考にさせていただいたので、下に「参考にした記事や教材」といった形で、リンクを貼らせていただければと思います。


1. [ドットインストール](https://dotinstall.com/lessons/basic_markdown_v2/40601)
2. [Markdown公式サイト](https://daringfireball.net/projects/markdown/)
3. [Maarkdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
4. [Maarkdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7)