個人メモ：Qiita Markdown for 記事作成

記事概要

この記事では、Qiitaで記事を作成するときに使う書き方をまとめます。

「書き方」というタグのついたコードブロックの内容を、
Qiitaの投稿編集の本文にコピペすれば同じ結果が得られるはずです。

目次

　- 見出し（Heading）
　- 目次をつける
　- 強調
　- コードブロック
　- 画像の中央配置

見出し （Heading）

#(シャープ)の数で大きさが変わります。

書き方

# h1
###### h6

h1

h6

目次をつける

リンクになっていて、クリックすると対象の見出しに飛んでくれます。
（事前に飛ばし先となる見出しを用意してください）

書き方

[目次です](#目次)

目次です

[]の中は任意の文字、()の中は最初に「#」をつけて、
その後に飛ばし先となる見出しを入れてください。

また()の中の飛ばし先の指定にも以下のようなルールがあります。

アルファベットはリンク先が大文字でも、全部小文字で表現する
半角スペース( )は「-」に書き換える
(, ), : などの記号は全部ないものとして扱う
引用: Qiita記事の目次をつける方法

例えば本記事の見出し（Heading）は以下の書き方になっています。

書き方

[見出し（Heading）](#見出し-heading)

強調

任意の文章を強調する。

重要

警告

危険

書き方

:::note
重要
:::

:::note warn
警告
:::

:::note alert
危険
:::

コードブロック

コードフェンスで囲むだけ。
コードフェンスは「```」か「~~~」のこと。

書き方

```
「```」で囲む
```

　⬇︎

「```」で囲む

• タグをつけたい

最初のコードフェンスに「:」をつけて、文字を続ける。

書き方

```:タグ
「:」をつけて文字を続ける
```

　⬇︎

タグ

「:」をつけて文字を続ける

• コードブロック内で使用している言語を指定する

最初のコードフェンスに続けて言語を指定すると、そのコードブロック内は指定された言語であると認識して簡単な色付けをしてくれる。

php

echo "hello"

js

console.log("hello")

ruby

puts "hello"

⬇︎

書き方

# タグ部分(「:~~」)はつけなくていい

```php:php
echo "hello"
```

```JS:js
console.log("hello")
```

```ruby:ruby
puts "hello"
```

• 差分を示したい

まず最初のコードフェンスに「diff」を続けます。
そして追加を表したいときは「+」を、
削除を表したいときは「-」を、行の先頭につける。

php

- echo "hello"
+ echo "bye"

　⬇︎

書き方

# タグ部分(:php)はつけなくていい

```diff:php
- echo "hello"
+ echo "bye"
```

• コードブロック内で使用している言語を指定 ＋ 差分を表示

最初のコードフェンスに「diff」を続けて、その後に「_」をつけて言語を指定する。
「+」「-」もつけてください。

php

- echo "hello"
+ echo "bye"

　⬇︎

書き方

# タグ部分(:php)はつけなくていい

```diff_php:php
- echo "hello"
+ echo "bye"
```

画像の中央配置

• 表にして中央配置

平成

書き方

|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="140">|

• 横並びにしたい画像のサイズが違う ＋ 「width / height」でサイズを変えたくない

例：
ただ横並びにしただけだとサイズの違いが気持ち悪い

　⬇︎　表にして誤魔化す

平成	令和

書き方

※ 例のためにwidthで画像のサイズをずらしています。

|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|令和　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="150">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/8031a5e4-31be-37b9-39ba-371bae514e08.png" width="120">|

参考記事：Qiitaの記事を素敵にするテクニック

他にも画像の中央寄せは以下のようにすることもできます。

見ての通り左に線が入り、気持ち悪いのであまり使っていません。


この方法を本記事に載せると丸パクリになってしまうので、
方法を知りたい方は以下の記事をご覧ください。

参考記事：[Qiita] 画像を中央寄せにする

参考記事まとめ