WebDesigner's Memorandumウェブデザイナーの備忘録

思考したり情報整理したい時はMarkdown記法で文章を書き出そう!!Webデザイナーの情報整理術

Markdown

何か企画の情報をまとめたり、アイデアを出して行くときに僕はMarkdown記法という記述方法で情報の整理を行う場合がよくあります

情報整理を行う際にメモ帳等で手書きという場合もありますが、箇条書きでどんどん情報の深掘りをしていく際はPCの方が自分には合っているからです。
そんな時にただただプレーンなテキストで文字を入力するのではなく、Markdown記法と言って文字列をHTMLに変換するための記述方法を利用する事で、見出しやリストを素早く表現して文章をまとめる事で、より綺麗に情報整理ができます。

もちろん自分の中で目印をきちんと決めていたり、明確なルール付けができているのであればプレーンテキストでもある程度見やすく整理できるのかもしれませんが、せっかくMarkdown記法という記法がありますし、HTMLに変換してプレビューしてくれるアプリもあるので最近は文章を書くときは特別な理由が無い場合はMarkdownで書いています。

今回はそんなMarkdown記法って何なの？という所から実際の書き方までまとめていきます。

Markdownという便利な記法

HTMLはもともと論文などのドキュメントを綺麗に構造化するために生まれた言語です。しかし、HTMLはどこからどこまでが同じ構造なのか判別するために、その文章の最初と最後にそれぞれ「タグ」と呼ばれるものを設置する必要があります。

これって地味に面倒ですよね。例えばリストを利用したい場合は、まず<ul>タグで囲んで…それぞれリストの最初と最後に<li>タグを記述して…とてもじゃないですが、文章を考えて書き出す事に集中できませんよね。
HTMLは構造的に文章を整理するのに適した言語ですが、このようにタグという存在があるためなかなか素早く手軽に文章を書くことができません。

そこで生まれたのがMarkdown記法です。タグの変わりに簡単な目印とスペースや改行などを使ってそれぞれのタグを表現する事ができるので、この記法でどんどん文章を書いて最終的にHTMLに変換するという事が可能です。例えば#見出しと書くと<h1>見出し</h1>と見出しに変換されます。

また、リアルタイムでMarkdown記法をHTMLに変換してプレビュー表示してくれるアプリやWebサービスもたくさんあります。

Markdown記法の基本

Markdownの基本的な書き方ですが、その前にMarkdownを記述してそのままプレビューしてくれるアプリがあるのでそれを使って書くようにしてみましょう。

MacならMacDownという専用アプリがあります。

macdown.uranusjr.com
MacDown: The open source Markdown editor for macOS
https://macdown.uranusjr.com
MacDown is an open source Markdown editor for macOS, released under the MIT License.

WindowsならMarkDown#Editorというソフトがあるのでこちらを使いましょう。

hibara.org
MarkDown#Editor | HiBARA Software
http://hibara.org/software/markdownsharpeditor/
MarkDown#Editor - Markdown記法に対応した日本語テキストエディター

見出し

見出しタグについては#の後にテキストを入力する事で表現する事ができます。#が1つなら<h1>、#が2つなら<h2>と、最大の見出し6まで表現する事が可能です。

#見出し1
##見出し2
###見出し3
####見出し4
#####見出し5
######見出し6

見出し

また、#を使う以外にも、見出しにしたい文章の次の行でイコール（ = ）を3つ続けて打つと見出し1、ハイフン（  – ）を3つ続けて打つと見出し2にもなります。この方法の場合は見出し3以降はありません。

見出し1
===
見出し2
---

見出し

見出しが付くだけで文章って物凄く見やすく、読みやすくなるんですよね。

改行

これは慣れるまで少し不便なのですが、Markdownでは普通にEnterを押しても改行にはならない場合が多いです。改行したい時は2回スペースキーで半角スペースを空けてからEnterを押すことで改行ができます。

アプリやサービスによって少し挙動が変わる事もありますが、もしうまく改行できなかった場合は2回スペースを試してみてください。

リスト

ハイフン（ – ）・プラス（ + ）・アスタリスク（ * ）のいずれかを入力した後に半角スペースを打って文字列を入力する事で箇条書きリストを表現する事が可能です。

タブで階層化する事も可能ですし、Markdown対応のアプリを使っていると、一度リストの表記を入力してしまえば2行目以降は勝手に印を付けてくれるので非常に楽です。

- リスト
    - リスト
    - リスト
- リスト
- リスト

リスト

また、「1.」と入力した後に半角スペースを打って文字列を入力する事で番号付きリストを表現できます。

1. リスト
    1. リスト
    1. リスト
1. リスト
1. リスト

番号付きリスト

記号を入力した後に半角スペースが必要なので忘れないように注意しましょう。

リンク

リンクも簡単に表現する事ができます。方法は角括弧で表示したい文字列を囲んで、その次に丸括弧でURLを囲むだけです。言葉で説明するとややこしいですが、実際に見てみると分かりやすいと思います。

[表示文字](URL)
[このブログ](https://webrandum.net/)

リンク

 たまに角括弧と丸括弧を間違えてしまうのですが「角括弧と文字列が最初！」ときちんと意識して覚えておくようにしましょう。

コード

僕が地味によく使うのがコードブロックです。バッククォートを1文字で文字列を囲む事でコードの表示が可能です。

また、バッククォート3文字で文字列を囲むとコードブロックを表現する事が可能です。等幅フォントになるので、ちょっとしたコードのメモにも役立ちますし、Web関係者向けのQ&Aサイト等で質問したい時にコードを貼り付ける時には普通にコードを貼るよりもコードブロックの中に貼り付けた方が見やすくなるのでオススメです。

見出しタグは`<h1>見出し</h1>`です。
```
<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <title>MarkDownTest</title>
</head>
<body>
</body>
</html>
```

コード

引用

大なり記号の後に文字列を入力する事によって引用文の表現する事が可能です。

>引用文
>引用文
>引用文

引用文

強調

文章の一部を強調させたい時はアンダースコア( _ )、もしくはアスタリスク( * )2個で文字列を囲むと<strong>タグでマークアップした事になります。

文章を__強調__させたい時はアンダースコア2個で囲むか、
アスタリスク2個で囲むと**強調**できます。

強調

区切り線

ハイフン・アンダースコアー・アスタリスクのいずれかを3つ以上連続で記述すると水平線になります。
文章の区切りに書いておくと見やすくなります。

---
___
***

区切り線

Markdownは記法が少し変わる場合がある

先程紹介したMacDownやMarkDown#Editor以外にも多くのMarkdownアプリがありますし、Markdownが利用できるWebサービスも数多くあります。しかしMarkdownは方言のように、開発者によって記法が少し変わる場合があります。

そのため、それぞれのアプリやサービスによって今回紹介した記述方法ではうまくいかない場合もあります。その場合はヘルプ等から確認してどのような記述をすればいいのか確認するようにしましょう。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね
文章量
ソート
Twitterをフォロー Facebookでいいね

記事一覧

関連記事 人気記事 ランダム

目次

表示設定

ダークモード

この機能はCookieを使用して、設定した内容を保存しています。個人を特定したりするものではありませんが、気になる方はプライバシーポリシーをご覧ください。