コードが書けなくてもコードが書ける?Markdown記法のご紹介

コードが書けなくてもコードが書ける?Markdown記法のご紹介

こんにちは。ブログ管理人の井上です。今回は素早くデジタル文書が書くための記法「Markdown」をご紹介いたします。HTMLコードを書くのが苦手な方もかんたんにデジタル文書のライティングが可能になります。

Markdown記法とは

Markdownとはデジタル文書での文章の書き方です。HTMLコードを書くよりも手軽で覚えやすく、サクサク記入できます。Evernoteやはてなブログ、Qiita、Squarespaceなど様々なサービスで利用可能で今後ますます増えていくでしょう。また、MarkdownをHTMLへ変換する便利なWebサービスもご紹介します。

MarkdownとHTMLの違い

例えば文章のタイトルの書き方は HTMLの場合はこのような書き方になります。

<h1>タイトル</h1>

それがMarkdownの場合は以下の書き方になります。

# タイトル

いかがでしょうか。はじめに「#」を記入するだけで、タイトルであることを表現できます。 もうひとつ別の例をあげます。リストの書き方の違いです。HTMLで記入するとこのようになります。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

HTMLで書くと少しコードが複雑になります。それをMarkdownで書くとこのようになります。

- リスト1
- リスト2
- リスト3

いかがでしょうか。HTMLコードを書くよりもかんたんに表現できることがお分かりでしょうか。 HTMLコードよりもさらにシンプルで覚えやすく便利な記法ですので、ぜひご活用ください。

では早速Markdownの便利な記法を厳選してご紹介します。

タイトル(見出し)の書き方

テキストの先頭に「#」を挿入します。 また「#」の数で見出しの順位(大きさ)を設定します。「#」の数が少ない方がより重要な大きな見出しとなります。

# 見出し h1
## 見出し h2
### 見出し h3

↓↓↓

見出し h1

見出し h2

見出し h3

リンクの書き方

URLを記述することで、そのままリンクになります。

https://ncblog.jp/

↓↓↓

https://ncblog.jp/

また、URLと表示するテキストを変えたいときはこのように[]にテキスト、()にURLを記入します。

[NCBLOG](https://ncblog.jp/)

↓↓↓

NCBLOG

画像の書き方

URL挿入と似ていますが、はじめに「!」を付けるのがポイントです。次に[](空欄でもOK)最後に()内に画像リンク先のURLを挿入します。

![NCBLOG](https://ncblog/logo_pict.png)

↓↓↓

NCBLOG

リストの書き方

記号は「-」「*」「+」どれでもOKです。リスト前にスペースを入れてずらすことでリストを親子構造にすることも可能です。

- リスト1
    - リスト1-1
    - リスト1-2
* リスト2
    * リスト2-1
        * リスト2-1-1

+ リスト3

↓↓↓

  • リスト1
    • リスト1-1
    • リスト1-2
  • リスト2
  • リスト2-1
    • リスト2-1-1
  • リスト3

強調表現の書き方

テキストに装飾できます。「斜体」「太字」「斜体で太字」の3つのパターンがあります。

斜体

*斜体*

↓↓↓

斜体

太字

**太字**

↓↓↓

太字

斜体で太字

***斜体で太字***

↓↓↓

斜体で太字

打ち消し

~~打ち消し~~

↓↓↓

打ち消し

引用の書き方

他のサイト記事から引用文を挿入するときは文章の先頭に「>」を挿入します。

>引用文を挿入したいときは先頭に「>」を挿入します。

↓↓↓

引用文を挿入したいときは先頭に「>」を挿入します。

水平線の書き方

いろいろな書き方がありますが、「-」を3つ以上で水平線が挿入されます。

------------
- - -
_________
_ _ _ _ _ _

------

↓↓↓





表組み(テーブル)の書き方

最後はちょっとややこしいですが表組みのご紹介です。 1行目は「ヘッダー行」つまりタイトル部分です。2行目は「アラインメント行」といってテーブルのテキストを揃えるための行です。3行目以降が「データ行」として好きなだけ追加可能です。それぞれ「|」で仕切ることで、テーブルであることを表現しています。

|ヘッダ|ヘッダ|ヘッダ|
|:-:|:--|--:|
|中央揃え|左揃え|右揃え|
|WEBデザイン|コーディング|スクリプト|
ヘッダ ヘッダ ヘッダ
中央揃え 左揃え 右揃え
WEBデザイン コーディング スクリプト

MarkdownからHTMLへ変換したいとき

MarkdownからHTMLへ変換できるサービスをご紹介いたします。このサービスを利用すれば、Markdownに対応していないサービスなどでも安心してライティングができます。

「MD2PDF」 http://md2pdf.higty.xyz/md2html

こちらにMarkdownのテキストをコピペして、「<>」ボタンをクリックすると、あっという間にHTMLコードへ変換できます。かんたんですのでぜひお試しください。

まとめ

書き方を覚えてしまえば、手軽にデジタル文章を書くことができる便利な記法です。ぜひ覚えておくことをおすすめします。

無料デザインツールCanvaとは?3分で自分好みのおしゃれなバナーが作成できる

無料デザインツールCanvaとは?3分で自分好みのおしゃれなバナーが作成できる

Squarespaceのかんたん会員登録の手順

Squarespaceのかんたん会員登録の手順