Basic Module | MediaQueries Multi-Device Template.

パンくず

<ul class="breadNavi"><!--
	--><li><a href="#dummy">HOME</a><span class="arrow">&gt;</span></li><!--
	--><li><a href="#dummy">ParentPage</a><span class="arrow">&gt;</span></li><!--
	--><li class="cur"><span>CurrentPage<span></li><!--
--></ul>

基本モジュール

見出し

見出しレベル1 H1/h1

<h1 class="level1">見出しレベル1 H1/h1</h1>

見出しレベル2 H2/h2

<h2 class="level2">見出しレベル2 H2/h2</h2>

見出しレベル3 H3/h3

<h3 class="level3">見出しレベル3 H3/h3</h3>

見出しレベル4 H4/h4

<h4 class="level4">見出しレベル4 H4/h4</h4>
見出しレベル5 H5/h5
<h5 class="level5">見出しレベル5 H5/h5</h5>
見出しレベル6 H6/h6
<h6 class="level6">見出しレベル6 H6/h6</h6>

段落

テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト

テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／

<p>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト</p>
<p>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／</p>

テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／
テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／

<p>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／<br>
テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／</p>

アイコン

iconLテキストの左側にインラインでアイコンimgを記述する時、imgに付与します。

<p><img src="/responsive/resources/images/dummy_icon.gif" alt="iconL" class="iconL">テキストの左側にインラインでアイコンimgを記述する時、imgに付与します。</p>

テキストの右側にインラインでアイコンimgを記述する時、imgに付与します。iconR

<p>テキストの右側にインラインでアイコンimgを記述する時、imgに付与します。<img src="/responsive/resources/images/dummy_icon.gif" alt="iconR" class="iconR"></p>

リンク

テキストリンク

<p><a href="#" class="link">テキストリンク</a></p>

リスト

マークなしリスト

  • リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ul class="defList">
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ul>

インデントリスト

  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ul class="indentList">
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ul>

中黒リスト（既存）

  • リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ul class="dotList">
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ul>

アラビア数字のナンバーリスト（既存）

  1. リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  2. リストテキスト／リストテキスト／
  3. リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ol class="numList">
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
	<li>リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ol>

注意喚起リスト

  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ul class="attList">
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ul>

注釈リスト

  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／
  • ※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／
<ul class="noteList">
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／</li>
	<li>※リストテキスト／リストテキスト／リストテキスト／リストテキスト／リストテキスト／</li>
</ul>

横並びリスト

  • リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／
  • リストテキスト／リストテキスト／
  • リストテキスト／
  • リストテキスト／リストテキスト／
<ul class="inlineList">
	<li>リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
	<li>リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
	<li>リストテキスト／</li>
	<li>リストテキスト／リストテキスト／</li>
</ul>

ボタンリスト

<ul class="btnList">
	<li><a href="#">＞ボタンリスト／ボタンリスト／ボタンリスト／</a></li>
	<li><a href="#">＞ボタンリスト／ボタンリスト／ボタンリスト／</a></li>
	<li><a href="#">＞ボタンリスト／ボタンリスト／ボタンリスト／</a></li>
	<li><a href="#">＞ボタンリスト／ボタンリスト／ボタンリスト／</a></li>
</ul>

定義済みリスト

タイトル
テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／
テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／
タイトル
テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／
<dl class="defDlList">
	<dt>タイトル</dt>
	<dd>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／</dd>
	<dd>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／</dd>
</dl>
<dl class="defDlList">
	<dt>タイトル</dt>
	<dd>テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／テキスト／</dd>
</dl>

罫線

<hr class="dotLine">

<hr class="solidLine">

表組み

内容 内容
内容 内容 
<table class="defTbl">
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>
タイトル タイトル
内容 内容 
<table class="defTbl">
	<tr>
		<th>タイトル</th>
		<th>タイトル</th>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>
タイトル 内容
タイトル 内容 
<table class="defTbl">
	<tr>
		<th>タイトル</th>
		<td>内容</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<td>内容</td>
	</tr>
</table>
タイトル タイトル タイトル
サブタイトル 内容 内容
サブタイトル 内容 内容 
<table class="defTbl">
	<tr>
		<th>タイトル</th>
		<th>タイトル</th>
		<th>タイトル</th>
	</tr>
	<tr>
		<th class="sub">サブタイトル</th>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<th class="sub">サブタイトル</th>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>
タイトル サブタイトル 内容 内容 内容
タイトル サブタイトル 内容 内容 内容 
<table class="dlTbl">
	<tr>
		<th>タイトル</th>
		<th class="sub">サブタイトル</th>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<th>タイトル</th>
		<th class="sub">サブタイトル</th>
		<td>内容</td>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>

フォーム

<p><label for="text1" class="example">例）テキスト入力</label><input type="text" name="text1" id="text1" value="" class="sPane2"></p>

例）Tel Number - - - 

<p><span class="example">例）Tel Number</span><input type="text" name="text2_1" value="" class="iTelNum"> - <input type="text" name="text2_2" value="" class="iTelNum"> - <input type="text" name="text2_3" value="" class="iTelNum"> - <input type="text" name="text2_4" value="" class="iTelNum"></p>

例）Post Number - 

<p><span class="example">例）Post Number</span><input type="text" name="text3_1" value="" class="iPosNum1"> - <input type="text" name="text3_2" value="" class="iPosNum2"></p>


<p><label for="select1" class="example">例）プルダウンメニュー</label><select name="select1" id="select">
	<option>選択してください</option>
	<option>選択肢1</option>
	<option>選択肢2</option>
	<option>選択肢3</option>
</select></p>


<p><label for="textarea1" class="example">例）複数行テキスト入力</label><textarea name="textarea1" id="textarea1" cols="20" rows="5"></textarea></p>

<ul class="inlineList">
	<li><input type="radio" name="radio1" id="radio1-1"><label for="radio1-1" class="radioText">ラジオボタン(Y)</li>
	<li><input type="radio" name="radio1" id="radio1-2"><label for="radio1-2" class="radioText">ラジオボタン(N)</li>
</ul>

<ul class="inlineList">
	<li><input type="checkbox" name="checkbox1" id="checkbox1-1"><label for="checkbox1-1" class="checkboxText">チェックボックス1</li>
	<li><input type="checkbox" name="checkbox1" id="checkbox1-2"><label for="checkbox1-2" class="checkboxText">チェックボックス2</li>
	<li><input type="checkbox" name="checkbox1" id="checkbox1-3"><label for="checkbox1-3" class="checkboxText">チェックボックス3</li>
	<li><input type="checkbox" name="checkbox1" id="checkbox1-4"><label for="checkbox1-4" class="checkboxText">チェックボックス4</li>
</ul>

Copyright © funnythingz