2018-02-22
2019-03-01
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="ゼロイチ画像">
引用する
文頭に>を文章につける
マークダウン言語 >引用する1 >引用する2 >引用する3
生成されるhtml <blockquote> <p>引用する1</p> </blockquote> <blockquote> <p>引用する2</p> </blockquote> <blockquote> <p>引用する3</p> </blockquote>
水平線
アスタリスク、ハイフン、アンダーバーを3つ以上並べると水平線を表示します。
マークダウン言語 * * * *** ***** - - -
生成されるhtml <hr> <hr> <hr> <hr> - - - ### 表組み(テーブル表記) 各ブログツールによって違いますが、はてぶのテーブル表記は下記になります。 ```html |指定無し|左寄せになります|中央寄せになります|右寄せになります| |--------|:-----|:------:|-----:| |コンテンツ1 |コンテンツ2 |コンテンツ3 |コンテンツ4 |
<table> <thead> <tr> <th>指定無し</th> <th align="left">左寄せになります</th> <th align="center">中央寄せになります</th> <th align="right">右寄せになります</th> </tr> </thead> <tbody> <tr> <td>コンテンツ1 </td> <td align="left">コンテンツ2</td> <td align="center">コンテンツ3</td> <td align="right">コンテンツ4 </td> </tr> </tbody> </table>
その他関連記事
Ruby on RailsでSassを活用し、CSS作成を高速・効率化する
Vue.jsでマークダウンに対応したメモ帳アプリを作成する|コピペで動くサンプルコード付き
Vue.jsでSVGのアイコンを操作する|コピペで動くサンプル付き
サイトの色やカラーコードをコピーする|ColorZillaをインストール
あなたにお勧めの記事
前の記事
次の記事