1
4

Qiitaの記事の書き方

Last updated at Posted at 2023-05-29

概要

Qiitaで記事を書くにあたって、MarkDown記法についてまとめてます。
※あくまで自分が使いそうなものだけをまとめています

参考:Markdown記法 チートシート

目次

文字のサイズ
文字の装飾
リンクの挿入
画像の挿入
コードの挿入
テーブルの挿入
リスト
その他(改行、エスケープ等)

文字のサイズ

文字のサイズは、先頭に♯を付けることで変更可能
h1~h6までの設定可能
#の後には␣(スペース)が必要

記載例
# h1 
## h2
### h3
#### h4
##### h5
###### h6

h1 

h2

h3

h4

h5
h6

文字の装飾

文字を太字にする

記載例
文字を**太字**にする

文字を赤色にする

記載例
文字を<font color="red">赤色</font>にする

文字を打ち消す

記載例
~~文字~~を打ち消す

リンクの挿入

外部ページリンク

外部ページへのリンクは下記のように記載

記載例
[Qiita](https://qiita.com/)

Qiita

見出しにカーソルをあてて、左側のマークをクリックするとURLが見出しに紐づいたものに変更されるためこれを利用することも可能

目次

記載例
[目次](https://qiita.com/yuki_2392/items/a543df4e0289c96e888f#%E7%9B%AE%E6%AC%A1)

内部ページリンク

ページ内にリンクさせる場合は下記のように記載
()内の#は見出しの#の数にかかわらず1つのみ

記載例
[目次に戻る](#目次)

目次に戻る

注意事項
  ()内は見出し名が大文字でも小文字で記載

Sample

記載例
[Sample](#sample)

Sample

画像の挿入

画像は下記のように記載することで表示可能

記載例
## タイトルありの画像を埋め込む
![代替テキスト](画像のURL "画像タイトル")

## タイトル無しの画像を埋め込む
![代替テキスト](画像のURL)

適当な画像をCtrl+CでコピーしてCtrl+Zで貼り付けるだけでも勝手にリンク生成してくれます。
例)サイト左上のロゴをwindowキー+Shift+Sでコピーして貼り付け

記載例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459413/a7a1d04e-4b8d-ba82-af92-13fe96156b4e.png)

image.png
下記(HTML)のように記載することで、サイズも変更することができます。

記載例
<img width="50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3459413/6c67346f-60ac-d6a5-81fd-274730b0b8b7.png">

コードの挿入

コードの挿入は「```」でコードの前後を囲むように記載する
``` : 記載例
コード挿入
```

記載例
コードの挿入

先頭の「```」の後に「言語 : ファイル名」などのように記載することでコード表示にタイトルを付けれる

```java:test.java
System.out.println("Hello World!");
```

test.java
System.out.println("Hello World!");

テーブルの挿入

記載例
No |内容
---|---
1  |1の内容
2  |2の内容
No 内容
1 1の内容
2 2の内容

文字位置の調整

列単位で文字位置を指定できる

記載例
左寄せ|中央寄せ |右寄せ
---  |:-:     |--:     ←この行で調整
text |text    |text
左寄せ 中央寄せ 右寄せ
text text text

リスト

[数字付きリスト]

記載例
1. 概要
1. 目次
1. 内容
  1. 概要
  2. 目次
  3. 内容

リスト途中で改行したい場合

リストの途中で改行しようとするとリストが崩れる
その場合は「␣␣␣␣<br>」で改行することによりリストNoを維持できる
(␣=半角スペース)

リスト途中の改行
1. 概要
    <br>
1. 目次
    <br>
1. 内容
  1. 概要

  2. 目次

  3. 内容

その他

改行

記載例
12<br>3

12
3

エスケープ

文字の前に「 \ 」をつける

記載例
12\<br\>3

12<br>3

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4