mosya

素早いライティングを可能にするマークダウン記法の書き方を解説

マークダウン記法はすばやく文章を書くことができる記法です。
通常のHTMLで見出しやリンクをマークアップするのと比較して、非常にシンプルで手軽に文章を書くことができます。

この記事ではマークダウン記法の書き方を解説します。

見出し

#を文字の前に入力すると見出しを作ることができます。
見出しには大きい1から最も小さい6までがあり、#を何個つけるかで見出しの大きさを変えることができます。

# 見出し1
## 見出し2
### 見出し3

リンク

角かっこにリンクのテキストを、丸かっこにリンク先のURLを入力することでリンクを作成できます。

[リンクのテキスト](リンク先URL)

なお、リンクURLをそのまま入力しても自動でリンクとして表示されるようになります。

https://mosya.dev/

リスト

リストには2種類のスタイルがあります。必要な場所により使い分けましょう。

箇条書きリスト

文字の前に-ハイフンを入れることで順序のないリスト(通常のリスト)を作ることができます。

ハイフンと文字の間に半角スペースを忘れないようにしましょう。

- リストの項目
- リストの項目
- リストの項目

番号付きリスト

文字の前に1.のように番号とドットを入れることで順序のあるリストを作ることができます。

こちらも同様、ハイフンと文字の間に半角スペースを忘れないようにしましょう。

1. 番号付きの項目
2. 番号付きの項目
3. 番号付きの項目

コード

コードをマークダウンで記述する場合はバッククォート3つ(```)でコードを囲います。

バッククォートの出し方
  • 日本語キーボードの場合、shiftキーを押しながら@キーを押します。
  • USキーボードの場合、Alt(Option)キーを押しながら~(チルダ)キーを押します。

またバッククォートのあとに言語名を入力すればシンタックスハイライトをすることができます。
この例ではCSSをハイライトしています。

```css
p {
    color: #333;
}
```

画像を表示

まず!を書き、角かっこの中に代替テキスト(alt)を、丸かっこの中に画像のURLを入力すれば画像を表示することができます。

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

引用

文章を引用するには、テキストの前に大なり記号>を入力します。

> 引用する文章

文字を装飾する記法

太字

文字を強調したい場合はアスタリスク2個(**)で文字を囲います。

**強調したい文字**

斜体のテキスト

文字を斜めにする場合はアスタリスク1個(*)で文字を囲います。

*斜めにしたい文字*

打ち消し線

文章に打ち消し線を付けたい場合はチルダ2個(~~)で文字を囲います。

~~打ち消し線たい文章~~

まとめ

マークダウン記法はたくさんあって覚えられないと思われる方もいらっしゃるかもしれませんが、HTMLでマークアップするより覚えることが少なく、手軽に文章を書くことができます。

ぜひマークダウン記法に慣れて快適なライティングをしてみてください。

Authored by

筆者の写真

Godai@steelydylan

Webサービスを作るのが好きなWebエンジニア。子供が産まれたことをきっかけに独立し法人化。サービス開発が大好き。
好きな言語はTypeScript。

ReactやTypeScriptなどの周辺技術が学べる
オンライン学習サービスを作りました!

詳しくはこちら
mosya

mosyaはオンラインでHTML,CSS,JavaScriptを基本から学習できるサービスです。現役エンジニアが作成した豊富なカリキュラムに沿って学習を進めましょう。

© 2023 - mosya. All rights reserved.