owned mediaウェブ制作に役立つコンテンツを発信中!

覚えておきたいマークダウン記法での書き方まとめ

最終更新日: Update!!
マークダウン記法というものはご存知でしょうか。HTMLなどのマークアップ言語は耳にしたことはある方も多いかと思いますが、このマークダウン記法ですが使いこなすと実はとても便利なのです。今回は初めての方でも使えるようにマークダウン記法についてまとめていきたいと思います。  
HTMLを素早く簡単に書けるマークダウン記法
もともとマークダウン記法は、プレーンテキストで書かれた文書をXHTMLやHTMLに変換するするためのフォーマットとして作成されました。つまり、マークダウンを使うことでプレーンテキストのようにわかりやすい記述でもHTMLを作成することができます。   また、拡張子を「.md」に設定するとマークダウン形式ファイルとして扱うことができます。マークダウンファイルとして編集や保存をするときはこの形式にしておきます。   通常、HTMLを記述するにはHTMLタグを記述する必要がありますが、マークダウンに対応しているエディタを使うことで、マークダウンで記述してHTMLを作成することができます。そのため、HTMLの文書をより素早く記述することができます。   ただし、すべてのHTMLタグがマークダウンに対応しているわけではありませんので注意が必要です。以下にマークダウンでよく使う記法をまとめていきます。  
覚えておきたいマークダウンでの書き方
マークダウンではいろんなHTMLタグを表現することができます。いろいろとありますが使用頻度の高いものは押さえておきたいですね。   【見出し】
<!-- Markdown -->
# h1テキスト
## h2テキスト
### h3テキスト
#### h4テキスト
##### h5テキスト
###### h6テキスト

<!-- HTML -->
<h1>h1テキスト</h1>
<h2>h2テキスト</h2>
<h3>h3テキスト</h3>
<h4>h4テキスト</h4>
<h5>h5テキスト</h5>
<h6>h6テキスト</h6>
  【文字装飾】
<!-- Markdown -->
**太文字**
_斜体文字_
~~打ち消し線~~

<!-- HTML -->
<strong>太文字</strong>
<em>斜体文字</em>
<s>打ち消し線</s>
  【リスト】
<!-- Markdown -->
+ 順不同リスト 1
+ 順不同リスト 2
  + 入れ子の順不同リスト 2-1
+ 順不同リスト 3
1. 序列リスト 1
2. 序列リスト 2
  3. 入れ子の順不同リスト 2-1
4. 序列リスト 3

<!-- HTML -->
<ul>
  <li>順不同リスト 1</li>
  <li>順不同リスト 2
    <ul>
      <li>入れ子の順不同リスト 2-1</li>
    </ul>
  </li>
  <li>順不同リスト 3</li>
</ul>
<ol>
  <li>序列リスト 1</li>
  <li>序列リスト 2
    <ul>
      <li>入れ子の序列リスト 2-1</li>
    </ul>
  </li>
  <li>序列リスト 3</li>
</ol>
  【区切り水平線】
<!-- Markdown -->
---

<!-- HTML -->
<hr>
  【引用】
<!-- Markdown -->
>引用テキスト
>>入れ子の引用テキスト

<!-- HTML -->
<blockquote>引用テキスト
  <blockquote>入れ子の引用テキスト
  </blockquote>
</blockquote>
  【整形テキスト・コード表記】
<!-- Markdown -->
`インラインでのコード記述`
```html
言語のシンタックスハイライトがついた整形テキスト・コード記述
```

<!-- HTML -->
<code>インラインでのコード記述</code>
<pre>
  <code class="language-html">言語のシンタックスハイライトがついた整形テキスト・コード記述
  </code>
</pre>
  【テーブル】
<!-- Markdown -->
| テーブルヘッダ | テーブルヘッダ | テーブルヘッダ |
| :-------------------- | :-------------------: | --------------------: | 
| 左寄せテキスト | 中央揃えテキスト | 右寄せテキスト |

<!-- HTML -->
<table>
  <thead>
    <tr>
      <th style="text-align:left">テーブルヘッダ</th>
      <th style="text-align:center">テーブルヘッダ</th>
      <th style="text-align:right">テーブルヘッダ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">左寄せテキスト</td>
      <td style="text-align:center">中央揃えテキスト</td>
      <td style="text-align:right">右寄せテキスト</td>
    </tr>
  </tbody>
</table>
  他にも、改行でHTMLでもbrタグが挿入されたり、「\」(バックスラッシュ)で囲うことで、マークダウン記法で使う記号がエスケープされ、そのまま表示させることができます。もちろんこれ以外にも色々と書き方はあるので、詳しく知りたい方は調べてみてください。  
MarkdownからHTMLへの変換をする
Markdownで書かれた文書は、基本的にHTMLとして変換された状態で使われるのが前提です。ですので、MarkdownからHTMLに変換する必要があるのですが、専用のアプリケーションを用意しなくても、無料でブラウザから使うことができるツールもリリースされています。 【Online Markdown Editor - Dillinger】 https://dillinger.io/   上記で紹介しているサイトでは、画面上のエディタにMarkdown記法で書くだけでリアルタイムでHTMLに変換されたものが確認できます。変換されたHTMLはそのままコピペで利用可能ですので、素早く簡単に変換させることができます。  
  いかがでしょうか、コンテンツ記事やドキュメントの作成時には、マークダウン記法を用いることでかなり快適に文書を作成することができます。まずはマークダウン記法を覚えるところからですが、慣れるとスピードアップできますので、ぜひ覚えておきたいですね。   (参考にさせて頂いたサイト) Markdown書き方メモ
  • はてなブックマーク
  • Pocket
  • Linkedin
  • Feedly

この記事を書いた人

Twitter

sponserd

    keyword search

    recent posts

    • Twitter
    • Github
    contact usscroll to top
      • Facebook
      • Twitter
      • Github
      • Instagram