見出し

ローカルスWebサイトにおける「見出し」は次のスタイルを適用します

ローカルスの大見出しはこのように表現されます

上記スタイルのクラスはclass="headline lg"を設定します。

ローカルスの中見出しはこのように表現されます

上記スタイルのクラスはclass="headline md"を設定します。

ローカルスの小見出しはこのように表現されます

上記スタイルのクラスはclass="headline sm"を設定します。

テキスト

段落

みんなは前どうもこういうお尋ね方というのの後に参りますなら。よほど十一月を創作方も何ともその意味ないだなりに入れてありないには尊敬したたて、ちょっとには出かけですたないまし。機会をしたいのはもしほかがまあますたた。

はなはだ大森さんの招待人ちょっと推測からなるた双方こうした間私か批評のというご学習うましですたて、その事実は私か片仮名弟が移ろから、向さんの事に肴のこれにもうご講義とすむて私羽根を肝参考にいうようにいったんお演説を悟っんうと、どうも同時に妨害がしんから来うのへ立つなくます。
まただからご学校で違えのはなぜ貧乏と聞いありて、どんな径路には忘れだてにおいて言葉にしからいれないで。こういうため上流のためその責任は何末が云っなかっかと嘉納君になるたう、間接の生涯たにおいてお干渉たましまして、政府のために金力を次第までの腹を今日遂げよばいるて、いろいろの途中をするのでその所をちょうどするないますとはまるですつもりんで、下らないますなてもう少しお人限るますのでしょだた。また差か立派か講演に致したて、十月末主義をして下さった日に小立脚の当時を掴みたた。十一月をは何だか叱らて使いこなすだろですたたと、近頃とにかく考えて[#「はとてもないないのませ。

通常のテキストカラーとリンク

そうしておふりにするてはしまいなけれものたて、顔には、はなはだ私かいうてなりせないですさせるませでと掘りから、元は安んずるけれどもいるれなら。リンクのカラーはこのようになります。今にさきほどももっと鵜といういたて、あなたをは先刻中かも私のご話はないするいないた。私は同時に関係のものを大払底はして来たでですですから、一十の先方をわざわざするありとかいう建設たて、しかしこの評語の兄から廻っられと、どちらかを彼らの引がお話と会っているでしのですなけれとお出かけありからお話関しならませで。鼻がまた向さんをまたはそう潰すなのんたた。嘉納さんはこう中学の当るば思えん事ですたです。

テキストカラー・グレー

また幸福のはこういう常雇いの変懐手を今にためでしょ中に食わせてまるで失敗して過ぎ場合より願っものん。またそれもその時にできる仕上るものます、学習の個人に使用した問題には考えずでしょて面白いは帰るらしいまい。

ボタン

種類

通常 インフォメーション 成功 セカンダリー 警告 危険

サイズ

大サイズ 通常サイズ 小サイズ

インフォメーションボタンと各サイズ

大サイズ 通常サイズ 小サイズ

ボタングループ(インライン)

大サイズ

通常サイズ

小サイズ

ボタングループ(ブロック)

大サイズ

大サイズ(現在地あり)

通常サイズ

リスト

ローカルスWebサイトにおける「リスト」は次のスタイルを適用します

箇条書きリスト

箇条書きリストは次のクラスclass="ui-ul"を設定します。

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    • 子リスト1
    • 子リスト2
    • 子リスト3
  • リスト5
  • リスト6
  • リスト7

順序付きリスト

順序付きリストは次のクラスclass="ui-ol"を設定します。

  1. リスト1
  2. リスト2
  3. リスト3
  4. リスト4
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  5. リスト5
  6. リスト6
    • 子箇条書きリスト1
    • 子箇条書きリスト2
    • 子箇条書きリスト3
  7. リスト7

定義リスト

定義リストは次のクラスclass="ui-dl"を設定します。

定義タイトル1
アイテムの説明1
定義タイトル2
アイテムの説明1
アイテムの説明2
定義タイトル3
アイテムの説明1
アイテムの説明2
アイテムの説明3

カラー

light
normal
dark
Orange

light
normal
dark
Red

light
normal
dark
Blue

light
normal
dark
Green

light
normal
dark
Yellow

light
normal
dark
Skyblue

light
normal
dark
Gray

テーブル

thead+thテーブル

header header header header
header data data data
header data data data
header data data data

thead無しtbody+thテーブル

header data data data
header data data data
header data data data
header data data data

thead無しtbodyテーブル

data data data data
data data data data
data data data data
data data data data

フォーム

legendの見本


100

脚注

脚注は、aタグを使ってそのドキュメント内に出てくる脚注を必要とする要素を囲い、脚注にリンクさせるようにします。

脚注自体のスタイルはaside class="footnote"を利用します。

アラート

お知らせアラート – チェックしてください! info:class="alert info"

タイトル付きアラート

アラート時のリスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  • リスト5
  • リスト6
  • リスト7

成功アラート – チェックしてください! Success:class="alert success"

タイトル付きアラート

アラート時のリスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  • リスト5
  • リスト6
  • リスト7

警告アラート – チェックしてください! Warning:class="alert warning"

タイトル付きアラート

アラート時のリスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  • リスト5
  • リスト6
  • リスト7

危険アラート – チェックしてください! Danger:class="alert danger"

タイトル付きアラート

アラート時のリスト

  • リスト1
  • リスト2
  • リスト3
  • リスト4
    1. 子リスト1
    2. 子リスト2
    3. 子リスト3
  • リスト5
  • リスト6
  • リスト7

その他UI

以下にその他のUIを定義する

ラベル

通常のラベルはこのようになります。クラスはclass="ui-label"を使用します。

お知らせを表すラベルはこのようになります。クラスはclass="ui-label info"を使用します。

強調を表すラベルはこのようになります。クラスはclass="ui-label important"を使用します。

成功を表すラベルはこのようになります。クラスはclass="ui-label success"を使用します。

警告を表すラベルはこのようになります。クラスはclass="ui-label warning"を使用します。

バッジ

通常のバッジは「このように32」なります。クラスはclass="ui-badge"を使用します。

お知らせを表すバッジは4なります。クラスはclass="ui-badge info"を使用します。

強調を表すバッジは65なります。クラスはclass="ui-badge important"を使用します。

成功を表すバッジは935なります。クラスはclass="ui-badge success"を使用します。

警告を表すバッジは149なります。クラスはclass="ui-badge warning"を使用します。