MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

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

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

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

マークダウンについて初めて聞いたという方もいるかも知れません。
マークダウン(マークダウン記法、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を取り上げた勉強会は非常に少ないので、自分で勉強会を立ち上げて興味がある人を集めてディスカッションする。ということをしたほうが早いかもしれません。

まとめ

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


関連コンテンツ

JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2018年12月28日
最終更新日: 2019年05月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2019年09月02日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2019年09月05日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
マークアップ
公開日: 2016年12月15日
最終更新日: 2019年05月28日
もう一度考えてみる、HTMLのマークアップとSEO対策についての考察
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
【CSS】CSSレイアウト組まとめ(前編)
マークアップ
公開日: 2018年09月08日
最終更新日: 2019年05月28日
【CSS】CSSレイアウト組まとめ(前編)
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2019年06月15日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
全記事一覧

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

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

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

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