2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Qiitaで記事を書きたい!

Last updated at Posted at 2021-09-28

概要

エンジニアとして調べた事や学んだ事をアウトプットする場所が欲しいな〜と思ってQiitaに記事を投稿しようと思いました。
が、Wordのように直感的に書ける訳ではなく、Markdown記法というルールで書くみたい...。
ということで、記事投稿に必要な最低限のルールをここに書き出す事で最初の投稿にしちゃおうと思います。

目次

  • Markdown記法って何?
  • 見出しをつける
  • 文字の強調
  • コードの表示
  • 引用する
  • リンクを貼る
  • 写真を貼る
  • リストを作る
  • 表を作る
  • まとめ

Markdown記法って何?

Markdown記法とは...

「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)文書へと変換できるフォーマット」として、2004年にジョン・グルーバーにより作成された。
(Wikipediaより引用 https://ja.wikipedia.org/wiki/Markdown)

要するに、マークアップ言語「Markdown」におけるテキスト文書の書き方やルールのことです。

見出しをつける

1〜6個の**#(シャープ)**で見出しを記述します。HTMLで言うh1~h6タグみたいな感じ。
見出し2まではアンダーラインが入るみたいですね。

記述例

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

表示例

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

文字の強調

イタリック

***(アスタリスク)もしくは_(アンダーバー)**1個で文字列を囲むことでイタリック(斜体)になります。

記述例

*hello*

表示例

hello

太字

***(アスタリスク)もしくは_(アンダーバー)**2個で文字列を囲むと太字になります。

記述例

**hello**

表示例

hello

打ち消し線

**~(チルダ)**2個で文字列を囲むことで文字列に打ち消し線が引かれます。

記述例

~~間違えた~~

表示例

間違えた

水平線

**_(アンダーバー)、*(アスタリスク)、ー(ハイフン)**などを3つ以上連続して記述することで水平線を表示します。
※連続するハイフンなどの間にはスペースがあってもOK

記述例

***
___
---
* * *

表示例





コードの表示

コードを表示したい時は、 ** (バッククオート)** 3つで括ると適用されます。 ファイル名を記述したい場合は最初の\``の後にプログラム言語名:ファイル名を記載する事で適用できます。
コードブロック上下に空行を挿入しないと正しく表示されないことがあります。

記述例

(空行)
```javascript:sample.js
console.log('Hello!')
```
(空行)

表示例

sample.js
console.log('Hello!')

インライン表示

また、コードをインライン表示することもできます。

記述例

コンソールに表示させるには`console.log('Hello!')`を用います。

表示例

コンソールに表示させるにはconsole.log('Hello!')を用います。

引用する

引用する時は**>**を用いることで適用されます。
**>****>**とすることで二重引用することも可能です。

記述例

>引用
>>二重引用
>まだ二重引用
(空行)
>二重引用

表示例

引用

二重引用
まだ二重引用

引用

リンクを貼る

WebページのURLをリンクにしたい時は、[表示文字](リンクURL)でリンクを記述できます。

記述例

[Google先生](https://www.google.co.jp/)

表示例

Google先生

Markdownの文書の途中に長いリンクを記述したくない場合や、同じリンクの参照を何度も利用する場合は、リンク先への参照を定義することができます。

記述例

[googleへ][google]
[googleへ飛ぶ][google]

[google]: https://www.google.co.jp/

表示例

googleへ
googleへ飛ぶ

普通にURLを添付すると以下のように四角で囲われたリンクが作成されます。

記述例

https://www.google.co.jp/

表示例

ページ内リンク

ページ内リンクを設定することも可能です。記述法は以下の通り。

記述例

[目次へ](#目次)

表示例

目次へ

写真を貼る

写真を表示させる時は画像のアドレスをコピペすれば埋め込むことができます。
エンジニアっぽいオシャレな写真を貼り付けてみました。

記述例

↓**!**忘れないでね
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2091770/00d97d7b-8ffd-b69d-a77c-c75ab1e02404.png)

表示例

image.png

pixabayより引用

リストを作る

箇条書きリスト

箇条書き(・)リストを作成するには**ー(ハイフン),+(プラス),*(アスタリスク)**のいずれか+半角スペースで適用可能です。

記述例

- おはよう

  • こんにちは
  • こんばんは

表示例

  • おはよう
  • こんにちは
  • こんばんは

番号付きリスト

番号付きのリストを作成したい場合は、数字+半角ドット+半角スペースでできます。
番号を全部1. にしても自動でナンバリングしてくれます。

記述例

1. リスト1
    1. リスト1-1
    1. リスト1-2
1. リスト2
1. リスト3

表示例

  1. リスト1
    1. リスト1-1
    2. リスト1-2
  2. リスト2
  3. リスト3

表を作る

表を作成するのは少し面倒ですが、以下の形で作成します。
**:(コロン)**の位置で右寄せ、左寄せ、中央寄せを決められます。

記述例

| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       | This        | This         |
| column     | column      | column       |
| will       | will        | will         |
| be         | be          | be           |
| left       | right       | center       |
| aligned    | aligned     | aligned      |

表示例

Left align Right align Center align
This This This
column column column
will will will
be be be
left right center
aligned aligned aligned

まとめ

これでようやくQiitaに記事が投稿できるようになりました!
早速勉強して投稿していきたいと思います!

参考

2
2
2

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
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?