初めてQiitaに記事書くときに知っておくべきこと
＜Qiitaの作成時のポイント＞
- タイトルは最上部に太字で表示
- 本文記述はマークダウン方式
- タグでの記述もできる(※style属性使えない）
- ★半角スペースは認識されない（実体参照で記述「 」）
- ※cssは使えない
- プレビュー画面あり
- 出力内容のリアルタイム確認タグ付け
- タグ付け（キーワード単位）
- 自動保存
- バッククオート「`」：shift+@
- 指定の半角スペースがないと機能が働かない
- 上下に空白行の挿入が必要な機能がある
よく見る使い方＆注意点
目次
- 枠：背景色グレー、テキスト黒(インラインコード）
- 枠：背景色黒、テキスト白（黒板）
- 枠上部のタブ
- 引用
- 見出しの種類
- CSSスタイルは認識されない
- markdownとは
- テキストリンクの設置方法
- 画像の埋め込み(外部サイト）
- 改行や空白
- 箇条書き・・・番号なし(Disc型)
- 箇条書き・・・番号付き(Decimal型)
- チェックボックス
- 折り畳み（アコーディオン）
- フォントスタイル
- 水平線
- 公式ヘルプ
よく見る使い方
（１）枠：背景色グレー、テキスト黒
AAAA
└★「`」で囲む（バッククオート：shift+@）
└名称インラインコード
記述例：「`AAA`」
（２）枠：背景色黒、テキスト白（黒板）
AAA
└★「```」＋改行＋テキスト＋改行「```」
└※改行なしで挟むと上手く表示されない
└※上下に空白を挟む（公式リンクに記載あり）
└ preタグで囲むのと同じ
└横幅が画面からはみ出す場合はスクロールが適用される(cssのoverflow: scroll)
＜エラー症状の例＞
改行なし（```AAA```）で発生した症状
└見出しタグの種類や、上部にテキストがあるかなどで表示が変化
└症状1：インラインタグになる
└症状2：背景黒で文字色も黒になる
※一番上の行が見出しとして使用されるため
└ 特別な宣言(ruby:)が必要・・・詳細は(3)↓
（３）枠上部のタブ
└「```:これ！（改行）```」
└冒頭のバッククオート3つと同じ行に「:」で記述
```:これ！
■コードに色付けする
「:」の前に言語を記述することで、コードに色付けをすることが可能
a = 4
b = 10 * a
c = 3 * a
A = range(a,b,c)
for d in A:
print(d)
a = 4
b = 10 * a
c = 3 * a
A = range(a,b,c)
for d in A:
print(d)
a = 4
b = 10 * a
c = 3 * a
A = range(a,b,c)
for d in A:
print(d)
（４）引用
AAA
└「>」をつける
└「>>」で2つの入れ子
「>」を追加で入れ子が深くなる
＜入れ子の例＞
AAA
>>>AAA
＜一般的な使い方＞
AAA
AAABBB
BBB
>AAA
AAA
>>
BBB
BBB
※「>」と同じ行でも、改行してもOK
（５）見出し
h1~h6タグをMarkdownで書く
└★「#」をつかう
「#」の数とhタグの番号が連動
└※冒頭のみ。文中は文字列になる
└アンダーラインがつくのは、「#」と「##」の２つのみ
└ マージン(余白)が適用される
└「####」の文字太さがbタグ相当
↓↓↓↓表示例↓↓↓↓
①冒頭を「#」で記述 ＝h1
②冒頭を「##」で記述 ＝h2
③冒頭を「###」で記述 ＝h3
④冒頭を「####」で記述 ＝h4
⑤冒頭を「#####」で記述 ＝h5
⑥冒頭を「######」で記述 ※h5と同じ
↑↑↑↑ここまで↑↑↑↑
（６）CSSスタイルは認識されない
・インラインstyleは使えない（style属性なし）
<hr style="border-top: dashed;">
・styleタグが使えない
└※<style scope>も認識されない
<style>
.dashed{
border-top:dashed;
}
</style>
・外部のスタイルシートで読み込んだcssの適用もできない
<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)では適用可能
（７）markdownとは
・htmlをシンプルに書ける記述
・記号で記述できる
・タグも使える
・cssやjsも使える
・拡張子は「.md」
<注意点>
・ファイルの拡張子は「.md」
・プレビュー機能のついたエディタでないと適用内容が見れない
・ブラウザでは開けない（htmlファイルとは異なる）
└markdownプレビュー機能のadonを使えば表示できる
・※QiitaのMarkdownは一部Qiita専用仕様
（８）リンク・・・テキスト
【記述方法】：[title](URL)
└titleがアンカーテキストになる
└カッコの中にリンク先URLを書く
[markdownの書き方 Qiita公式リンク](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
※URLをそのまま貼り付けてもリンクになる
https://qiita.com/Qiita/items/c686397e4a0f4f11683d
（９）画像の埋め込み(外部サイト）
【記述方法】：
└altに代替テキストを記載
└カッコの中にリンク先URLを書く
タイトルをつけて画像を埋め込む
【記述方法】：
└altに代替テキストを記載
└カッコの中にリンク先URLを書く
└titleにホバーで表示するテキストを記載
※youtubeなど動画の埋め込みは画像が表示されない
→ 表示する場合はテキストリンクを使う
ジノビリ
画像引用元：ぱくたそ
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タグ
- 1テキストを改行するのみ
- ※改行を2個以上続けても変化なし
- ソースコードが見やすくなるのみ
- 半角スペース2つでも同じ役割
- 複数記載しても、1回の改行まで
- 空白行の挿入：<br>タグ
- 見出しが十分なmarginを含むためあまり使用しない
（１１）箇条書き・・・番号なし(Disc型)
冒頭に「- 」を記述する
└上下に空白行が必要
└ハイフンの後には「半角スペース」が必要
└「- 」が黒丸になる
└タブで階層を下げれる（白丸になる）
└※改行すると同じ階層になる（shift+tabキーで1階層上げる）
- AAAA
- BBBB
- CCCC
- DDDD
- EEEE
- AAAA
- BBBB
- CCCC
- DDDD
- EEEE
※箇条書きモードになっていない状態でTABキーを押すと投稿の選択になってしまう。
※意図しない公開に注意が必要（逆に、TAB+enterですぐに公開できる）
「* 」「+ 」「- 」(マイナス)でも「-」(ハイフン)と同じ機能になる
└黒丸＆白丸（Disc型）
└記号の後に半角スペース必要（ないと箇条書きモードにならない）
（１２）箇条書き・・・番号付き(Decimal型)
冒頭に「1＋ドット+半角スペース」(「1. 」)を記述する
└上下に空白行が必要
└ドットの後には「半角スペース」が必要
└タブで階層を下げれる（白丸になる）
└改行すると、自動で+1された数字となる（ソースコード）
└※改行すると同じ階層になる（shift+tabキーで1階層上げる）
└※冒頭の数字に関係なく、１から連番となる
└階層を下げた場合は、再度１から連番となる
- AAAA
- BBBB
- CCCC
- DDDD
- EEEE
- FFFF
- GGGG
1. AAAA
1. BBBB
1. CCCC
1. DDDD
1. EEEE
1. FFFF
1. GGGG
※すべて「1. 」で記述しても、表示は連番となる
└後から追加・削除する場合に便利
└ソースコードは改行で数字が変わるので１に書き直す必要がある。。
数字を何番にするかは表示と関係がない
- AAAA
- BBBB
- CCCC
- DDDD
- EEEE
- FFFF
5. AAAA
9. BBBB
100. CCCC
101. DDDD
53. EEEE
1. FFFF
＜メリット＞表示が必ず連番になる（ソースコードの番号が気になるだけ）
（１３）チェックボックス
- AAAA
- BBBB
- CCCC
「ハイフン＋半角スペース＋カッコ＋半角スペース/x(小文字のエックス)＋カッコ＋半角スペース
└チェックなし： [ ]
└チェックあり： [x]
- [ ] AAAA
- [ ] BBBB
- [x] CCCC
＜注意点＞
条件が１つでも欠けると表示されない
[ ] AAAA ※ハイフンなし
-[ ] AAAA ※ハイフンのあとに半角スペースなし
- [] AAAA ※カッコの中に半角スペースなし
- [ ]AAAA ※カッコのあとに半角スペースなし
（１４）折り畳み
もっと見る
・detailsタグとsummaryタグを使うことで実装できます。
・detailsタグで追加情報としたい内容を囲む。
summaryタグ要約して表示したい文章囲む。
<details><summary>もっと見る</summary>
・detailsタグとsummaryタグを使うことで実装できます。
・detailsタグで追加情報としたい内容を囲む。
summaryタグ要約して表示したい文章囲む。
</details>
└ <details></details>で囲む（▶が表示される）
└折りたたまずに表示させる部分を<summary></summary>タグで囲む
└※detailsタグの中でMarkdownを使うには折りたたまれる部分をdivタグで囲む（折り畳みが解除される）
折り畳みの中でmarkdownを使う
この中でmarkdownを使用
（１５）フォントスタイル
太字
テキストを「**」で囲む
└strongタグ
**ここが太字で表示されます**
打消し
このテキストを打ち消し
テキストを「~~」で囲む
└strikeタグ
~~このテキストを打ち消し~~
イタリック表示
Italic format is applied
テキストを「*」で囲む
└※アルファベットのみ（日本語には適用なし）
└Qittaの仕様。通常はemタグが適用される
*Italic format is applied*
（１６）水平線
書き方が３つある(どれでもOK）
1：「*」連続して3つ以上
2：「-」連続して3つ以上
3：「<hr>」
***
****
***
---
----
-------------
<hr>
※太さが違って見えるが、記述によって太さが決まっているわけではない。
└*****は***より太いとかはない
└記述した場所によって太く見える場合がある(目の錯覚？）
（１７）書き方の公式ヘルプ
編集画面のヘルプから、主要な書き方を見ることもできる。
■書き方ヘルプの場所
 |
|---|
編集画面上部の？マークをクリック
■表示画面
 |
|---|
もっと詳しく知りたい場合は、モーダル上部の「(もっと詳しく知りたい方はこちら)」をクリック
＜ヘルプで躓いたところ＞
・枠（背景グレー、文字色黒）がどれかわかりずらい
└ 他のサンプルの表示例も背景がグレーになっている
└ 「コードのインライン表示」でパッとわかれば問題なし
・枠（背景黒、文字色白（いわゆる黒板））がどれかわからない
└ サンプルではグレーになっている
・リスト表示は半角スペースがないと機能しない
└上下に空白行がなくても機能しない
・番号付きリストの実際の表示が番号と連動しない
・CSSの適用方法がわからない
⇒ 適用できない
・水平線の太さを変えたり、色を変えられるのかがわからない
⇒ 変えれない
・強調（イタリック）の表示が何も変化していない
└ アルファベットしか適用されないのに、サンプルでは日本語の例になっている
などなど、、
とても書ききれないので一部抜粋
実際の表示と違うのは、他の人の記事見てこんなふうに表示したい！と思ったときの逆引きが難しい。。
一通りつまづくパターンがわかったらヘルプのみで十分。
（むしろシンプルでわかりやすい）
ページ上部に戻る
セクション別リンク