リファレンス
ページ制作の参考に利用してください。

[h3] htmlタグ や class について説明します

[p] ここではタグや class の説明をします。
[strong]レスポンシブにしていることから、html に style を直接書き込まないようご注意ください。
ただし、color と text-align のみ使用できるものとします。

[p] 検索フォームを立ち上げます

[h4] テキスト入力系タグ

[p] これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。これは通常利用する pタグ です。

[em] emタグ です。インライン要素なので pタグ等の内部で使ってください。尚、emタグの場合、メイリオではありません。 emタグ です。インライン要素なので pタグ等の内部で使ってください。尚、emタグの場合、メイリオではありません。

[strong] strongタグ です。インライン要素なので pタグ等の内部で使ってください。尚、strongタグの場合、メイリオではありません。 strongタグ です。インライン要素なので pタグ等の内部で使ってください。尚、strongタグの場合、メイリオではありません。

[h4] blockquoteタグ

[blockquote] blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。

[h5] 引用符つきblockquoteタグ

<blockquote class=”quote”>[blockquote] blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。</blockquote>

[blockquote] blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。 blockquoteタグ です。

[h4] ボタン系タグ

[p] aタグに button01, button02, button03 と class をつけることで、それぞれ 内部（募金）用, 内部（募金以外）用, 外部用, の ボタンの色になります。

内部（募金）用
class=”button01″ 内部（募金以外）用
class=”button02″ 外部用
class=”button03″ その他
class=”button04″ その他
class=”button05″

[h4] リスト系タグ

[H5] ulタグ

• ul liタグ です。ul liタグ です。ul liタグ です。
• ul liタグ です。ul liタグ です。ul liタグ です。
• ul liタグ の中に ul liタグ を入れてみました。
• ul liタグ の中に ul liタグ を入れてみました。
• ul liタグ です。ul liタグ です。ul liタグ です。

[H5] olタグ

1. ol liタグ です。ol liタグ です。ol liタグ です。
2. ol liタグ です。ol liタグ です。ol liタグ です。
• ol liタグ の中に ul liタグ を入れてみました。
• ol liタグ の中に ul liタグ を入れてみました。
3. ol liタグ です。ol liタグ です。ol liタグ です。

[H5] dl dt dd タグ

dl dtタグ です。dl dtタグ です。dl dtタグ です。

dl ddタグ です。dl ddタグ です。dl ddタグ です。

dl ddタグ です。dl ddタグ です。dl ddタグ です。

[h4] カラム系 class

[p] ulタグに c2, c3, c4, c5 と class をつけることで、それぞれ 2カラム用, 3カラム用, 4カラム用, 5カラム用, の ulタグ として機能します。
liタグには li.b2, li.b3, li.b4, と class をつけることで、それぞれ 2カラム結合, 3カラム結合, 4カラム結合, として機能します。
[strong]※リファレンスではわかりやすいように色をつけています

[h5] 2カラム（466px/column）

<ul class=”c2″>
<li>column</li>
<li>column</li>
</ul>

• column

• column

[h5] 3カラム（300px/column, 632px/2column）

<ul class=”c3″>
<li>column</li>
<li>column</li>
<li>column</li>
<li class=”b2″>2column</li>
<li>column</li>
</ul>

• column

• column

• column

• 2column

• column

[h5] 4カラム（217px/column, 466px/2column, 715px/3column）

<ul class=”c4″>
<li>column</li>
<li>column</li>
<li>column</li>
<li>column</li>
<li class=”b3″>3column</li>
<li>column</li>
<li class=”b2″>2column</li>
<li class=”b2″>2column</li>
</ul>

• column

• column

• column

• column

• 3column

• column

• 2column

• 2column

[h5] 5カラム（180px/column, 376px/2column, 572px/3column, 768px/4column）

<ul class=”c5″>
<li>column</li>
<li>column</li>
<li>column</li>
<li>column</li>
<li>column</li>
<li class=”b4″>4column</li>
<li>column</li>
<li class=”b3″>3column</li>
<li class=”b2″>2column</li>
</ul>

• column

• column

• column

• column

• column

• 4column

• column

• 3column

• 2column

[h5] その他の使い方

[h6] カラムに dl dt dd を入れた場合

• [dt] はセンタリングされます。

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• [dt] はセンタリングされます。

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• [dt] はセンタリングされます。

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

[h6] カラムに ul li を入れた場合

• • ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。
  • ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。
• • ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。
  • ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。ul liタグ です。

[h6] カラムに画像を入れた上で、dl dt dd を入れて、さらに dt の一部に strong を適用した場合

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

• 

  [dt] はセンタリングされます。
  [strong]です

  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。
  [dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。[dd] は左寄せになります。

[h4] その他タグ

[H5] tableタグ

TABLE-THタグです。	TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。
TABLE-THタグです。	TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。
TABLE-THタグです。	TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。
TABLE-THタグです。	TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。
TABLE-THタグです。	TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。TABLE-TDタグです。

[H5] グラフ

<div class=”graph”>
<ul>
<li><dl><dt>ベトナム</dt><dd><div style=”width:100%;”></div><span>100%</span></dd></dl></li>
<li><dl><dt>カンボジア</dt><dd><div style=”width:72%;”></div><span>72%</span></dd></dl></li>
<li><dl><dt>ミャンマー</dt><dd><div style=”width:38%;”></div><span>38%</span></dd></dl></li>
<li><dl><dt>ザンビア</dt><dd><div style=”width:8%;”></div><span>8%</span></dd></dl></li>
<li><dl><dt>タンザニア</dt><dd><div style=”width:2%;”></div><span>2%</span></dd></dl></li>
</ul>
</div>

[H5] Google MAp

スマホの場合は縦幅を強制的に320pxにします。