パーツモジュール

パーツモジュールは、ユニットモジュール内に入れ込んで使うことができます。端末の状態(スクリーンの幅など)に合わせて、スタイルが変化する場合があります。
スタティックモジュールと異なり、ある程度複雑な構造のパーツが含まれます。

INDEX

段落
見出し
文字サイズ
リンク
その他のインライン要素
リスト
数字リスト
定義・説明リスト
- 通常の定義・説明リスト
- 注釈定義・説明リスト dl.notes
日付入りリスト .date_list
罫線
テーブル table.def
画像置換 .imgrep
メディア別パーツ出し分け
カレント制御 .current
ソースコード .code
- コピペ用ソースコード
- 見てるだけ用ソースコード
フォーム

段落

段落は、p要素を用いて表現します。

<p>{$string|parts}</p>

見出し

見出しタグ h2～h6要素のデフォルトスタイルは、素の状態で定義されます。デザインによっては、装飾用にspan要素等の階層を追加する必要がある場合も想定されますが、学習しやすさのために可能な限り、素のHTMLの構造のままでマークアップできるように設計するコンセプトに従い、素のままのタグとされました。

<h2>{$string|parts}</h2>
<h3>{$string|parts}</h3>
<h4>{$string|parts}</h4>
<h5>{$string|parts}</h5>
<h6>{$string|parts}</h6>

文字サイズ

文字サイズ指定系のクラス同士を入れ子の関係にする(例： .largeの中に.small を置くなど)ことはできません。

モジュール名称	用途	サンプル
.xxlarge	文字を最大サイズにする。	<p class="xxlarge">{$string}</p>
.xlarge	文字をさらに大きいサイズにする。	<p class="xlarge">{$string}</p>
.large	文字を大きいサイズにする。	<p class="large">{$string}</p>
.medium	文字を標準サイズにする。	<p class="medium">{$string}</p>
.small	文字を小さいサイズにする。	<p class="small">{$string}</p>
.xsmall	文字をさらに小さいサイズにする。	<p class="xsmall">{$string}</p>
.xxsmall	文字を最小サイズにする。	<p class="xxsmall">{$string}</p>

リンク

通常のインラインリンク

<a href="{$string}">{$string}</a>

アイコン付きリンク .icon

アイコン付きリンク

<a href="{$string}" class="icon">{$string}</a>

ページ内リンク(下向き) .down

ページ内リンク(下向き)

<a href="{$string}" class="down">{$string}</a>

ページ内リンク(上向き) .up

ページ内リンク(上向き)

<a href="{$string}" class="up">{$string}</a>

戻るリンク .back

戻るリンク

<a href="javascript:history.back();" class="back">{$string}</a>

付加リンクモジュール

リンクモジュールには、任意の付加リンクモジュールを組み合わせて使用することができます。

付加リンクモジュールは、a要素の内側にspan要素を組み込んで使用します。付加リンク単体での使用(=a要素に直接クラスを指定しての使用)はできません。

次に示す例は、通常のインラインリンクに付加した場合の実装を示しています。

別ウィンドウリンク .blank

別ウィンドウリンク

<p><a href="{$string}" target="_blank"><span class="blank">{$string}</span></a></p>

ダウンロードリンク .download

ダウンロードリンク

<p><a href="{$string}"><span class="download">{$string}</span></a></p>

PDF .pdf

PDFファイル名

<p><a href="{$string}"><span class="pdf">{$string}</span></a></p>

リンクリスト .anchor_links

リストは、ul要素の代わりにol要素を使用することもできます。.more_links-heading の要素は削除しても構いません。また、p要素の他に、h2〜h6要素を使用することもできます。

<div class="anchor_links">
	<p class="anchor_links-heading">目次</p>
	<ul>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a>
		<ul>
			<li><a href="{$string}">{$string}</a></li>
			<li><a href="{$string}">{$string}</a></li>
		</ul>
		</li>
		<li><a href="{$string}">{$string}</a></li>
	</ul>
</div><!-- /.anchor_links -->

詳細リンクリスト .more_links

詳細リンクリストは、リストのネストはできません。

<div class="more_links">
	<ul>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
		<li><a href="{$string}">{$string}</a></li>
	</ul>
</div><!-- /.more_links -->

ページトップリンク .page_top

ページの先頭へ戻る

<div class="page_top">
	<p><a href="#page_top">ページの先頭へ戻る</a></p>
</div><!-- /.page_top -->

その他のインライン要素

強調 strong

この文言は強調表示です。

<p><strong>この文言は強調表示です。</strong></p>

強勢 em

この文言には強勢(アクセント)をついけています。

<p>この文言には<em>強勢(アクセント)</em>をついけています。</p>

エラー表示 .error

この文言はエラー表示です。

<span class="error">{$string}</span>

注釈表示 .notes

この文言は注釈表示です。

<p><span class="notes">この文言は注釈表示です。</span></p>

数字リスト

リスト内容
リスト内容
1. リスト内容
2. リスト内容

<ol>
	<li>{$parts|box}</li>
	<li>{$parts|box}
		<ol>
			<li>{$parts|box}</li>
			<li>{$parts|box}</li>
		</ol>
	</li>
</ol>

定義・説明リスト

通常の定義・説明リスト

定義語句: 定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
定義語句: 定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
定義語句: 定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

<dl>
	<dt>{$string}</dt>
		<dd>{$parts|box}</dd>
	<dt>{$string}</dt>
		<dd>{$parts|box}</dd>
	<dt>{$string}</dt>
		<dd>{$parts|box}</dd>
</dl>

注釈定義・説明リスト dl.notes

※1 語句

定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

※2 語句

定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

※3 語句

定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

DL入れ子サンプル: 定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
DL入れ子サンプル: 定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

<dl class="notes">
	<dt class="notes-dt">※{$string}</dt>
		<dd class="notes-dd">{$parts|box}</dd>
	<dt class="notes-dt">※{$string}</dt>
		<dd class="notes-dd">{$parts|box}</dd>
</dl>

日付入りリスト .date_list

日付を書くth要素と、内容を書くtd要素は必須の要素です。フラグを表示するtd.date_list-flag要素の要・不要や、フラグの種類、記述フォーマットについては、プロジェクトによって独自に設計する必要があります。

日付	フラグ	内容
2012年9月24日	[NEW!][CATEGORY]	新着ニュースへのリンク
2012年9月24日	[NEW!][CATEGORY]	新着ニュースへのリンク新着ニュースへのリンク新着ニュースへのリンク新着ニュースへのリンク
2012年9月24日	[NEW!][CATEGORY]	新着ニュースへのリンク

<div class="date_list">
	<table>
		<thead>
			<tr>
				<th>日付</th>
				<th class="date_list-flag">フラグ</th>
				<th>内容</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>{$string}</th>
				<td class="date_list-flag">{$string}</td>
				<td><a href="{$string}">{$string}</a></td>
			</tr>
			<tr>
				<th>{$string}</th>
				<td class="date_list-flag">{$string}</td>
				<td><a href="{$string}">{$string}</a></td>
			</tr>
			<tr>
				<th>{$string}</th>
				<td class="date_list-flag">{$string}</td>
				<td><a href="{$string}">{$string}</a></td>
			</tr>
		</tbody>
	</table>

</div><!-- /.date_list -->

罫線

<hr />

テーブル table.def

学習しやすさのために可能な限り、素のHTMLの構造のままでマークアップできるように設計するコンセプトに従うならば、本来はクラス名なしの素のHTMLがデフォルトのテーブルスタイルになるべきです。しかし、テーブルに限っては、素のデザインにはボーダーが表示されず、一見して表だと分かるスタイルは適用されません。これをデフォルトとしてボーダーをつけるように変更するのは混乱を招く元となるおそれがあるので、例外的に、デフォルトスタイルにクラス名 .def を定義しています。

コンテンツ制作者は、table要素の幅(width)、高さ(height)、行や列の幅(width)、高さ(height) を上書きして変更できます。

thead ヘッダセル	thead セル	thead セル
tfoot ヘッダセル	tfoot セル	tfoot セル
tbody ヘッダセル	tbody セル	tbody セル
tbody ヘッダセル	tbody セル	tbody セル

<table class="def">
	<thead>
		<tr>
			<th>{$parts}</th>
			<td>{$parts}</td>
			<td>{$parts}</td>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>{$parts}</th>
			<td>{$parts}</td>
			<td>{$parts}</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th>{$parts|box}</th>
			<td>{$parts|box}</td>
			<td>{$parts|box}</td>
		</tr>
		<tr>
			<th>{$parts|box}</th>
			<td>{$parts|box}</td>
			<td>{$parts|box}</td>
		</tr>
	</tbody>
</table>

画像置換 .imgrep

.imgrep には width および height を、.imgrep-panel には background-image 、必要に応じて background-position を上書きして使用します。

<style type="text/css">
	.cont_{$string}{
		width:{$string}px;
		height:{$string}px;
	}
	.cont_sample .imgrep-panel{
		background-image:url("{$string}");
	}
</style>
<a href="{$string}" class="imgrep cont_{$string}">{$parts}<span class="imgrep-panel"></span></a>

メディア別パーツ出し分け

モジュール名称	用途	サンプル
.aural	読み上げブラウザ対応のための隠しナビゲーションを表現します。視覚メディアには表示されませんが、音声読み上げブラウザには読み上げられます。	<div class="aural">{$parts\|box}</div>

カレント制御 .current

カレントページを示す要素に適用します。通常は a要素に対して適用しますが、場合によっては li要素などにも使用する場合にも、同じクラス名を使用します。

カレントページ

<a href="{$string}" class="current">{$string}</a>

ソースコード .code

コピペ用ソースコード

<h2>ああああ</h2>

<div class="unit">
	<div class="code"><textarea readonly="readonly">{$string}
</textarea></div>
</div>

見てるだけ用ソースコード

<h2>ああああ</h2>

<div class="unit">
	<div class="code"><pre><code>{$string}
</code></pre></div>
</div>

フォーム

フォームテーブル .form_elements

入力項目名	入力フィールド
基本	全角カナで入力してください。 8文字以上入力してください。
リスト	複数選択が可能です。選択肢1 選択肢2 選択肢3
リスト(水平)	この項目は、リストを水平に並べています。(.form_elements-list_horizontal を使用) 選択肢1 選択肢2 選択肢3

入力項目名

入力フィールド

基本

全角カナで入力してください。
8文字以上入力してください。

リスト

複数選択が可能です。

選択肢1
選択肢2
選択肢3

リスト(水平)

この項目は、リストを水平に並べています。(.form_elements-list_horizontal を使用)

選択肢1
選択肢2
選択肢3

<table class="form_elements">
	<thead>
		<tr>
			<th>入力項目名</th>
			<th>入力フィールド</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>{$string}</th>
			<td>
				<ul class="form_elements-notes">
					<li>{$string}</li>
					<li>{$string}</li>
				</ul>
				<input type="text" name="" value="" />
			</td>
		</tr>
		<tr>
			<th>{$string}</th>
			<td>
				<ul class="form_elements-notes">
					<li>{$string}</li>
				</ul>
				<ul class="form_elements-list">
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
				</ul>
			</td>
		</tr>
		<tr>
			<th>{$string}</th>
			<td>
				<ul class="form_elements-notes">
					<li>{$string}</li>
				</ul>
				<ul class="form_elements-list_horizontal">
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
					<li><label><input type="checkbox" name="" value="" /> {$string}</label></li>
				</ul>
			</td>
		</tr>
	</tbody>
</table>

エラー表示

入力項目名	入力フィールド
テキスト入力必須	全角カナで入力してください。 8文字以上入力してください。全角カナで入力してください。 8文字以上入力してください。

入力項目名

入力フィールド

テキスト入力必須

全角カナで入力してください。
8文字以上入力してください。

全角カナで入力してください。
8文字以上入力してください。

<table class="form_elements">
	<thead>
		<tr>
			<th>入力項目名</th>
			<th>入力フィールド</th>
		</tr>
	</thead>
	<tbody>
		<tr class="form_elements-error">
			<th>{$string}<span class="must">必須</span></th>
			<td>
				<ul class="form_elements-notes">
					<li>{$string}</li>
					<li>{$string}</li>
				</ul>
				<ul class="form_elements-errors">
					<li>{$string}</li>
					<li>{$string}</li>
				</ul>
				<input type="text" name="" value="" />
			</td>
		</tr>
	</tbody>
</table>

必須項目 .must

入力項目名	入力フィールド
テキスト入力必須	必ず入力してください。

{$string}<span class="must">必須</span>

送信系ボタン

送信系ボタンは、ユニットモジュールとして設計されています。
ユニットモジュールのページを参照してください。

フォーム要素

テキスト入力

<input type="text" name="{$string}" value="{$string}" />

テキスト入力(複数行)

<textarea name="{$string}">{$string}</textarea>

パスワード入力

<input type="password" name="{$string}" value="{$string}" />

プルダウン

<select name="{$string}">
	<option value="">選択してください</option>
	<option value="{$string}">{$string}</option>
	<option value="{$string}">{$string}</option>
	<option value="{$string}">{$string}</option>
</select>

ラジオボタン

選択肢1
選択肢2
選択肢3

<label><input type="radio" name="{$string}" value="{$string}" /> {$string}</label>

チェックボックス

選択肢1
選択肢2
選択肢3

<label><input type="checkbox" name="{$string}" value="{$string}" /> {$string}</label>

数値入力

<input type="number" name="{$string}" value="{$string}" />

日付入力

<input type="date" name="{$string}" value="{$string}" />

日時(ローカルタイム)入力

<input type="datetime-local" name="{$string}" value="{$string}" />

時刻入力

<input type="time" name="{$string}" value="{$string}" />

検索キーワード入力

<input type="search" name="{$string}" value="{$string}" />

電話番号入力

<input type="tel" name="{$string}" value="{$string}" />

URL入力

<input type="url" name="{$string}" value="{$string}" />

メールアドレス入力

<input type="email" name="{$string}" value="{$string}" />

レンジ入力

<input type="range" name="{$string}" value="{$string}" />

色入力

<input type="color" name="{$string}" value="{$string}" />

ボタン

<button>{$string}</button>
<input type="button" value="{$string}" />
<input type="submit" value="{$string}" />

パーツモジュール

段落

見出し

文字サイズ

リンク

通常のインラインリンク

アイコン付きリンク .icon

ページ内リンク(下向き) .down

ページ内リンク(上向き) .up

戻るリンク .back

付加リンクモジュール

別ウィンドウリンク .blank

ダウンロードリンク .download

PDF .pdf

リンクリスト .anchor_links

詳細リンクリスト .more_links

ページトップリンク .page_top

その他のインライン要素

強調 strong

強勢 em

エラー表示 .error

注釈表示 .notes

リスト

通常のリスト

注釈リスト ul.notes

リストマークがないリスト ul.nomark

水平並びリスト ul.horizontal

数字リスト

定義・説明リスト

通常の定義・説明リスト

注釈定義・説明リスト dl.notes

日付入りリスト .date_list

罫線

テーブル table.def

画像置換 .imgrep

メディア別パーツ出し分け

カレント制御 .current

ソースコード .code

コピペ用ソースコード

見てるだけ用ソースコード

フォーム

フォームテーブル .form_elements

エラー表示

必須項目 .must

送信系ボタン

フォーム要素

テキスト入力

テキスト入力(複数行)

パスワード入力

プルダウン

ラジオボタン

チェックボックス

数値入力

日付入力

日時(ローカルタイム)入力

時刻入力

検索キーワード入力

電話番号入力

URL入力

メールアドレス入力

レンジ入力

色入力

ボタン