Skip to content

Latest commit

 

History

History
196 lines (126 loc) · 5.64 KB

practice06.md

File metadata and controls

196 lines (126 loc) · 5.64 KB
Raw

実践06. 圧倒的な作業の効率化！マークダウン記法

マークダウン記法とは

マークダウン記法とは、HTMLタグのうち頻繁に使われるタグを簡略化された符丁で表現することで素早くHTMLを書く記述法です。

MDwikiでは、マークダウン記法で書かれたウェブコンテンツをMDwikiがHTMLに変換した上で、ウェブに掲載します。

段落＜p＞

テキストエディタ上での書き方例

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

祇辻飴葛蛸鯖鰯噌庖箸

1234567890

HTMLへの変換後

<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</p>
<p>祇辻飴葛蛸鯖鰯噌庖箸</p>
<p>1234567890`</p>

解説

  • マークダウン符号の付いていない文字列は段落として扱われます。
  • 改行を２回繰り返すことで段落の区切りとします。

見出し＜h1＞〜＜h6＞

テキストエディタ上での書き方例

# 見出し1

## 見出し2

### 見出し3

#### 見出し4

##### 見出し5

###### 見出し6

HTMLへの変換後

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

解説

  • ＃記号と見出し文字列との間に入れる半角スペースを忘れないでください

太文字＜strong＞

テキストエディタ上での書き方例

これは**太文字**です。

HTMLへの変換後

<p>これは<strong>太文字</strong>です。</p>

解説

  • HTML4におけるstrongとemの定義は「strong＝より強い強調」「em＝強調」です。

斜体文字＜em＞

テキストエディタ上での書き方例

これは*斜体文字*です。

HTMLへの変換後

<p>これは<em>斜体文字</em>です。</p>

解説

  • HTML4におけるstrongとemの定義は「strong＝より強い強調」「em＝強調」です。

リンク

テキストエディタ上での書き方例

[→トップページに戻る](http://example.com/)

HTMLへの変換後

<a href="http://example.com/">→トップページに戻る</a>

解説

  • リンク先URLを新しいウインドウで開くよう設定することはできません。

参照リンク

テキストエディタ上での書き方例

[→ホーム][home]、[→ホーム][home]、[→ホーム][home]

[home]: http://example.com/ "ホームに戻る"

HTMLへの変換後

<a href="http://example.com/" title="ホームに戻る">→ホーム</a>、<a href="http://example.com/" title="ホームに戻る">→ホーム</a>、<a href="http://example.com/" title="ホームに戻る">→ホーム</a>

ブラウザでの表示

→ホーム、→ホーム、→ホーム

解説

  • 通常は[文字](URL)で表現すべきリンクを、[文字][キーワード]および[キーワード]: URLの組み合わせで表現できます。
  • [キーワード]: URLの方を１回だけ記述すれば、[文字][キーワード]の方を文章中に何度でも使用できます。
  • " "で囲まれた部分は任意項目です。参照リンクにマウスカーソルを重ねたときに表示するポップアップメッセージをここに記述します。

脚注

テキストエディタ上での書き方例

GitHub[^1]の使い方についてご説明します。

[^1]: #脚注 "Gitの機能をWeb上で提供するオンラインサービス。"

HTMLへの変換後

<p>GitHub<a href="#脚注" title="Gitの機能をWeb上で提供するオンラインサービス。">^1</a>の使い方についてご説明します。</p>

ブラウザでの表示

GitHub1の使い方についてご説明します。

解説

  • マークダウン記法は脚注をサポートしていませんが、参照リンクの応用で脚注風に見せかけることができます。
  • [文字][キーワード]ではなく文字[キーワード]とします。
  • [キーワード]: URLのURLに脚注の書かれている箇所への内部リンクを指定します。
  • 脚注は普通のマークダウンテキストとして別途記述します。

関連ページ

関連ページ

Footnotes

  1. #脚注 "Gitの機能をWeb上で提供するオンラインサービス。" ↩