パーツモジュール

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

段落

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

見出し

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

文字サイズ

文字サイズ指定系のクラス同士を入れ子の関係にする(例: .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>

リンク

通常のインラインリンク

通常のインラインリンク

アイコン付きリンク .icon

アイコン付きリンク

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

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

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

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

戻るリンク .back

戻るリンク

付加リンクモジュール

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

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

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

別ウィンドウリンク .blank

別ウィンドウリンク

ダウンロードリンク .download

ダウンロードリンク

PDF .pdf

PDFファイル名

リンクリスト .anchor_links

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

詳細リンクリスト .more_links

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

ページトップリンク .page_top

その他のインライン要素

エラー表示 .error

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

注釈表示 .notes

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

リスト

通常のリスト

設計基本方針 「学習しやすさを重視する。可能な限り、素のHTMLの構造のままでマークアップできるように設計する。」 に従って、通常のリストには、クラス名が与えられていません。

  • リスト内容
  • リスト内容
    • リスト内容
    • リスト内容

注釈リスト ul.notes

  • ※リスト内容
  • ※リスト内容
  • ※リスト内容
    • 通常のリストを入れ子にするパターン
    • 通常のリストを入れ子にするパターン
    • 通常のリストを入れ子にするパターン

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

  • リスト内容
  • リスト内容
  • リスト内容
    • 通常のリストを入れ子にするパターン
    • 通常のリストを入れ子にするパターン
    • 通常のリストを入れ子にするパターン

水平並びリスト ul.horizontal

水平並びリストは、ul要素によるリスト構造を水平方向に横並びにレイアウトします。リストの階層は1階層まで可能で、ネストすることはできません。

  • リスト内容
  • リスト内容
  • リスト内容
  • リスト内容

数字リスト

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

定義・説明リスト

通常の定義・説明リスト

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

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

※1 語句
定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
※2 語句
定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
※3 語句
定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
DL入れ子サンプル
定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。
DL入れ子サンプル
定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。定義や説明テキスト。

日付入りリスト .date_list

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

罫線


テーブル table.def

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

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

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

画像置換 .imgrep

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

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

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

カレント制御 .current

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

カレントページ

ソースコード .code

コピペ用ソースコード

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

<h2>ああああ</h2>

フォーム .form_elements

フォーム要素

入力項目名 入力フィールド
テキスト入力
  • 全角カナで入力してください。
  • 8文字以上入力してください。
テキストエリア入力
  • 複数行の入力ができます。
パスワード入力
  • 8文字以上入力してください。
ラジオボタン入力
  • 一つだけ選択してください。
チェックボックス入力
  • 複数選択が可能です。
リストを水平に並べるサンプル
  • この項目は、リストを水平に並べています。(.form_elements-list_horizontal を使用)
プルダウン選択入力
  • 1つだけ選択してください。
ボタン

エラー表示

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

必須項目 .must

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

送信系ボタン

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

<前へ | 次へ>

次期バージョン Pickles 2 を公開しました。もっと詳しく