UIエレメント - 基本
- expand_moreタイトル
- expand_moreテキスト
- expand_moreリスト
- expand_moreボタン
- expand_moreアラート
- expand_moreバッジ
- expand_moreステップバー
- expand_more画像
- expand_moreアイコン
タイトル
タイトル
H1～H6タグで文字サイズ変更。
Hタグ内にsmallタグを入れるとサブタイトルが付きます。
基本
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
ダーク+ .el_ttl_bg__dark
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
下線付きタイトル.el_ttl_underLine
基本.el_ttl_underLine
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
ダーク+ .el_ttl_underLine__dark
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
左線付きタイトル.el_ttl_leftLine
基本.el_ttl_leftLine
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
ダーク+ .el_ttl_leftLine__dark
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
背景ありタイトル.el_ttl_bg
基本.el_ttl_bg
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
ダーク+ .el_ttl_bg__dark
H1タイトルサブタイトル
H2タイトルサブタイトル
H3タイトルサブタイトル
H4タイトルサブタイトル
H5タイトルサブタイトル
H6タイトルサブタイトル
ボックス内のヘッダタイトル.el_ttl_box
H4タイトル.el_ttl_box
ボックス内のテキスト
H4タイトル+ .el_ttl_box__dark
ボックス内のテキスト
テキスト
本文.el_txt_body
基本.el_txt_body
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
ダーク+ .el_txt_body__dark
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
サブテキスト.el_txt_sub
基本.el_txt_body
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
ダーク+ .el_txt_body__dark
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
注釈.el_txt_notes
インデントなし（初期）.el_txt_notes
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
インデントあり.el_txt_notes + .el_txt_notes__indent
※親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
ダーク.el_txt_notes__dark
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）
テキストリンク.el_link_txt
基本.el_link_txt
新規ウィンドウ+ .el_link_txt__newWindow
右矢印アイコン+ .el_link_txt__arrowRight
下線なし+ .el_link_txt__noUnderline
リスト
シンプル.bl_list
基本.bl_list
- リスト1
- リスト2
- リスト3
- サブリスト1
- サブリスト2
- サブリスト3
- リスト4
番号付き+ .bl_list__order
- リスト1
- リスト2
- リスト3
- サブリスト1
- サブリスト2
- サブリスト3
- リスト4
アイコン付き+ .bl_list__icon
- navigate_nextリスト1
- navigate_nextリスト2
- navigate_nextリスト3
- arrow_rightサブリスト1
- arrow_rightサブリスト2
- arrow_rightサブリスト3
- navigate_nextリスト4
スタイルなし+ .bl_list__noStyle
- リスト1
- リスト2
- リスト3
- サブリスト1
- サブリスト2
- サブリスト3
- リスト4
日付リスト.bl_dateList
dl,dt,ddで構成し、お知らせなどに利用します。
基本.bl_dateList
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
ラベルあり日付リスト+ .bl_dateList__label
日付の後にラベルを付ける場合はdata属性「date-label」を利用してください。
dt要素にラベルカラーを指定することができます。
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
- 2023年10月01日
- タイトルが入りますテキストダミーテキストダミー
ラベルカラー一覧
| 指定なし | デフォルト |
| bl_dateList_label__primary | プライマリ |
| bl_dateList_label__secondary | セカンダリ |
| bl_dateList_label__success | 成功 |
| bl_dateList_label__info | インフォメーション |
| bl_dateList_label__danger | 危険（エラー） |
| bl_dateList_label__warning | 警告 |
ボタン
基本
a,buttonタグに.el_btn + .el_btn__XXXXXX記述。 .el_btn__rounded追記で角丸になります。
| el_btn | デフォルト |
| el_btn + el_btn__primary | プライマリ |
| el_btn + el_btn__secondary | セカンダリ |
| el_btn + el_btn__success | 成功 |
| el_btn + el_btn__info | インフォメーション |
| el_btn + el_btn__danger | 危険（エラー） |
| el_btn + el_btn__warning | 警告 |
枠線
a,buttonタグに.el_btn + .el_btn__outline__XXXXXX記述。
| el_btn + el_btn__outline | デフォルト |
| el_btn + el_btn__outline__primary | プライマリ |
| el_btn + el_btn__outline__secondary | セカンダリ |
| el_btn + el_btn__outline__success | 成功 |
| el_btn + el_btn__outline__info | インフォメーション |
| el_btn + el_btn__outline__danger | 危険（エラー） |
| el_btn + el_btn__outline__warning | 警告 |
アイコン付き
基本や枠線のスタイルに.el_btn__icon追記。
文字前アイコン初期
文字後アイコン.el_btn__icon__after 追記
ボタングループ
ボタンを連続で置くためのブロック。
ボタンを覆う要素（divなど）に.bl_buttons記述。
基本（横並び）.bl_buttons
縦並び+ .bl_buttons__column
均等配置+ .bl_buttons__spaceBetween
中央配置+ .bl_buttons__center
アラート
基本
.el_alert 記述。
不要であれば「アイコン」「アラート本文」「閉じるボタン」は要素ごと削除可能です。
アイコンなし
初期のスタイル
追記クラスなし。本文が入りますテキストダミー。
プライマリ
.el_alert__primaryを追記してください。
セカンダリ
.el_alert__secondaryを追記してください。
成功
.el_alert__successを追記してください。
インフォメーション
.el_alert__infoを追記してください。
危険（エラー）
.el_alert__dangerを追記してください。
警告
.el_alert__warningを追記してください。
アイコンあり
初期のスタイル
追記クラスなし。本文が入りますテキストダミー。
プライマリ
.el_alert__primaryを追記してください。
セカンダリ
.el_alert__secondaryを追記してください。
成功
.el_alert__successを追記してください。
インフォメーション
.el_alert__infoを追記してください。
危険（エラー）
.el_alert__dangerを追記してください。
警告
.el_alert__warningを追記してください。
バッジ
基本
ステップバー
.bl_progressBar + bl_progressBar__[0] 記述。
[0]の部分にはSTEPの総数を入れてください。（2～10まで用意しています）
- li.is_complete
- li.is_active
- テキスト
- テキスト
画像
アスペクト比.el_img_ratio
特定の比率でトリミングしたい場合に利用。
1:1+ .el_img_ratio__1x1
3:2+ .el_img_ratio__3x2
4:3+ .el_img_ratio__4x3
16:9+ .el_img_ratio__16x9
黄金比+ .el_img_ratio__gold
アイコン
Google Fonts
アイコンはGoogle Fonts「Material Icons」を利用しています。
下記URLにアイコンのサンプルとコードが一覧で表示されるのでこちらを参考にしてください。
https://fonts.google.com/icons?icon.style=Filled&icon.set=Material+Icons