LoginSignup
1
0

Qiita【Markdownまとめ】

Last updated at Posted at 2024-02-29

はじめに

こんにちは!
 とっても忘れっぽいn0h0h0です。
冒頭にもあるとおり僕はとっても忘れっぽいです。なのでメモ程度にこれから学ぶことを記していきたいと思いQiitaを始めて見ました。プログラミング関連については素人です。間違えなどがありましたら申し訳ありません。
 まえおきのまえおきが長くなりましたが今回はQiitaを初めて触るということでQiitaのMarkdownの書き方についてまとめておきたいと思います。

目次

①見出しについて
②コードの挿入
③画像の挿入
④リンクの挿入
⑤文字装飾
⑥リスト
⑦表
⑧その他諸々

①見出しについて

文頭に#をつけることによって見出しを作ることができます。
h1のhは"heading"略となっています。
#の数で見出しの重みづけを行っています。

記述例

# 見出し1(h1)
## 見出し2(h2)
### 見出し3(h3)
#### 見出し4(h4)
##### 見出し5(h5)
###### 見出し6(h6)

表示例

見出し1(h1)

見出し2(h2)

見出し3(h3)

見出し4(h4)

見出し5(h5)
見出し6(h6)

②コードの挿入

様々な言語でのコードをわかりやすく記述するための記述方法です。
コードを挟む様に```をつけることによってコードを挿入することができます。
※バッククォート(`)とクォーテーション(')は全くの別物です。

記述例
```
コードの記述
```

表示例

コードの記述

コードに各言語ごとシンタックスハイライトをつけることもできます。
ちなみにシンタックスハイライトはその言語の構文が協調されることです
記述例(htmlを記述したいときの例です)
```html
<html>
<head>
<meta charset="UTF-8">
<title>title
</head>
<body>
内容記述
</body>
</html>
```

表示例

<html>
<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>
<body>
内容記述
</body>
</html>

コードにファイル名をつけたい場合は言語の名前のところをファイル名にすることで名前をつけることができます。

一部だけコード表示にしたい場合はコード表示にしたい部分をバッククォートで囲むことによって記述できます。
記述例

コマンドは`hoge`です。

表示例
コマンドはhogeです。

③画像の挿入

好きな画像を貼り付けるときの記述方法です。
markdownで書いてもいいですが画像をドラッグ&ドロップする方が簡単かもしれません。
めんどくさい方法ですが一応やり方も書いておきます。

記述例

![代替テキスト](画像のURL)

表示例
裸の王様

④リンクの挿入

URLをリンクテキストとタイトルを設定しながら記述するための方法です。

記述例

[リンクテキスト](URL "タイトル")

表示例
Qiita

⑤文字装飾

今回は「イタリック,太字,文字色、取り消し線」の4種類の記述方法について説明します。
文字の色についてはRGBで設定することができるのでほとんどの色が使えると思います。
200色ある白も表現できるのではないかと考えます。

記述例

*イタリック*
_イタリック_

__太文字__
**太文字**

<font color="色コード"or"rgb()"or"色の名前">

~~取り消し線~~

表示例
イタリック
イタリック

太文字
太文字

あか

取り消し線

#⑥リスト
今回は箇条書きリスト、番号付きリストについて説明します。
どんなリストなのかは名前の通りです。

記述例

「-,+,*」の三つのいずれかを使用します。
以下のようにインデントを加えることでリストの中にさらにリストを作ることができます。
* 箇条書きリスト
    * 箇条書きリスト
        * 箇条書きリスト

表示例

  • 箇条書きリスト
    • 箇条書きリスト
      • 箇条書きリスト

記述例

1. 番号付きリスト
1. 番号付きリスト
1. 番号付きリスト
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2

表示例

  1. 番号付きリスト
  2. 番号付きリスト
  3. 番号付きリスト
    1. 番号付きリスト3_1
    2. 番号付きリスト3_2

⑦表

セル内での文字の位置の設定も変えることができます。

記述例

|要素1|要素2|要素3|
|:--|:--:|--:|
|左詰め|中央揃え|右揃え|
|右|中央|左|

表示例

要素1 要素2 要素3
左詰め 中央揃え 右揃え
中央

⑧その他諸々

マークダウンの無効化

マークダウンを無視して記述したいとき有効なマークダウンです。
例えば#をその文字本来の意味として使用したいとき以下のように文頭に\をつけると記述することができます。
※スラッシュ(/)ではなくバックスラッシュ()であることに注意。

記述例

\# の意味で使いたい

表示例
#の意味で使いたい

線の追加

段落や説明の区切りとして水平線が欲しいときに有用です。

記述例

「*,-」のどちらかを三つ以上一行中に書くと水平線を書くことができます。
***
---

表示例



引用

引用文を記述したいときに一目で引用とわかるようにしたい時に有用です。以下を見て明る通り引用の部分に灰色の縦線がついていつことがわかります。

記述例

>引用文をここに記述

表示例

引用文をここに記述

補足説明

より注意を引く形で補足をしたい場合に有用な記述方法です。

記述例

:::note info
インフォメーション
infoは省略可能です。
:::

:::note warn
警告
○○に注意してください。
:::

:::note alert
より強い警告
○○しないでください。
:::

表示例

インフォメーション
infoは省略可能です。

警告
○○に注意してください。

より強い警告
○○しないでください。

参考文献

https://www.linustock.com/ (イラスト)
https://qiita.com/shizuma (記述方法)
https://qiita.com/Qiita/items/c686397e4a0f4f11683d (記述方法)

1
0
1

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
0