見出し画像

Markdown(マークダウン)って何?HTMLと違うの?

こんにちは。IBiSEカスタマーサクセス担当の長谷川です。
IBiSEは、ポータルサイトに掲載する記事を作成する際にMarkdown(マークダウン)入力ができます。正確に言うと、Markdown(マークダウン)エディタが搭載されているので、文字の装飾などをボタンで簡単に設定できます。

ところで皆さん、Markdown(マークダウン)って何か説明できますか?

「マークダウンって、HTMLみたいなことができるんだよな…なんか聞いたことあるけど…あれ?聞いたことあるのはマークアップ?」
実は、私もこの程度の認識でした。申し訳ないです!
なので、改めてMarkdown(マークダウン)とは何か調べてみました。

Markdown(マークダウン)とは?マークアップやHTMLの違いは?

Markdown(マークダウン)を調べてみました。
インターネットで検索すると色々な方が分かりやすく解説してくれていますが要約すると、
ジョン・グルーバー(John Gruber)さんというアメリカのライターさんが2004年に作った「HTMLなどをもっと簡単に書けるようにしたマークアップ言語」だそうです。

マークアップ言語とは、<h1>や<br>などの”タグ”を用いて「文章を構造化する」コンピュータが処理できる言語です。
マークアップ言語には、いくつか種類があって、HTML、SGML、XHTML、XMLなどがあります。この中で一番有名なのがHTMLです。

さらに、情報を探すうちに「日本語Markdownユーザー会」さんというサイトを見つけました。
そこには、下記のように書いてありました。
・手軽に文章構造を明示できること
・簡単で、覚えやすいこと
・読み書きに特別なアプリを必要としないこと
・それでいて、対応アプリを使えば快適に読み書きできること
引用:http://www.markdown.jp/what-is-markdown/

つまり、
マークアップ言語の1つがMarkdown(マークダウン)であり、
HTMLとの違いは「HTMLに比べて簡単!」だということが分かりました。

Markdown(マークダウン)はそんなに簡単なのか!?HTMLと比較してみよう。

次に、Markdown(マークダウン)はそんなに簡単なのか、HTMLと比較してみたいと思います。
今回は、記事作成時によく使いそうな下記の表現を比較します。
①太字
②箇条書き
③改行
④画像中央寄せ
⑤テキストリンク

①太字
【マークダウン】
**文字をマークダウンで太くしてます**
【HTML】
<p><strong>文字をHTMLで太くしてます</strong></p>

②箇条書き
【マークダウン】
- マークダウン箇条書き1
- マークダウン箇条書き2
【HTML】
<ul>
<li>HTML箇条書き1</li>
<li>HTML箇条書き2</li>
</ul>

③改行
【マークダウン】
(分かりにくいですが、半角空白スペースを2つ付けて改行します)
改行
改行
【HTML】
改行<br>改行

④画像中央寄せ
【マークダウン】
![IBiSE](https://icons.iconarchive.com/icons/thesquid.ink/free-flat-sample/128/owl-icon.png)
【HTML】
<img src="https://icons.iconarchive.com/icons/thesquid.ink/free-flat-sample/128/owl-icon.png">

⑤テキストリンク
【マークダウン】
[IBiSE](https://ibise.com/)
【HTML】
<a href="https://ibise.com/">IBiSE</a>

いかがでしょうか?
もはや説明不要ですが、上述の通りMarkdown(マークダウン)はHTMLと比較するとシンプルな表現でした。
ただ「HTMLに慣れてるから!逆に面倒くさい」という方ご安心ください。
IBiSEの記事作成はHTMLでも記述可能です!

<参考にさせていただいたサイト>
・【マークダウン記法とは?】マークダウンの書き方を網羅的に解説
https://backlog.com/ja/blog/how-to-write-markdown/#:~:text=%E3%83%9E%E3%83%BC%E3%82%AF%E3%83%80%E3%82%A6%E3%83%B3%E8%A8%98%E6%B3%95%E3%81%AFHTML%E3%81%A8%E3%81%AF%E9%81%95%E3%81%84%E3%80%81%E7%B0%A1%E5%8D%98%E3%81%AB,%E5%BF%85%E8%A6%81%E3%81%AF%E3%81%AA%E3%81%84%E3%81%A7%E3%81%97%E3%82%87%E3%81%86%E3%80%82
・Markdownとは
http://www.markdown.jp/what-is-markdown/
・Qiita マークダウン記法 一覧表・チートシート
https://qiita.com/kamorits/items/6f342da395ad57468ae3



最後まで読んでいただき、ありがとうございました。Twitterでもシェアしていただけますと、とても嬉しいです!

やったー!また見てくださいね!
株式会社PRAZNAと申します。FAQページや問い合わせフォームを誰でも簡単に作成できるカスタマーサポートツール 「OKWAVE IBiSE」(オウケイウェイヴ アイヴィス) を提供しています。 https://ibise.com/