概要

Qiitaで備忘録を書こうと思ったらまさかの記事の書き方(正確にはフォーマットの変更や数式の記述方法)が分からなかったので備忘録第一号として特に使いそうなものを個人的にまとめてみました。今回はまず基本的な文章の書き方、レイアウトに関するものをまとめてみました。次回は数式や図といった内容についてまとめようと思います。

目次

1. はじめに
 2. 語法一覧
 3. 引用元

1. はじめに

これは書き方というよりは記事を書く上での心構えのようなものですがQiita公式がガイドラインを出してますので一度目を通しておくといいと思います。特に他の記事から画像や文章を引用する場合には元記事のライセンスや注釈を確認するのを忘れないようにしておきたいですね。
Qiita公式ガイドライン

2. 語法一覧

ページのレイアウト作成
- 見出し
 - 見出し(ページ内リンク付き)
- リスト
 - 番号付きリスト
 - 空行・改行
 - 水平線
 - 引用
フォントスタイル
- 斜体
 - 太字
 - 打消し線
 - 文字色
 - 注釈
 - エスケープ

見出し

記述方法

見出しを付けたい文章の前に"#"+半角スペースをつけることで見出しとして認識させることができ、#をつける個数によってHTMLでいうh1~h6タグに相当する段落を生成することができます。ちなみにh1とh2については後述の水平線のようなアンダーラインが見出しにつきます。またここで生成した見出しがページ右端に表示される目次にもなります。

見出し

# 見出し1(水平線有り)h1相当
## 見出し2(水平線有り)h2相当
### 見出し(水平線無し)h3相当

出力結果

見出し1(水平線有り)

見出し2(水平線有り)

見出し3(水平線無し)

見出し(ページ内リンク付き)

記述方法

"[]"内にリンク元の見出し名、"()"内に#＋"リンク先で使われている見出し名”とすることで

見出し(ページ内リンク付き)

[ページ内で表示したい見出し名](#リンク先の見出し名)   // ()内の#の個数はリンク先の見出しの#の個数によらず1個
##リンク先の見出し名

出力結果

ページ内で表示したい見出し名
##リンク先の見出し

補足
- テキストの色は緑固定
- リンク先に設定できるのは見出しのみ
- ()内に記述する"#"は常に一つ(h1～h6相当であっても#は一つ)
- 記号は半角、全角ともに使用不可(例外として"-"、"_"はそのまま利用可能。" "は"-"へと変換)
- 全角空白は削除
- "[]"内は文字列なので自由に記述可能
- "[]"と"()"の中の文字を必ずしも合致させる必要はない

リスト

記述方法

"-"、"*"、"+"のいずれかと文の間に半角スペース" "を挟むことでリスト(箇条書き)として表示することができます。また次の行に改行後、半角スペースを2つ挟んで同様の記述をすることで出力結果のようにネストを作成することもできます(その場合、黒点ではなく白抜き点になります)

見出し(リスト)

 - リスト
   - リスト
     - リスト 
 * リスト
   * リスト
     * リスト
 + リスト
   + リスト
     + リスト

出力結果
リスト
- リスト
  - リスト

リスト
- リスト
  - リスト

リスト
- リスト
  - リスト

番号付きリスト

記述方法

数値+ドット+半角スペースで番号付きリストを記述可能。数値は実際に表示される際に適切な番号が割り振られるために自分で番号を振っていく必要はありません。

すべて "1. 内容"で記載しておけば後で構成の変更があった際にも自動で番号を振りなおしてくれるので楽です。

見出し(番号付きリスト)

1. リスト(1)
  1. リスト(1.1)
  1. リスト(1.2)
     1. リスト(1.2.1)
     1. リスト(1.2.2)
1. リスト(2)
1. リスト(3)

出力結果

リスト
リスト
リスト
1. リスト
2. リスト
リスト
リスト

空行・改行

記述方法

半角スペース2つまたは<br>を文末に入れることで入れることで改行を記述できます。

見出し(空行・改行)

1行目 
  <-半角スペース2つ
2行目
<br>
3行目

出力結果

1行目

2行目

3行目

水平線

記述方法

" --- "か" *** "でその行に水平線を表示することができます。

見出し(水平線)

***
---

出力結果

引用

記述方法

文頭に">"をつけることで引用文にすることができます。">"の数を増やすことで多重引用にもすることができます。

見出し(引用)

>TEST
>>TEST
>>>TEST

出力結果

TEST

TEST

TEST

斜体

記述方法

HTMLの語法と同じく<font color="color">と</font>で囲むことで文章に色を付けるkとができます。
色のリストについてはこちらの記事で紹介されているので参考にすると分かりやすいかと思います。

斜体

<font color="red">TEST</font>

出力結果

TEST

太字

記述方法

文章を"**"で囲むことでテキストを強調することができます。

太字

**TEST**

出力結果

TEST

打消し線

記述方法

文章を"~~"で囲むことでテキストに対し打消し線を重畳することができます。

打消し文字

~~TEST~~

出力結果

~~TEST~~

文字色

記述方法

HTMLの語法と同じく<font color="color">と</font>で囲むことで文章に色を付けることができます。
色のリストについてはこちらの記事で紹介されているので参考にすると分かりやすいかと思います。

文字色

<font color="red">TEST</font>

出力結果

TEST

注釈

記述方法

テキストの後に"[]"を追記しその中に"^"+"注釈番号"を記入することで注釈を追加可能
"[^注釈番号]" + ":" + "半角スペース" + 注釈内容と書くことで注釈を文末に表示させることができる。
注釈内容は何処に位置に書いても文末に表示されるので注意。

文字色

テキスト[^1]
[^1]: 注釈内容 
     ↑注釈内容の前には半角スペース

出力結果
テキスト¹

エスケープ

記述方法

マークダウン記号の前に(バックスラッシュ)をつけることでマークダウンでの特殊記号をそのまま表示させることが可能。
記号の前に"<r>"をつけることでも特殊記号をそのまま文字列で出力できているような？

文字色

\特殊文字
[例]
\*
*
<r>*

出力結果
*

*

#引用元

注釈内容 ↩