MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ

一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ

公開日:2019年10月08日
最終更新日:2022年01月17日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > マークアップ > 一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

今回はマークダウンで効率良く文章を書く方法についてご紹介します。この方法をマスターすれば、記事の執筆に集中できるだけでなく、執筆の効率アップにもつながるかと思います。ぜひ初めてマークダウン記法を試してみてください。

マークダウン、マークダウン記法とは

マークダウンについて初めて聞いたという方もいるかも知れません。
マークダウン(マークダウン記法、Markdown)というものは、指定された規則に則って文章を書くことにより、見出しや下線、太字といった文章への装飾を簡単につけることができる書き方のことです。
もう少し詳しく言うと、マークダウンの書き方をした文章は、ルールに沿って自動的にHTMLに変換されます。
この章ではマークダウン記法の概要や考案者について学びます。

マークダウン記述例

例えば、見出し(h1)をHTMLとマークダウンで書いてみます。

<h1>こんにちはMarkDown!</h1> 

このHTMLをマークダウンで書くとこのようになります。

# こんにちはMarkdown!

HTMLでは開始タグ、終了タグで囲わねばならない箇所も、マークダウン記法だと先頭に#(シャープ)をつけるだけでOKです。非常にスッキリしますね。

 マークダウンのメリット、デメリット

マークダウンを使うと以下のようなメリットが有るかと思います。

  •  作業効率アップ
    • HTMLで記述する場合よりも早い  
    • 修正・編集もしやすい  
    • テキストエディタがあればいいので作業も早い
  •  集中力アップ  
    • HTMLで記述する場合に比べて"書く"ことにフォーカスできる

デメリットとしては、以下のように学習コスト、環境によるコストが挙げられます。

  • マークダウンのことを覚える必要がある
  • マークダウンを変換するソフト・環境によって記法が異なる場合がある

知っておいて損のない技術だと思うので、使えなくても「知っている」状態にはしておくと良いと思います。

誰が考えたの?

アメリカペンシルベニア在住のコラムニスト、ジョン・グルーバーさんによって開発されました。

https://en.wikipedia.org/wiki/John_Gruber

グルーバーさんのサイトを拝見するに、2004年12月17日にMarkdownの1.0.1が公開されていることが伺えます。

https://daringfireball.net/projects/markdown/

考案者の解説(公式サイト)を読もう

マークダウンを考案したグルーバーさんは上記のサイトの冒頭で以下のことを書いています。

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Markdownは、Webライター向けのテキストからHTMLへの変換ツールです。

Markdownを使用すると、読みやすく、書きやすいプレーンテキスト形式を使用して記述し、構造的に有効なXHTML(またはHTML)に変換できます。
※訳注: プレーンテキストとは、メモ帳やテキストエディタなどで開けるシンプルな文章のことを指します。

Thus, “Markdown” is two things: (1) a plain text formatting syntax; and (2) a software tool, written in Perl, that converts the plain text formatting to HTML. See the Syntax page for details pertaining to Markdown’s formatting syntax. You can try it out, right now, using the online Dingus.

意訳すると、マークダウンとは

  1. マークダウン記法で書いたテキストファイルのこと
  2. マークダウン記法で書かれたテキストファイルをHTMLに変換する仕組み

上記の2つから成り立っているとのこと。一般的には1の意味合いで使われることが多いですが、たしかにそれを変換する仕組みもマークダウンですね。こういった細かい点も知っておくと、よりマークダウンへの理解が深まると思います。
後々紹介しますが、マークダウン記法で書かれた文章でも2の変換する仕組みが異なると変換されない。なんてこともあります。

どうしたらマークダウンを使えるようになるか?

マークダウンのことはわかったけど、マークダウン・マークダウン記法を利用するためにはどうすればいいのか?この章ではマークダウンを使うためのソフトウェアやプラグインについて紹介します。

WordPressの場合

WordPress5.0以降で利用できるGutenbergエディタは元々MarkDown記法に対応しています。Gutenbergを使わずにクラシックエディターを使っている方はこの「JetPack」というプラグインを導入することによりマークダウンを利用できます。

https://wordpress.org/plugins/jetpack/

WordPressのコアコントリビューター企業であるAutomatic社が中心に活発が進められているプラグインで、非常に多くのコントリビューター(貢献者)によってメンテナンスされているので、今後のWordPressのバージョンアップにも耐用できるプラグインだと思います。ただ、高機能なのでサイトが重くなる懸念もあります。

「WordPress マークダウン」で検索するとよく「JP MarkDown」といったプラグインが検索結果に出てきますが、最終更新日が3年前と古く、メンテナンスもされていないため、利用は控えたほうが良いと思います。

Visual Studio Code(VSCode)

私はいつも「Markdown All in One」というVisual Studio Codeの拡張機能(エクステンション)を利用しています。(蛇足ですが、この記事もVisual Studio Codeで執筆しております。)

Markdown All in One

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

2019年10月8日現在 869,893 インストールされている拡張機能で、マークダウン記法を実際にHTMLに変換した様子なども簡単に確認できます。

また、「markdownlint」という拡張機能を入れておくと、MarkDown記法の誤りを指摘してくれます。

markdownlint

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

もっとマークダウンを知り親しむために

公式サイトを読もう

一次情報にアクセスすれば、歴史や理念、シンタックスについても学べます。小手先でなく、根本の部分が学べるのでざっとでも目を通しておくと良いです!英語ですが、Chromeの自動翻訳を駆使して読み解きましょう。

Daring Fireball Markdown

https://daringfireball.net/projects/markdown/

マークダウン記法一覧

マークダウン記法の一覧は以下になります。ゆくゆくこのページでもまとめて行きますね!

https://daringfireball.net/projects/markdown/syntax

UG(ユーザーグループ)の人と親しくなろう

日本語Markdownユーザー会が発足しているようですが、現在は活動休止しているようです。

日本語Markdownユーザー会

https://www.markdown.jp

ユーザーグループというのは特定のソフトウェア等のユーザが、そのソフトのことが好きすぎて、あるいは必要にかられて形成されたユーザーの集まりです。

マークダウンもっと掘り下げたい。という方はGoogleグループに参加してみると、更に深いマークダウンの世界が広がるかと思います。

勉強会を探してみよう

connpassなどで近くの勉強会を探してみましょう。

https://connpass.com/search/?q=markdown

ただ、正直MarkDownを取り上げた勉強会は非常に少ないので、自分で勉強会を立ち上げて興味がある人を集めてディスカッションする。ということをしたほうが早いかもしれません。

まとめ

マークダウンを学び、親しむと、「書く」ということに集中できます。書くことに集中すると「人に伝える文章」に集中できます。その結果、「人に伝わる文章」を書くことができる。そんなふうに思います。
ぜひぜひ学んでみてくださいね!



【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
テクノロジー
マークアップ
公開日: 2017年01月10日
最終更新日: 2022年01月17日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
[JavaScript_中級者への道] JavaScript開発環境について – npm について
マークアップ
公開日: 2020年03月19日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] JavaScript開発環境について – npm について
  • # Bower
  • # Grunt
  • # node.js
  • # npm
  • # タスクランナー
  • # 歴史
  • # 開発環境
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
Webデザイン
マークアップ
公開日: 2018年02月09日
最終更新日: 2018年02月09日
【コーディング】実装に悩んだ時に使える便利なCSSテクニック
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2022年01月17日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2017年12月28日
最終更新日: 2017年12月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コーダーはCSS設計に夢を見る
テクノロジー
マークアップ
公開日: 2017年02月10日
最終更新日: 2022年01月17日
コーダーはCSS設計に夢を見る
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【CSS】CSSレイアウト組まとめ(中編)
テクノロジー
マークアップ
公開日: 2017年10月06日
最終更新日: 2017年10月06日
【CSS】CSSレイアウト組まとめ(中編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法
マークアップ
公開日: 2017年07月29日
最終更新日: 2017年07月29日
Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
Webデザイン
マークアップ
公開日: 2018年03月02日
最終更新日: 2018年03月02日
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。