マークアップとマークダウンの違いとは?

プログラミング

こんにちはtakosanです。

マークアップとかマークダウンって聞いたことありますか?あるという人でもその違いをよくわかっていない人は多いと思います。

せっかくなので今日はマークアップとマークダウンの違いについて解説しようと思います。

マークアップ記法とは?

マークアップ記法は、例えばHTMLのようなタグで囲んで記載していく記法のことです。

HTMLは(Hyper Text Markup Language)なのでもうマークアップって言ってますよね。

太字や箇条書きを表現するのに<h1>などのタグを使って記入をしていきます。

マークアップ記法はその特徴の裏返しで、

記述量が多くなる

というデメリットも合わせ持っています。

マークダウン記法とは?

一方のマークダウン記法とは、マークアップ記法をより簡単にするために、シンプルな記号や改行で文字の装飾を行えるようにしたものです。

具体的なマークダウン記法のやり方

基本的なマークダウン記法のパターンをいくつか紹介します。

見出し

下記のように#の数で大きさの異なる見出しを表現します。

# 見出し
## 見出し
### 見出し

改行

改行は行の最後(行末)に半角スペースを2個入力することで改行ができます。

abcd (半角スペース×2) efgh

強調

** 強調したい文章 **

強調する際は、下記のように*(アスタリスク)二つでテキストを囲むと強調できます。

斜体

斜体にするには、*(アスタリスク)を一つだけにしてテキストを囲みます。

* 斜めにしたい文章 *

箇条書き

箇条書きは、文章の手前にひとつだけ*(アスタリスク)をつけるとリストのように箇条書きにできます。

* 箇条書き1
* 箇条書き2
* 箇条書き3

ナンバリング

箇条書きに番号を振りたい(ナンバリングしたい)場合は、文字の手前に数字+ピリオドをつけてあげると自動的に番号が振られます。

1. abcd
1. efgh

水平線

水平線の表現には3種類ほどあり、

*(アスタリスク)か -(ハイフン)か _(アンダーバー)を3つ並べると水平線になります。

***
or
---
or
___

引用

引用文を表現する際は、>を手前につけると引用文になります。

> 引用した文章

リンク

リンクにする場合は、[リンクのテキスト](遷移先URL)と表記することで、表示上のテキストと実際に遷移する先のURLを指定し、リンクにすることができます。

[めっちゃいいサイト](https://web-den.com/)

マークダウンが使えるツール

実はこのマークダウン記法、意外と身近なもので使えるようになっています。

ひとつはWordPress。(テーマやverによって多少変わりますが)ブロックエディタ内で見出しや引用をマークダウン記法で入力してみてください。

きっとタグをいちいちマークアップしなくても見出しが出来上がるはずです。

また、日常的に使っているオススメノートアプリ系でも使用できるものは多いので一例を掲載しておきます。

Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team.
Boost Note | Develop as one, grow as one
Boost Note is a powerful, lightspeed collaborative workspace for developer teams.

まとめ

マークダウン記法はコーディングの知識がなくても簡単に文字の装飾ができ、効率的にメモやノートを作成できる優れた記法です。

この記事が違いが分かったら、周りの人にドヤってみましょう笑

では良いWebライフを!

タイトルとURLをコピーしました