// --- ここから ---
$pageedit
$imglink
$viewall
$search
$navibar [HOME](../../index.html) > [アプリ](../index.html)
$title SimpleNavi3
$author 小山智史

(更新履歴)
	2025.12.21 simpleNavi3にリニューアル(chordViewと統合しMarkdownの機能を追加しました)
	2024.08.18 罫線付きの表と従来からの罫線なしの表を混在して表示できるようにしました。
	2024.07.25 simpleNavi2にリニューアル(「_」や「|」を用いた罫線付きの表に対応しました)
	2022.10.18 画像の一部を切り出して表示可能にしました
	2021.10.06 simpleNaviを公開

# 1. simpleNaviについて			// ------------------------------------------------------------------
　これまで、自分のWebページを作るためにsimpleNaviとchordViewというJavascriptライブラリを作ってきました。今回、simpleNavi3でchordViewを統合し、可能な範囲でMarkdown記法を扱えるようにしました。**あるパターンのホームページをテキスト形式で簡略に記述できる**という点で、simpleNavi, chordView, Markdown は共通しています。今表示されているこのページ自体もsimpleNaviを使って記述していて、HTMLタグはほとんど使っていません。どのように記述しているかは、ページ末尾の<button>編集</button>を押すと見ることができるので、参考にしてください。

## 1.1 準備
　ここに記載した内容を自分のパソコンで実際に試すには、[こちら](simplenavi3.js.txt)から `simplenavi3.js.txt` をダウンロードし、**ファイル名を `simplenavi3.js` に変更し**、同じフォルダに置いてください。ダウンロードせずに、HTMLファイル中の `simplenavi3.js` の箇所を `https://koyama.verse.jp/simplenavi3.js` としても結構です。

## 1.2 シンプルな例						// ------------------------------------------------------------------
　以下はシンプルな例です。([例 `ex1.html`をブラウザで表示する](ex/ex1.html))
　(1)は、HTMLファイル `ex1.html` の内容(テキストエディタの編集画面)、(2)がブラウザの表示画面です。
　テキストエディタはMeryを使い、タブ文字数は2にしています。simpleNaviはタブが大きな役割を担っているので、編集中にタブ記号を画面で確認できるようにすると思わぬ誤りを防ぐことができます((1)では <font color=lightblue>></font> の表示)。ブラウザ画面はWindowsのChromeで表示したものを掲載しています。
　(1)の**「ここから～ここまで」の間の行がページを記述する部分**です。それ以外の部分はこのように書くものと思ってください。
　**「\/\/」以降行末まではコメント**で、ブラウザの表示に影響しません。

img/ex1.png								img/ex1.jpg
	(1) 画面の記述(`ex1.html`)	(2) ブラウザの表示(`ex1.html`)

(2)の画面で、「庭の花々」の箇所は**タイトル**、「春の花」と「夏の花」の箇所を**セクション**と呼びます。
　ここで、改めて(1)の記述と、(2)のブラウザ表示との関係をみてみます。
　(1)で、冒頭、タブで字下げされた「庭の花々」はタイトルとみなされます。
　以降の字下げのない「春の花」や「夏の花」はセクション名とみなされます。
　以降のタブで字下げされた行は、それぞれのセクションの**コンテンツ**の記述とみなされます。
　(2)で[<font color=blue>view</font>]の箇所をクリックすると、以下、(3)(4)のようにそれぞれのコンテンツが表示されます。この画面を**ビュー画面**と呼びます。(1)で、「スイセン」「サクラソウ」「シバザクラ」は**タブで区切って**記述しています。

img/ex1a.jpg							img/ex1b.jpg
	(3) 「春の花」の表示画面	(4) 「夏の花」の表示画面

(5)は画像の表示を追加したものです。コンテンツの部分に花の名前に対応して画像ファイル名をタブで区切って記述しています。([例 `ex1a.html`をブラウザで表示する](ex/ex1a.html))

img/ex1a.png width=50%
								(5) 画像を含む画面の記述(`ex1a.html`)

ブラウザの初期画面は(2)と同様ですが、[<font color=blue>view</font>]の箇所をクリックした時の表示画面は(6)や(7)のようになります。画像や花の名前は均等割の表示となります。また、画像はクリックすると全画面で表示されます。
　細かなことですが、画像の表示が大きすぎるようであれば、「`suisen.jpg width=50%`」のように記述すると表示サイズを調整できます。実は今表示されているこのページ自体もsimpleNaviを使って記述しているのですが、上の(5)の画像表示もその例になっています。画像の下に表示するキャプション「(5) ...」は、タブ2段以上で字下げすることによりセンタリングされます。

img/ex1c.jpg							img/ex1d.jpg
	(6) 「春の花」の表示画面	(7) 「夏の花」の表示画面

これまでのところで重要なポイントが2つあります。ひとつは、(2)(3)(4)のブラウザ表示画面は、通常であれば3つのHTMLファイルが必要となるわけですが、`ex1.html` という**ひとつのHTMLファイル**で済んでいるということです。もうひとつは、コンテンツの記述が**HTMLタグを使わずに簡素なもの**になっているということです。
　1つのHTMLファイルで、いくつものページをナビゲーションできると書いたばかりなのですが、印刷時などは、すべてのコンテンツをひとつのページで表示させた方が好都合です。(2)の画面右下の<button>viewAll</button>を押すと、(8)のような表示となります。印刷時以外にも、現在表示されているこのドキュメントのように、初めからすべてのコンテンツを表示したい場合もあります。その場合は、ページの冒頭に `$allview` というディレクティブを書き加えると、初めから(8)のような表示となります。ディレクティブについては、後に改めて説明します。

img/ex1e.jpg width=50%
								(8) <button>viewAll</button>によるブラウザ画面(`ex1a.html`)

## 1.3 チャプターとセクション			// ------------------------------------------------------------------
　以下(1)は、前節の例を複数のチャプターに拡張したHTMLファイル `ex2.html` の編集画面です。([例 `ex2.html`をブラウザで表示する](ex/ex2.html))
　「# 」で始まる行がチャプター名で、「庭の花々」というチャプターと「山の花々」というチャプターからなっています。なお、冒頭に記述したタイトルは「花を愛でる」に変更しました。
　「庭の花々」については、前の例と同様「春の花」と「夏の花」の2つのセクションからなっています。また、「山の花々」については、「八幡平の花々」と「鳥海山の花々」の2つのセクションからなっています。
　実は「## 」で始まる行がセクション名となるのですが、「## 」を省略することができます。その場合はコンテンツをタブで字下げして記述します。
　なお、「# 」や「## 」の記法はMarkdownの「見出し」に相当するものです。
　さて、ブラウザの表示画面ですが、初期画面は(2)のようにチャプターの一覧になっています。
これを**メニュー画面**と呼びます。

img/ex2.png											img/ex2a.jpg
		(1) チャプターを拡張した記述		(2) ブラウザの表示(メニュー画面)

ここで、チャプターを選択すると(3)や(4)のように、チャプターに属するセクションの一覧が表示されます。

img/ex2b.jpg										img/ex2c.jpg
		(3) チャプター1のセクション一覧	(4) チャプター2のセクション一覧

セクション一覧の中の[<font color=blue>view</font>]の箇所をクリックすると、該当するビュー画面が表示されます。「庭の花々」の場合は前節の(6)や(7)と同様の表示になり、「山の花々」では以下の(5)や(6)のようなビュー画面となります。

img/ex2d.jpg										img/ex2e.jpg
		(5) ビュー画面(コンテンツ表示)	(6) ビュー画面(コンテンツ表示)

[こちらのページ(山でみつけた花)](../../outdoor/flower.html)はこのようにして作ったページです。たくさんのコンテンツが含まれていますが、`flower.html`というひとつのHTMLファイルです。なお、このように画像がたくさん含まれるページは、どうしても重くなるので、画像の解像度を控えめにするのが良いと思います。このサイトの画像の多くは解像度を1024×768にしています。
　また、「山でみつけた花」では、はじめに画像が一覧表示され、その中から選んだ画像が大きく表示されるようになっています。このようなページにするには、ページの冒頭に `$imglink` を書き加えます。以後、「`$`」で始まる指示がいくつか出てきますが、これらを**ディレクティブ**と呼びます。

## 1.4 リンク									// ------------------------------------------------------------------
　前節のように、たくさんのビュー画面をひとつのHTMLファイルで表すことができます。しかし、全体のボリュームが大きくなってきたときには、複数のファイルに分けたくなることもあります。`ex3.html`はそのような例です。([例 `ex3.html`をブラウザで表示する](ex/ex3.html))
　前節の例`ex2.html`の中の「庭の花々」の内容は初めの例`ex1.html`にあります。そこで、下の(1)のように「春の花」と「夏の花」のセクションの行にタブで区切ってリンク先を書き、コンテンツを削除します。この例では、「`ex1.html?春の花`」のように、HTMLファイル名に続けてセクションのキーワードを書いています。キーワードはなくても構いませんが、このようにすると、セクションの一覧を表示することなく、特定のビュー画面を直接表示させることができます。
　(2)はブラウザの初期画面で、これは前節のメニュー画面とまったく同じです。

img/ex3.png												img/ex2a.jpg
		(1) リンクの記述(`ex3.html`)			(2) メニュー画面

ここで、「庭の花々」のチャプターを選択すると(3)のように、セクションの一覧が表示されます。前節の表示では[<font color=blue>view</font>]でしたが、リンクの場合は[<font color=blue>View</font>]となります。ここをクリックすると、「春の花」のコンテンツが表示されます。前節とまったく同じ表示なので気づかない場合が多いのですが、`ex2.html`には「春の花」のコンテンツは書かれていません。ここで表示されているのは、別ファイル`ex1.html`なのです。

img/ex2f.jpg											img/ex2d.jpg
		(3) 「庭の花々」のセクション一覧	(4) 「春の花」のコンテンツ表示

同じ方法で「山の花々」も別ファイルにすれば、リンクだけのページを作ることができます。リンクだけのページについては、「歌詞・コードの表示」のところでも取り上げます。
　なお、リンク先を同じHTMLファイルにしてキーワードを指定すれば、ページ内リンクになります。[こちらのページ](../../outdoor/index.html)の「最近の山歩き」の箇所はその例です。

## 1.5 simpleNaviの表					// ------------------------------------------------------------------
	
　枠線のある表を記述する場合は、(1)のようにします。ブラウザでの「庭の花々」の表示は(2)のようになります。([例 `ex4.html`をブラウザで表示する](ex/ex4.html))
　
	img/ex4.png									img/ex4.jpg
	(1) 表の記述(`ex4.html`)		(2) 「庭の花々」の表示

[こちらのページ](../../misc/tommorowland/index.html?2025)はその例です。
　なお、Markdownとは書き方が異なります。

## 1.6 検索ボックス						// ------------------------------------------------------------------
　ページに検索機能を持たせるには、(1)のようにページ記述の冒頭に「`$serachbox`」と記載します。すると、ブラウザ画面に(2)のように検索ボックスが表示されます。([例`ex5.html`を表示する](ex/ex5.html))

img/ex5.png																			img/ex5a.jpg
	(1) `ex2.html`に`$searchbox`を追加(`ex5.html`)	(2) 画面冒頭に検索ボックスの表示

検索ボックスに「夏の花」とキーワードを入力して<button>検索</button>を押すと、(3)のように検索結果がビュー表示されます。この場合、キーワードは「夏」でもかまいません。検索対象はセクション名と小見出し(次節)です。

img/ex1d.jpg width=50%
		(3) ビュー画面

検索結果が複数想定される場合は初めに合致したものが表示されるので、セクション名やキーワードに工夫が必要な場合もあります。

## 1.7 小見出しと区切り線			// ------------------------------------------------------------------
---小見出し---
　ひとつのセクションの中が長くなった時に、小見出しを付けると見やすくなります。［　］か「---」で囲むと小見出しの体裁になります。この文書でも何か所かで小見出しを使っています。
[区切り線]
　**3.4 水平線(区切り線)** のように「\-\-\-」で区切り線を表示すると見やすくなる場合もあります。
---
このように表示されます。

## 1.8 編集										// ------------------------------------------------------------------
　前節までで、ページの記述とブラウザ表示の関係について説明してきましたが、この対応関係を画面上で確認することができます。
　以下の(1)は「**1. シンプルな例**」の`ex1.html`の冒頭に`$pageedit`を追加したものです。こうすると、ブラウザ表示画面の右下に<button>編集</button>のボタンが表示されます。([例`ex6.html`を表示する](ex/ex6.html))

img/ex6.png																		img/ex6a.jpg
	(1) `ex1.html`に`$pageedit`を追加(`ex6.html`)	(2) 画面右下に<button>編集</button>の表示

<button>編集</button>を押すと、(3)のように編集画面が表示され、ページの記述とブラウザ表示の関係を確認することができます。
　実は、単に確認だけではなく、記載内容を変更すると表示が変化する様子を体験することができます。(4)は、タイトルを「四季の花々」に変更し、「秋の花」と「冬の花」を画面上で追加した様子です。

img/ex6b.jpg				img/ex6c.jpg
	(3) 編集画面の表示	(4) 「秋の花」と「冬の花」の追加

ここで、<button>更新</button>を押すと、(5)のようなブラウザ表示になり、(6)は「秋の花」のビュー画面です。

img/ex6d.jpg									img/ex6e.jpg
	(5) 編集後のブラウザ画面	(6) 「秋の花」のビュー画面

変更内容は、**ブラウザに保存**され、次回このページを表示した時も、同じように表示されます。あくまでブラウザへの保存で、サーバの内容が変更されるわけではありませんから、他のパソコンで変更された内容を見ることはできません。<button>初期値に戻す</button>を押せば、変更内容は破棄され、初期値に戻ります。**サーバのライブラリが変更された場合も初期値に戻る**のでご注意ください。
　追加部分に自分で用意した画像を使いたい場合は、「`file:\/\/...`」のように画像ファイル名を記載します。
　主に動作の確認の目的で用意した機能ですが、「自分用のページ」を作る時に役に立つ場面があるかもしれません。

# 2. 歌詞・コードの表示	// ======================================================================
　元々は、simpleNaviとは別に、ギターのコードや歌詞をホームページ上にきれいに表示するchordViewというものを作っていたのですが、simpleNavi3でこの機能を取り込みました。
　chordViewを作ったきっかけは、ひとつは[山口岩男さん](https://iwao-breeze.com/)の方言ソング(山形内陸弁)の[庄内弁版](../../mymelo/iwao.html)を作ったことと、もうひとつは[宇田大志さんのページ](http://uda335.com/)でジャズギターの練習を始めたことです。

## 2.1 シンプルなコード譜表示	// ------------------------------------------------------------------
　以下はシンプルなコード譜の例です。([例 `chord1.html`をブラウザで表示する](ex/chord1.html))
　(1)は、これまでのsimpleNaviの標記で書いたもので、(2)はそのビュー画面です。(1)の編集画面で「`C Δ 7`」と書いたものが、ビュー画面では「`C<sub>Δ7</sub>`」のように表示されていることがわかります。

img/chord1a.png												img/chord1a.jpg
	(1) シンプルなコード譜(`chord1.html`)	(2) ビュー画面

次に、(3)は冒頭に「$`chordview`」の1行を追加しました。(4)はそのビュー画面です。小節区切りの線が表示されます。タイトル部分にもボタンやセレクタが現れましたが、ここでは特に機能しません。

img/chord1b.png					img/chord1b.jpg
	(3) `$chordview`の追加	(4) ビュー画面

[フォントの指定]
　文字を少し大きくしたいので「`$fontsize x-large`」を追加したものが(5)で、(6)はそのビュー画面です。もちろん、ブラウザの `Ctrl + +`のキーボード操作や `Ctrl` を押しながらマウスホイール操作で拡大することもできます。フォントのサイズは  
xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller  
や「20px」のように指定します。
　フォントを変えたい場合は「`$fontfamily sans-serif`」のようにします。フォントは
serif, sans-serif, cursive, fantasy, monospace  
や「Meryo」など固有のフォント名を指定します。

img/chord1c.png					img/chord1c.jpg
	(5) `$fontsize`の追加		(6) ビュー画面

[サウンドの再生]
　伴奏などのサウンドを再生しながら練習するのが効果的な場面が多くあります。
　(7)は、伴奏が録音されたmp3ファイルを追加したもので、(8)はそのビュー画面です。操作パネルでできる操作は最低限のものにとどまります。

img/chord1d.png							img/chord1d.jpg
	(7) サウンドファイルの追加	(8) ビュー画面

[画面の編集]
　編集機能を有効にするために「`$pageedit`」を追加したものが(9)で、(10)はそのビュー画面で、画面右下に<button>編集</button>のボタンが表示されます。

img/chord1e.png					img/chord1e.jpg
	(9) `$pageedit`の追加		(10) ビュー画面

<button>編集</button>を押すと編集画面が表示され、ここに度数表記のキー度譜を追加したものが(11)で、(12)は<button>更新</button>を押した後の表示です。

img/chord1f.jpg						img/chord1g.jpg
	(11) デグリーネームの追加	(12) 更新後の表示

## 2.2 歌詞とコードの表示			// ------------------------------------------------------------------
　歌本に見られるような、歌詞の上にギターコードを表示することができます。(1)は歌詞の上にコードを表示するシンプルな例で、(2)がそのビュー画面です。([例 `chord2.html`をブラウザで表示する](ex/chord2.html))
　「`[夏：G]`が...」の部分は、ビュー画面では「`<ruby>夏<rt><font color=red><big>G</big></font></rt></ruby>`が...」のような表示となります。

img/chord2a.png					img/chord2a.jpg
	(1) 歌詞・コードの例		(2) ビュー画面

画面上のタイトル部分にある <button>コード表示/非表示</button> を押すと(3)のようにコードは非表示となります。もう一度押すとまた表示されます。隣の「キー」を「0」から「+3」に変更すると、(4)のように、キーがGからBbに変わります(移調)。なお、キーの変更は曲ごとに保存され、次回もこの変更されたビュー画面となります。

img/chord2b.jpg					img/chord2c.jpg
	(3) コードの非表示			(4) キーの変更

<button>編集</button>を押すと編集画面が表示され、(5)は「$chordcolor blue」を追加した様子です。<button>更新</button>を押すと、(6)のようになります。

img/chord2d.jpg					img/chord2e.jpg
	(5) 編集画面の表示			(6) コードの表示色の変更

これまでの例では曲(セクション)は1つでした。以下の(7)は曲をふたつにしたものです。ブラウザでは、(8)のように曲(セクション)の一覧が表示されます。ここで「少年時代」の`[view]`をクリックすると、(2)と同様の画面となります。

img/chord2f.png					img/chord2f.jpg
	(7) 曲を複数にした例		(8) 曲(セクション)一覧の画面表示

最後に、リンクの例です。すでに、陽水の歌詞・コードがたくさん入った `yosui.html` があるものとします。また、拓郎の歌詞・コードがたくさん入った `takuro.html` もあるものとします。(9)は、これらの中からいくつかの曲を選んで、ナビケーションページを作る例です。(7)と違い、この中にはコンテンツ(歌詞・コードのデータ)は何も含まれていません。(10)はその曲(セクション)一覧の表示です。見かけは(8)とほぼ同じですが、リンクなので`[View]`のように「`V`」が大文字になっています。また、`viewAll`もできません。

img/chord2g.png					img/chord2g.jpg
	(9) リンクの例					(10) 曲(セクション)一覧の画面表示

ここでは、チャプターがひとつの例しか取り上げませんでしたが、もちろん複数のチャプターにして歌手別やジャンル別からなるページを作ることができます。

# 3. Markdownの機能	// ==========================================================================
　Markdownは2004年に簡略な書き方で作ったテキストをHTMLに変換する開発されました。その後約20年の間に、独自のさまざまな拡張が行われたり、処理系もブラウザの拡張機能やWindowsのメモ帳への実装などさまざまな形で普及してきました[1]。
　simpleNaviもchordViewもMarkdownのことを知らないままに、主に自分のWebページを作るために作ったのですが、**あるパターンのホームページをテキスト形式で簡略に記述できる**という点で、Markdownの考え方に近いことに気づき、この記法の一部を使えるようにしました。

[1] Markdown方言乱立の歴史, https://qiita.com/gaichi/items/1d41c48c60579df0aeec

## 3.1 見出し									// ------------------------------------------------------------------
　Markdownの見出しはsimpleNaviのチャプターとセクションに対応しています。
　行頭「#」とスペースに続いて見出し名(チャプター名)を書くと見出し1(1番大きい見出し)になります。
　行頭「##」とスペースに続いて見出し名(セクション名)を書くと見出し2(2番目に大きい見出し)になります。
　<font color=red>「###」～「######」も「##」と同じ扱いになります。</font>行末に「#」や「##」を置いても構いません。

## 3.2 パラグラフ(段落)				// ------------------------------------------------------------------
　本来のMarkdownでは連続する行は改行が無視され、同じパラグラフとして扱われますが、<font color=red>これには対応していません</font>。その代わりに、例えば見出し行の前後など多くの場面で、空行を置く必要はありません。
　<font color=red>長いパラグラフは、**改行せずに**続けて書くようにしますます。</font>改行までがひとつのパラグラフです。

## 3.3 強調表示とエスケープ文字	// -----------------------------------------------------------
　強調したい箇所は、\*(アスタリスク)で囲むと *このように斜体字になります*。\*\*(アスタリスク2個)または\_\_(アンダースコア2個)で囲むと **このように太字になります**。
　文章中にプログラムコードを埋めこむ場合は「\`if(i==j){\`」のように\`(バッククォート)で囲むと「`if(i==j){`」のような表示になります。
　特別な意味を持つ「\* \` \/ \_ \- \: \|」などの文字をそのまま表示したい場合は、その文字の前に￥記号を付けてエスケープします。

## 3.4 水平線(区切り線)				// ------------------------------------------------------------------
　行頭から「`\* \* \*`」「`\*\*\*`」「`- - -`」「`---`」のように書くと、いずれも
***
のような水平の区切り線が表示されます。

## 3.5 リンクと画像						// ------------------------------------------------------------------
　文章中に`［リンク先］(url)`と書くと[リンク先](url)となります。
　`!［説明］(画像ファイル名)`と書くと画像が表示されます。例えば、`!［ビュー画面］(ex/rindo.jpg)` と書くと
ex/rindo.jpg width=50%
のように表示されます。

## 3.6 箇条書き								// ------------------------------------------------------------------
[番号なしの箇条書き]
　番号なしの箇条書きは、行頭から「`- `(ハイフン スペース)」に続けて項目名を書き、同様の行を並べます。
```
− 春の花
− 夏の花
```
と書くと
- 春の花
- 夏の花
となります。箇条書きを入れ子にする場合はスペース4個で字下げします。
```
− 春の花
　　− スイセン
　　− サクラソウ
　　− シバザクラ
− 夏の花
　　− アジサイ
　　− アサガオ
　　− ベンケイソウ
```
と書くと、
- 春の花
    - スイセン
    - サクラソウ
    - シバザクラ
- 夏の花
    - アジサイ
    - アサガオ
    - ベンケイソウ
のようになります。

[順序付き箇条書き]
　順序付き箇条書きは、行頭から「`1. `(1. スペース)」に続けて名称を書き、行間をあけずに次の項目を書きます。数字は何でも構いません。
```
1.春の花
1.夏の花
```
と書くと
1. 春の花
1. 夏の花
となります。箇条書きを入れ子にする場合はスペース4個で字下げします。
```
1.春の花
　　1.スイセン
　　1.サクラソウ
　　1.シバザクラ
1.夏の花
　　1.アジサイ
　　1.アサガオ
　　1.ベンケイソウ
```
と書くと、
1. 春の花
    1. スイセン
    1. サクラソウ
    1. シバザクラ
1. 夏の花
    1. アジサイ
    1. アサガオ
    1. ベンケイソウ
となります。

入れ子に関しては、

1. 春の花
    - スイセン
    - サクラソウ
    - シバザクラ
1. 夏の花
    - アジサイ
    - アサガオ
    - ベンケイソウ

のように番号なし箇条書きと順序付き箇条書きを混在できます。

## 3.7 引用とコードブロック		// ------------------------------------------------------------------
[引用]
　行頭が「>」で始まる連続した行は引用として表示されます。以下はWikipediaからの引用です(引用の表示例)。
> 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、ジョン・グルーバー（英語版）により作成された。
引用の入れ子も可能です。

[コードブロック]
　2つの「\`\`\`(3連続バッククォート)」からなる行の間がコードブロックとして表示されます。
　「\`\`\`」を使わずに、コードブロックの部分を半角スペース4個で字下げしても構いません。以下は表示例です。

```
for(i=1;i<=9;i++){
　for(j=1;j<=9;j++){
　　print i*j;
　}
}
```

## 3.8 Markdownの表						// ------------------------------------------------------------------
　ここでの表記法はMarkdownの拡張であるGFMに基づくものです。simpleNaviの書き方とはまったく異なっていまが、利用場面が異なるので、あまり混乱することはないと思います。(simpleNaviの表は[こちら](index.html?simpleNaviの表))

```
 |季節  |花        |
 |:----:|:---------|
 |春    |スイセン  |
 |夏    |サクラソウ|
```

のように書くと

| 季節   | 花        |
|:------:|:----------|
| 春     | スイセン  |
| 夏     | サクラソウ|

のようになります。

// --- ここまで ---