概要

マルチカラムクラス名 の大まかな区分

プレフィックス 概要 旧名称
lx_ スタイルを設定するために使用する layout_ ※1
ux_ jsで変更・エフェクト・アニメーション効果等をあたえるもの
(性質上、ux_の次に動詞が来る場合が多数となる)
layout_ ※1
hx_ ヘッダーの各領域を指定する layout_header_ ※2
fx_ フッターの各領域を指定する layout_footer_ ※2
ox_ プラグインの各領域を指定する layout_other_
ax_
area_
その他の領域、ヘッダーフッター等の最上位領域を指定する area-、area_ ※2

※1 プレフィックス以外が同じ名称を、lx_とux_で設定しても良い。

   例:ux_accordionでjs・cssでアコーディオンの基本機構とスタイルを設定

     lx_accordion_01でcssでアコーディオンのスタイルを設定。(02等があってもよい)

 

※2 area_footerをfxのみにすると、コンフリクトの危険性が上がってしまう為。

適用範囲に対する区分

カラム・マルチカラム(パーツを含まない)

プレフィックス 対象 旧名称
lx_col_ カラム・マルチカラム layout_column等
layout_column_inner_等
※3
lx_col1~
lx_col5
第1カラム~第5カラム
特定のカラムのみが対象の場合
layout_column等
lx_mcol_ マルチカラム
マルチカラム全体に背景・枠などを設定する場合
layout_column等
layout_column_outer_等
lx_mcol1~
lx_mcol5
マルチカラム1~5
特定のマルチカラムのみが対象の場合
layout_column等

※3 マルチカラム(親カラム)とカラム(子カラム)両方に設定する場合も含め、主体としてどちらを対象するか?、でプレフィックスを決定する。

   例:マルチカラムに灰色背景とパディング設定し、各カラムは白色背景とする場合は、lx_col_・・・にする。
   (旧layout_column_innerの設定)

   例:マルチカラムに灰色枠とパディング設定し、各カラムは枠線・背景で区切られれないスタイルとする場合は、lx_mcol_・・・にする。
   (旧layout_column_outerの設定)

   例:ワイドモードで、横幅いっぱいまでの背景画像を設定する場合は、lx_mcol_・・・・にする。

パーツ(カラム・マルチカラムを含まない)

プレフィックス 対象 旧名称
lx_teaser_ バナー(内部・外部・ダウンロード) layout_teaser_等
lx_list_
lx_linklist_
リンクリスト layout_linklist_等
lx_text_ テキストと画像
lx_text_img_ テキストと画像内の画像
lx_hitext 囲み線付きテキスト
lx_anchor ページ内リンク
lx_arealink_ エリアリンク(内部・外部・ダウンロード)
lx_table_ 表組・表組(tableタグ)・テーブル縦・テーブル横
lx_graph_ グラフ・財務ハイライト(グラフ)・配当金(グラフ)
lx_cke_ リッチテキストエディタ内
lx_multi2_
lx_bascilist_
マルチ2一覧
※マルチ2(ページ・テンプレート)を対象とするものは、
 原則マルチカラクラス名のみで解決しえない為、lx_multi2listとする必要はない

カラム・マルチカラムとパーツ両方に設定

プレフィックス 旧名称
lx_combo_
lx_set_
lx_style_等
パーツとカラムをまとめて設定する場合
カラムの設定と、特定のパーツの組み合わせが必要な場合


※lx_box_は、マルチカラムのみ・カラムのみと混同しやすい為、なるべく使用しない。

付帯規則

  • 原則、マルチカラムクラス名には、プレフィックスを付けなければならない。
  • プレフィックスはなるべく上記のものを用いる事が望ましいが、上記以外のプレフィックスも可とする。
  • 上記のプレフィックスは、特段の事情が無い限りマルチカラムクラス名以外で用いてはならない。
    具体的にはhtml記述内にて、上記のプレフィックスを使用してはならない。(ダミーの設置は、特段の事情に該当する)

 

装飾的クラス名

  • 主とするマルチカラムクラス名に対して、装飾的なクラス名を付ける場合、プレフィックスが無いものも可とする。
  • ただし、装飾的クラス名単体にjs・cssを設定する事は禁止する。
  • 必ず、装飾的クラス名は、常にプレフィックスを持つマルチカラムクラス名と共に設定する事。

 

例: 見出しh2を枠線で囲む lx_title2_border01 が設定されている場合、

   装飾的クラス名 bg_gray を一緒に設定する事で、背景色が灰色になる設定を組む事を可とする。
   これにより、背景色以外が異なる設定を別々に設定する必要がなくなり、よりシンプルな設定が可能になる。

   同様に、bg_blue等の設定をしても良い。

 

ただし、bg_grayは、常にlx_title2_border01と共に設定されなければならない。

cssでの記述は、.lx_title2_border01.bg_gray とand条件で設定し、.bg_gray での設定をしてはならない。

 

もし、lx_title2_border01の影響を受けずに、スタイル設定したい場合は、

bg_grayではなく、lx_title2_bg_grayとする事。

なお、その場合、lx_title2_border01 lx_title2_bg_gray を同時に設定する事を禁止しない。

cssでの記述も、.lx_title2_border01.lx_title2_bg_gray とand条件で設定する事を可とする。

上記例のケースを、整理すると、、、

マルチカラムクラス名設定 CSS セレクタ スタイル
lx_title2_border01 .lx_title2_border01 囲み線
lx_title2_border01 bg_gray .lx_title2_border01.bg_gray 囲み線+灰色背景
lx_title2_border01 bg_blue .lx_title2_border01.bg_blue 囲み線+青色背景
禁止 bg_gray .bg_gray 灰色背景
lx_title2_bg_gray .lx_title2_bg_gray 灰色背景
lx_title2_border01 lx_title2_bg_gray .lx_title2_border01.lx_title2_bg_gray 囲み線+灰色背景

 

 

エクステンション

一部を、「エクステンション」として再定義します。

マルチカラムクラス名は、マルチカラムに手動で設定するクラス名全てを指します。

なお、クラス名なので、スペースで区切って複数記述できます。

 

エクステンションは、以下の特徴を持ちます。

  • カラムやパーツのスタイルを変更する効果を持ちます。
  • プリミティブで、シンプルな、名称と効果を持ちます。
  • エクステンションを組み合わせて使用する事が可能です。
  • メインエリア内での使用を前提としています。
  • マザー・プリセットに含まれ、原則、共通仕様となります。
  • 原則、cssの変更を行いません(受け付けません)。
  • 微調整が出来ない・行わないわけではありませんが、既存のエクステンションを異なるスタイルにするのではなく、新たなエクステンションを追加する事を原則とします。