0%

Programmingプログラミングナレッジ

Posted:2018.10.13

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

マークダウン記法というものはご存知でしょうか。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書き方メモ

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】