仕様
class値の命名ルール
デバイス専用class値
画面幅の分岐により有効/無効となる。
- 幅600px以上の画面（PC・タブレット）のみで有効 : 先頭が _ （アンダースコア一つ）
- 例: <img class="_fit_width">
例: <br class="_">
一つ目はclassの有効/無効を、二つ目は要素の表示/非表示の切り替え - 幅599px以下の画面（主にスマートフォン）のみで有効 : 先頭が __ （アンダースコア二つ）
- 例: <img class="__fit_height">
例: <br class="__">
一つ目はclassの有効/無効を、二つ目は要素の表示/非表示の切り替え
JSと連携しているパーツ
これらのパーツは連携しているJSを読み込まないと正しく表示・動作しません。
class="_scrollToTop_"
ユーティリティクラス一覧
レイアウトや文章表現の細部でよく使われる機能を、class定義しています。
style_elements_a.css に記述
| 全メディア適用 | desktop PC・iPad画面向け (min-width: 600px) |
mobile スマートフォン画面向け (max-width: 599px) |
|
|---|---|---|---|
| 表示形態 | |||
| 排他的表示 | - | _ （アンダースコア一つのみ）
例: <br class="_"> 当該HTML要素を |
__（アンダースコア二つのみ）
例: <br class="__"> 当該HTML要素を |
| display: none; | disp_none | _disp_none | __disp_none |
| display: inline-block; | inline_block | - | - |
| 書体・タイポグラフィー | |||
| セリフ（明朝体）に | serif | - | - |
| サンセリフ（ゴシック体）に | sans_serif | - | - |
| 文字サイズ極小 | text_small | _text_small | __text_small |
| 文字サイズ小 | text_brief | _text_brief | __text_brief |
| 見出しと同等の文字サイズ | h2 (クラス値であることに注意) h3 (クラス値であることに注意) h4 (クラス値であることに注意) |
- | - |
| 字詰め font-feature-settings: "palt"; |
font_feature_palt | - | - |
| 字詰め font-feature-settings: "pkna"; |
font_feature_pkna | - | - |
| 字詰め font-feature-settings: "pwid"; |
font_feature_pwid | - | - |
| 行における文字の均等配置 text-align: justify; および text-justify: inter-ideograph; |
text_justify | _text_justify | __text_justify |
| white-space: nowrap; | nowrap | - | - |
| word-break: break-all; | word_break_all | - | - |
| word-break: break-word; | word_break_word | - | - |
| font-style: oblique; | .italic または
.oblique |
- | - |
| font-style: normal; | .font-normal | - | - |
| text-decoration: underline !important; | .underline | - | - |
| text-decoration: overline !important; | .overline | - | - |
| レイアウト | |||
| text-align: center; | align_center | _align_center | __align_center |
| text-align: right; | align_right | _align_right | __align_right |
| text-align: left !important; | align_left | _align_left | __align_left |
| vertical-align: top; | valign_top | _valign_top | __valign_top |
| vertical-align: middle; | valign_middle | _valign_middle | __valign_middle |
| vertical-align: bottom; | valign_bottom | _valign_bottom | __valign_bottom |
| 上マージンを打ち消す
margin-top: 0 !important; |
margin_top_none | _margin_top_none | __margin_top_none |
| 下マージンを打ち消す
margin-bottom: 0 !important; |
margin_bottom_none | _margin_bottom_none | __margin_bottom_none |
| 上下マージンを打ち消す
margin-top: 0 !important; および margin-bottom: 0 !important; |
margin_vside_none | _margin_vside_none | __margin_vside_none |
| 右マージンを打ち消す
margin-right: 0 !important; |
margin_right_none | _margin_right_none | __margin_right_none |
| 左マージンを打ち消す
margin-left: 0 !important; |
margin_left_none | _margin_left_none | __margin_left_none |
| 左右マージンを打ち消す
margin-right: 0 !important; および margin-left: 0 !important; |
margin_hside_none | _margin_hside_none | __margin_hside_none |
| 上マージンを標準テキスト２行分に | margin_top_double | _margin_top_double | __margin_top_double |
| 下マージンを標準テキスト２行分に | margin_bottom_double | _margin_bottom_double | __margin_bottom_double |
| 上下マージンを標準テキスト２行分に | margin_vside_double | _margin_vside_double | __margin_vside_double |
| 上マージンを5pxに | margin_top_little | _margin_top_little | __margin_top_little |
| 下マージンを5pxに | margin_bottom_little | _margin_bottom_little | __margin_bottom_little |
| 上下マージンを5pxに | margin_vside_little | _margin_vside_little | __margin_vside_little |
| 要素の幅と高さ | |||
| 横幅を最大に | width_max | _width_max | __width_max |
| 横幅を75%に | width_medium | _width_medium | __width_medium |
| 横幅を半分に | width_half | _width_half | __width_half |
| 横幅を3分の1に | width_one_third | _width_one_third | __width_one_third |
| 横幅を25%に | width_quarter | _width_quarter | __width_quarter |
| 横幅を固定幅に ※ただしこれは設定例 |
width_fix640
width_fix800 width_fix1024 |
_width_fix640
_width_fix800 _width_fix1024 |
__width_fix640
__width_fix800 __width_fix1024 |
| 画像の幅を親要素にあわせる | figure.fit_width
img.fit_width |
figure._fit_width
img._fit_width |
figure.__fit_width
img.__fit_width |
| 画像の高さを親要素にあわせる | figure.fit_height
img.fit_height |
figure._fit_height
img._fit_height |
figure.__fit_height
img.__fit_height |
| 画像の幅を標準幅に ※PCでは成行き幅 初期値 |
figure.width_std
img.width_std |
- | - |
| 画像の高さを標準高さに ※PCでは成行き幅 初期値 |
figure.height_std
img.height_std |
- | - |
| リスト | |||
| リストのインデントを0にする | ol.indent_none
ul.indent_none |
- | - |
| li項目の上下間隔をやや詰める | ol.tight
ul.tight |
- | - |
| list-style: none; | ol.style_none
ul.style_none |
- | - |
| list-style-type: disc; | ol.disc
ul.disc |
- | - |
| list-style-type: circle; | ol.circle
ul.circle |
- | - |
| list-style-type: square; | ol.square
ul.square |
- | - |
| list-style-type: lower-roman; | ol.lower_roman
ul.lower_roman |
- | - |
| list-style-type: upper-roman; | ol.upper_roman
ul.upper_roman |
- | - |
| list-style-type: lower-greek; | ol.lower_greek
ul.lower_greek |
- | - |
| list-style-type: upper-greek; | ol.upper_greek
ul.upper_greek |
- | - |
| list-style-type: lower-alpha; | ol.lower_alpha
ul.lower_alpha |
- | - |
| list-style-type: upper-alpha; | ol.upper_alpha
ul.upper_alpha |
- | - |
| list-style-type: decimal; | ol.decimal
ul.decimal |
- | - |
| list-style-type: decimal-leading-zero; | ol.decimal_leading_zero
ul.decimal_leading_zero |
- | - |
| テキストデコレーション | |||
| メモ | note | - | - |
| コメント | comment | - | - |
| 注意 | notice | - | - |
| おすすめ | recommend | - | - |
| 新着 | arrival | - | - |
| 利用可能 | available | - | - |
| 利用不可 | disabled | - | - |
| 安全 | safety | - | - |
| 補完要素 | |||
| ショルダーテキスト（見出し上の小テキスト） | ahead_title sub_title |
_ahead_title _sub_title |
__ahead_title __sub_title |