【書き方まとめ】初めてQiitaに記事を書くときに知っておくべきこと

#初めてQiitaに記事書くときに知っておくべきこと

######＜Qiitaの作成時のポイント＞
- タイトルは最上部に太字で表示
- 本文記述はマークダウン方式
    - タグでの記述もできる(※style属性使えない）
    - ★半角スペースは認識されない（実体参照で記述「\&nbsp;」）
- ※cssは使えない
- プレビュー画面あり
    - 出力内容のリアルタイム確認タグ付け
- タグ付け（キーワード単位）
- 自動保存
- バッククオート「`」：shift+@
- 指定の半角スペースがないと機能が働かない
- 上下に空白行の挿入が必要な機能がある


##よく見る使い方＆注意点
####目次

1. [枠：背景色グレー、テキスト黒(インラインコード）] (#１枠背景色グレーテキスト黒)
2. [枠：背景色黒、テキスト白（黒板）] (#２枠背景色黒テキスト白黒板)
3. [枠上部のタブ](#３枠上部のタブ)
4. [引用](#引用)
5. [見出しの種類](#５見出し)
6. [CSSスタイルは認識されない](#６cssスタイルは認識されない)
7. [markdownとは](#７markdownとは)
8. [テキストリンクの設置方法](#８リンクテキスト)
9. [画像の埋め込み(外部サイト）](#９画像の埋め込み外部サイト)
10. [改行や空白](#１０改行や空白)
11. [箇条書き・・・番号なし(Disc型)](#１１箇条書き番号なしdisc型)
12. [箇条書き・・・番号付き(Decimal型)](#１２箇条書き番号付きdecimal型)
13. [チェックボックス](#１３チェックボックス)
14. [折り畳み（アコーディオン）](#１４折り畳み)
15. [フォントスタイル](#１５フォントスタイル)
16. [水平線](#１６水平線)
17. [公式ヘルプ](#１７書き方の公式ヘルプ)


##よく見る使い方
###（１）枠：背景色グレー、テキスト黒
`AAAA`
　└★「\`」で囲む（バッククオート：shift+@）
　└名称インラインコード
　
記述例：「\`AAA\`」


<br><br><br>
###（２）枠：背景色黒、テキスト白（黒板）

```
AAA
```

　└★「\`\`\`」＋改行＋テキスト＋改行「\`\`\`」
　└※改行なしで挟むと上手く表示されない
　└※上下に空白を挟む（[公式リンク](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)に記載あり）
　└ preタグで囲むのと同じ
　└横幅が画面からはみ出す場合はスクロールが適用される(cssのoverflow:&nbsp;scroll)

>＜エラー症状の例＞
改行なし（\`\`\`AAA\`\`\`）で発生した症状
　└見出しタグの種類や、上部にテキストがあるかなどで表示が変化
　└症状1：インラインタグになる
　└症状2：背景黒で文字色も黒になる
　　※一番上の行が見出しとして使用されるため
　　　　└ 特別な宣言(ruby:)が必要・・・詳細は(3)↓



<br><br><br>
###（３）枠上部のタブ
```ruby:これ！
```
　└「\`\`\`:これ！（改行）\`\`\`」
　└冒頭のバッククオート3つと同じ行に「:」で記述

```
```:これ！
```

<br>
**■コードに色付けする**
「:」の前に**言語を記述**することで、コードに色付けをすることが可能

```python:「python：」と記述
a = 4
b = 10 * a 
c = 3 * a
A = range(a,b,c)

for d in A:
    print(d)
```

```ruby:「ruby：」と記述
a = 4
b = 10 * a 
c = 3 * a
A = range(a,b,c)

for d in A:
    print(d)
```

```text:「text：」と記述
a = 4
b = 10 * a 
c = 3 * a
A = range(a,b,c)

for d in A:
    print(d)
```


<br><br><br>
###（４）引用
>AAA

　　└「\>」をつける
　　└「\>\>」で2つの入れ子
　　　　「\>」を追加で入れ子が深くなる

＜入れ子の例＞
>>>
AAA

```
>>>AAA
```

＜一般的な使い方＞
>AAA
AAA
>>
BBB
BBB

```
>AAA
AAA
>>
BBB
BBB
※「>」と同じ行でも、改行してもOK
```


<br><br><br>
###（５）見出し
h1~h6タグをMarkdownで書く
　　└★「#」をつかう
　　　　「#」の数とhタグの番号が連動
　　└※冒頭のみ。文中は文字列になる
　　└アンダーラインがつくのは、「#」と「##」の２つのみ
　　└ マージン(余白)が適用される
　　└「####」の文字太さがbタグ相当

<hr>
↓↓↓↓表示例↓↓↓↓
#①冒頭を「#」で記述　＝h1
##②冒頭を「##」で記述　＝h2
###③冒頭を「###」で記述　＝h3
####④冒頭を「####」で記述　＝h4
#####⑤冒頭を「#####」で記述　＝h5
######⑥冒頭を「######」で記述　※h5と同じ
↑↑↑↑ここまで↑↑↑↑
<hr>




<br><br><br>
###（６）CSSスタイルは認識されない
**・インラインstyleは使えない（style属性なし）**

```ruby:インラインスタイルの例
<hr style="border-top: dashed;">
```

<br>
**・styleタグが使えない**
　　└※\<style scope\>も認識されない

```ruby:スタイルタグの例
<style>
    .dashed{
         border-top:dashed;
    }
</style>
```

<br>
**・外部のスタイルシートで読み込んだcssの適用もできない**

```ruby:外部スタイルシートの例
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.12.1/themes/smoothness/jquery-ui.css">
<div class="ui-dialog">この要素がfloatする</div>
```
※上記３つとも通常のmarkdownファイル(.md)では適用可能




<br><br><br>
###（７）markdownとは
・htmlをシンプルに書ける記述
・記号で記述できる
・タグも使える
・cssやjsも使える
・拡張子は「.md」


><注意点>
・ファイルの拡張子は「.md」
・プレビュー機能のついたエディタでないと適用内容が見れない
・ブラウザでは開けない（htmlファイルとは異なる）
　└markdownプレビュー機能のadonを使えば表示できる
・※QiitaのMarkdownは一部Qiita専用仕様




<br><br><br>
###（８）リンク・・・テキスト
[markdownの書き方 Qiita公式リンク](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

【記述方法】：`[title](URL)`
　　└titleがアンカーテキストになる
　　└カッコの中にリンク先URLを書く

```ruby:リンクの書き方
[markdownの書き方 Qiita公式リンク](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
```

※URLをそのまま貼り付けてもリンクになる
https://qiita.com/Qiita/items/c686397e4a0f4f11683d





<br><br><br>
###（９）画像の埋め込み(外部サイト）
![紅葉した山](https://pakutaso.cdn.rabify.me/shared/img/thumb/081AME0226.jpg?d=400)

【記述方法】：`![alt](URL)`
　　└altに代替テキストを記載
　　└カッコの中にリンク先URLを書く

```ruby:画像埋め込み例
![紅葉した山](https://pakutaso.cdn.rabify.me/shared/img/thumb/081AME0226.jpg?d=400)
```

タイトルをつけて画像を埋め込む
![6つの花の画像](https://pakutaso.cdn.rabify.me/shared/img/thumb/flower201261775.jpg?d=400 "フラワーリング(ガーベラ)")

【記述方法】：`![alt](URL "title")`
　　└altに代替テキストを記載
　　└カッコの中にリンク先URLを書く
　　└titleにホバーで表示するテキストを記載

```ruby:画像埋め込み(titleあり)例
![6つの花の画像](https://pakutaso.cdn.rabify.me/shared/img/thumb/flower201261775.jpg?d=400 "フラワーリング(ガーベラ)")
```
※youtubeなど動画の埋め込みは画像が表示されない
![ジノビリ](https://youtu.be/KXqqgsUJfOM "ジノビリスーパープレイ")
→　表示する場合はテキストリンクを使う
[ジノビリ](https://youtu.be/KXqqgsUJfOM)




>画像引用元：ぱくたそ
https://pakutaso.cdn.rabify.me/shared/img/thumb/081AME0226.jpg?d=400
https://pakutaso.cdn.rabify.me/shared/img/thumb/flower201261775.jpg?d=400




<br><br><br>
###（１０）改行や空白
- エディタ上での改行 =　brタグ
    - 1テキストを改行するのみ
    - ※改行を2個以上続けても変化なし
    - ソースコードが見やすくなるのみ
- 半角スペース2つでも同じ役割
    - 複数記載しても、1回の改行まで
- 空白行の挿入：\<br\>タグ
    - 見出しが十分なmarginを含むためあまり使用しない
    




<br><br><br>
###（１１）箇条書き・・・番号なし(Disc型)
`冒頭に「- 」を記述する`
　　└**上下に空白行**が必要
　　└ハイフンの後には**「半角スペース」**が必要
　　└「- 」が黒丸になる
　　└タブで階層を下げれる（白丸になる）
　　└※改行すると同じ階層になる（shift+tabキーで1階層上げる）

- AAAA
- BBBB
    - CCCC
    - DDDD
- EEEE


```ruby:番号なしリストの例
- AAAA
- BBBB
    - CCCC
    - DDDD
- EEEE
```

※箇条書きモードになっていない状態でTABキーを押すと**投稿の選択**になってしまう。
※意図しない公開に注意が必要（逆に、TAB+enterですぐに公開できる）

`「* 」「+ 」「- 」(マイナス)でも「-」(ハイフン)と同じ機能になる`
　　└黒丸＆白丸（Disc型）
　　└記号の後に**半角スペース**必要（ないと箇条書きモードにならない）



<br><br><br>
###（１２）箇条書き・・・番号付き(Decimal型)
`冒頭に「1＋ドット+半角スペース」(「1. 」)を記述する`
　　└**上下に空白行**が必要
　　└ドットの後には**「半角スペース」**が必要
　　└タブで階層を下げれる（白丸になる）
　　└改行すると、自動で+1された数字となる（ソースコード）
　　└※改行すると同じ階層になる（shift+tabキーで1階層上げる）
　　└※冒頭の数字に関係なく、１から連番となる
　　└階層を下げた場合は、再度１から連番となる

1. AAAA
1. BBBB
    1. CCCC
    1. DDDD 
        1. EEEE
        1. FFFF
1. GGGG   

```ruby:番号付きリストの例
1. AAAA
1. BBBB
    1. CCCC
    1. DDDD 
        1. EEEE
        1. FFFF
1. GGGG  
```
※すべて「1. 」で記述しても、表示は連番となる
　└後から追加・削除する場合に便利
　└ソースコードは改行で数字が変わるので１に書き直す必要がある。。

`数字を何番にするかは表示と関係がない`

5. AAAA
9. BBBB
100. CCCC
    101. DDDD
    53. EEEE
1. FFFF


```ruby:上記表示のソースコード
5. AAAA
9. BBBB
100. CCCC
    101. DDDD
    53. EEEE
1. FFFF 
```

＜メリット＞表示が必ず連番になる（ソースコードの番号が気になるだけ）




<br><br><br>
###（１３）チェックボックス

- [ ] AAAA
- [ ] BBBB
- [x] CCCC 

`「ハイフン＋半角スペース＋カッコ＋半角スペース/x(小文字のエックス)＋カッコ＋半角スペース`
　　└チェックなし： [&nbsp; ]
　　└チェックあり： [x]

```ruby:チェックボックスの例
- [ ] AAAA
- [ ] BBBB
- [x] CCCC 
```

**＜注意点＞**
条件が１つでも欠けると表示されない
[ ] AAAA ※ハイフンなし
-[ ] AAAA　※ハイフンのあとに半角スペースなし
- [] AAAA　※カッコの中に半角スペースなし
- [ ]AAAA　※カッコのあとに半角スペースなし




<br><br><br>
###（１４）折り畳み
<details><summary>もっと見る</summary>
・detailsタグとsummaryタグを使うことで実装できます。
・detailsタグで追加情報としたい内容を囲む。
summaryタグ要約して表示したい文章囲む。
</details>
<br>

```ruby:折り畳みの例
<details><summary>もっと見る</summary>
・detailsタグとsummaryタグを使うことで実装できます。
・detailsタグで追加情報としたい内容を囲む。
summaryタグ要約して表示したい文章囲む。
</details>
```

　　└ \<details\>\</details\>で囲む（▶が表示される）
　　└折りたたまずに表示させる部分を\<summary\>\</summary\>タグで囲む
　　└※detailsタグの中でMarkdownを使うには折りたたまれる部分をdivタグで囲む（折り畳みが解除される）

`折り畳みの中でmarkdownを使う`

<details><summary>この中でmarkdownを使用</summary><div>
####detailsタグとsummaryタグを使うことで実装できます。
**detailsタグ**で追加情報としたい内容を囲む。
**summaryタグ**で要約して表示したい文章囲む。

```ruby:折り畳みの例
<details><summary>折り畳みの中でmarkdownを使う</summary><div>
####detailsタグとsummaryタグを使うことで実装できます。
**detailsタグ**で追加情報としたい内容を囲む。
**summaryタグ**で要約して表示したい文章囲む。
</div></details>
<br>
```

</div></details>
<br>




<br><br>
###（１５）フォントスタイル
**太字**
`テキストを「**」で囲む`
　　└strongタグ

```ruby:太字の例
**ここが太字で表示されます**
```

<br>
**打消し**
~~このテキストを打ち消し~~
`テキストを「~~」で囲む`
　　└strikeタグ

```ruby:打消しの例
~~このテキストを打ち消し~~
```

<br>
**イタリック表示**
*Italic format is applied*
`テキストを「*」で囲む`
　　└※アルファベットのみ（日本語には適用なし）
　　└Qittaの仕様。通常はemタグが適用される

```ruby:イタリック表示の例
*Italic format is applied*
```



<br><br>
###（１６）水平線
書き方が３つある(どれでもOK）

1：`「*」連続して3つ以上`
2：`「-」連続して3つ以上`
3：`「<hr>」`

***
****
***
---
----
---
<hr>

```ruby:水平線の例
***
****
***
---
----
-------------
<hr>
```

※太さが違って見えるが、記述によって太さが決まっているわけではない。
　　└\*\*\*\*\*は\*\*\*より太いとかはない
　　└記述した場所によって太く見える場合がある(目の錯覚？）



<br><br>
###（１７）書き方の公式ヘルプ

編集画面のヘルプから、主要な書き方を見ることもできる。

■書き方ヘルプの場所

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/7d365bfc-d561-3298-b1ef-fda528b87cee.png) |
|:--|

編集画面上部の？マークをクリック
<br>
■表示画面

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/38000ca6-0f0b-4287-fd6d-c575e4f3abaa.png)|
|:--|


もっと詳しく知りたい場合は、モーダル上部の「[(もっと詳しく知りたい方はこちら)](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)」をクリック


<br>
＜ヘルプで躓いたところ＞


**・枠（背景グレー、文字色黒）がどれかわかりずらい**
　　└　他のサンプルの表示例も背景がグレーになっている
　　└ 「コードのインライン表示」でパッとわかれば問題なし

**・枠（背景黒、文字色白（いわゆる黒板））がどれかわからない**
　　└　サンプルではグレーになっている

**・リスト表示は半角スペースがないと機能しない**
　　└上下に空白行がなくても機能しない

**・番号付きリストの実際の表示が番号と連動しない**

**・CSSの適用方法がわからない**　
　　⇒　適用できない

**・水平線の太さを変えたり、色を変えられるのかがわからない**
　　⇒　変えれない

**・強調（イタリック）の表示が何も変化していない**
　　└ アルファベットしか適用されないのに、サンプルでは日本語の例になっている

などなど、、
とても書ききれないので一部抜粋

実際の表示と違うのは、他の人の記事見てこんなふうに表示したい！と思ったときの逆引きが難しい。。

<br>
一通りつまづくパターンがわかったらヘルプのみで十分。
（むしろシンプルでわかりやすい）


<br><br><br>
***
###[ページ上部に戻る](#目次)
**セクション別リンク**

1. [枠：背景色グレー、テキスト黒(インラインコード）] (#１枠背景色グレーテキスト黒)
2. [枠：背景色黒、テキスト白（黒板）] (#２枠背景色黒テキスト白黒板)
3. [枠上部のタブ](#３枠上部のタブ)
4. [引用](#引用)
5. [見出しの種類](#５見出し)
6. [CSSスタイルは認識されない](#６cssスタイルは認識されない)
7. [markdownとは](#７markdownとは)
8. [テキストリンクの設置方法](#８リンクテキスト)
9. [画像の埋め込み(外部サイト）](#９画像の埋め込み外部サイト)
10. [改行や空白](#１０改行や空白)
11. [箇条書き・・・番号なし(Disc型)](#１１箇条書き番号なしdisc型)
12. [箇条書き・・・番号付き(Decimal型)](#１２箇条書き番号付きdecimal型)
13. [チェックボックス](#１３チェックボックス)
14. [折り畳み（アコーディオン）](#１４折り畳み)
15. [フォントスタイル](#１５フォントスタイル)
16. [水平線](#１６水平線)
17. [公式ヘルプ](#１７書き方の公式ヘルプ)