2018-02-22
HTMLより簡潔に簡単に書ける！マークダウンの解説とコード例
はてぶやWordPressなどの無料のブログを利用していると 文章を強調したり、テーブルで内容を表示したい要望が発生すると思います。その際に文章に簡単な記法を追加すればhtmlに変換してくれるマークダウン（Markdown）の記法を紹介します
マークダウンとは
手軽に文章からマークアップ言語（html）を生成することができる記法になります。
見出しを生成
見出し(hタグ)を生成する場合は#(シャープ)を追記します。
マークダウン言語 # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4
生成されるhtml <h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3> <h4>見出し4</h4>
文章を強調する
**か__で囲った部分が太字として強調されます
マークダウン言語 **強調されます** もしくは __これも__
生成されるhtml <strong>強調されます</strong>もしくは <strong>これも</strong>
リンクを設定する
[リンクのテキスト](リンクのアドレス) で設定することができます。
マークダウン言語 [ゼロイチのリンク](https://programming-beginner-zeroichi.jp/ )
生成されるhtml <a href="https://programming-beginner-zeroichi.jp/ ">ゼロイチのリンク</a>
画像を表示する
基本は となります
マークダウン言語 
生成されるhtml <img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/2_Flat_logo_on_transparent_256.png" alt="ゼロイチ" title="ゼロイチ画像">
引用する
文頭に>を文章につける
マークダウン言語 >引用する１ >引用する２ >引用する３
生成されるhtml <blockquote> <p>引用する１</p> </blockquote> <blockquote> <p>引用する２</p> </blockquote> <blockquote> <p>引用する３</p> </blockquote>
水平線
アスタリスク、ハイフン、アンダーバーを3つ以上並べると水平線を表示します。
マークダウン言語 * * * *** ***** - - -
生成されるhtml <hr> <hr> <hr> <hr> - - - ### 表組み（テーブル表記） 各ブログツールによって違いますが、はてぶのテーブル表記は下記になります。 ```html |指定無し|左寄せになります|中央寄せになります|右寄せになります| |--------|:-----|:------:|-----:| |コンテンツ１ |コンテンツ２ |コンテンツ３ |コンテンツ４ |
<table> <thead> <tr> <th>指定無し</th> <th align="left">左寄せになります</th> <th align="center">中央寄せになります</th> <th align="right">右寄せになります</th> </tr> </thead> <tbody> <tr> <td>コンテンツ１ </td> <td align="left">コンテンツ２</td> <td align="center">コンテンツ３</td> <td align="right">コンテンツ４ </td> </tr> </tbody> </table>
前の記事
次の記事
