株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

markdown(マークダウン)記法の例

markdown(マークダウン)記法の例

HISAHISA
この記事は、2019年12月14日に編集し、約 4 分で読めます。

マークダウン記法とは?

Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。 Wikipediaから転載

簡単に言うと、マークダウン記法のルールで書くと、自動的にHTMLに変換されるということです。

マークダウン記法を使うようになると、デザインやスタイルを意識しなくてよくなるのでブログを書くスピードが格段に上がります。

段落(p)

改行と半角スペースを入れると段落(pタグ)になります。

今日はいい天気ですね。
 ←半角スペース
そうですね。

上記のマークダウン記法だと、実際のHTMLでは

<p>今日はいい天気ですね。</p>
<p>そうですね。<p>

となります。

なお、半角スペースを2連続で入れると段落中で改行(brタグ)となりますが、文章をデザイン目的で改行する場合はCSSを使うので、あまり使用することはないと思います。

見出し(h1〜h6)

シャープ(#)と半角スペースをテキストの先頭に入れると見出し(hタグ)になります。

# 見出し H1
## 見出し H2
### 見出し H3
#### 見出し H4
##### 見出し H5
###### 見出し H6

ブログで設定されている見出しデザインで表示されます。

実際には、h1 はブログタイトルに使用されているので、h2からの使用となると思います。

強調(em)と重要(strong)

アスタリスク()1個でテキストを囲むと強調(emタグ)、2個で重要(strongタグ)になります。*

*テキストを強調する(em)*
**テキストを太字にする(strong)**

どちらも太字になるデザインが多いですがタグの意味が違います。

strong は多様せずに本当に重要な箇所だけにして、強調は em にしておきましょう。

箇条書きリスト(ul)

アスタリスク()と半角スペースをテキストの先頭に入れると箇条書きリスト(ulタグ)になります。*

* リスト
* リスト
* リスト

数字の箇条書きリスト(ol)

数字とドット(.)と半角スペースをテキストの先頭に入れると数字の箇条書き(olタグ)になります。

1. リスト
1. リスト
1. リスト

この場合、数字は全て同じものを入力しても連番となります。

引用(blockquote)

大なり(>)と半角スペースをテキストの先頭に入れると引用(blockquoteタグ)になります。

> 引用文

リンク(a)

[テキスト](URL)の型にすると、リンク(a)タグになります。

[Google](https://www.google.com/)

なお、リンクを別タブで開くには以下を参照してください。
markdown(マークダウン)記法で外部リンクにする方法

複数のリンク(a)をまとめて記述する

上記リンクを複数設定する場合の応用方法です。

[Google][1]と[Yahoo!JAPAN][2]と[Bing][3]

[1]: http://www.google.co.jp/ "グーグル"
[2]: http://www.yahoo.co.jp/ "ヤフー"
[3]: http://www.bing.com/ "Bing"

GoogleYahoo!JAPANBing

略語(abbr)

*[略語]: 正式名称の型で、略語(abbrタグ)を利用する場合に正式名称を表示できます。

*[HTML]: HyperText Markup Language

この記事でもHTMLに正式名称が設定されています。

水平罫線(hr)

ハイフン(-)を3連続で記述すると水平の罫線になります。

---

コード(pre)

バッククオート(`)3連続と改行で囲んでコード(preタグ)になります。

```
ここにコード
```
※上記のバッククオートは表示上の関係で大文字となっています。半角でご使用ください。

実際には以下のような形になります。(デザインは環境によって違います)

<header class="post-header">
 <ul class="post-meta list-inline">
  <li class="date updated" itemprop="datePublished" datetime="<?php the_time('c');?>"><i class="fa fa-clock-o"></i> <?php the_time('Y.m.d');?></li>
 </ul>
 <h2 class="post-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php esc_html(the_title()); ?></a></h2>
</header>
この記事を書いた人
HISA

ホームページ作成をメモ帳時代からやってます。ゲーム大好き!「格闘ゲーム」や「デジタルカードゲーム」を好みます。大会にもチラホラ参加しています。

HISAをフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る