ガイドライン

基本構造について

全てのテンプレートにおいて共通で配置されるFlame、Flameの中を目的に沿ったレイアウトで組むためのBox、そしてBoxの中に表現要素として配置されるParts、この3つの概念によって構成されます。

Flame

全てのページにおいて共通の枠となるフレームです。

<body>
    <div class="wrapper">
        <div class="global">
            Box
        </div>
        <div class="main">
            <div class="header">
                Box
            </div>
            <div class="content">
                Box
            </div>
        </div>
    </div>
    <div class="modal">
        Box
    </div>
</body>

ログインページのみ例外となります。

Box

Flameの中に配置される要素です。レイアウトを構築します。

<div class="b1">
    <div class="b2">
        Parts
    </div>
</div>

BoxのルールについてはBoxについてを参照してください。

Parts

Boxに内包される要素です。Boxによって構築されたレイアウトの中に配置されます。

<span class="pa-text">
    あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
</span>

Partsの種類についてはPartsページを参照してください。

Flameについて

bodyの直下に配置されるwrapperと、それと同階層に存在するmodalで構成されます。

wrapperとmodalは、それぞれがスクロール領域を持っており、基本的にはwrapper階層でのスクロールが主となります。modalが出現している間はmodalが上位レイヤーになり、modal階層でのスクロールとなります。

wrapper 階層について

wrapperの中はグローバルナビゲーション要素が配置される、global階層と、表示されたページの主なコンテンツが配置されるmain階層に分かれ、main階層はheader階層と、content階層の2つで構成されています。

headerにはグローバルナビゲーションを表示させるためのメニューや、現在滞在しているページを示すパンくず、ログインユーザーを示すユーザーアイコンなどで構成されます。contentにはそのページの主たるコンテンツが配置され、画面を作成する際は基本的にこのcontent領域の中を編集します。

modal 階層について

アラートやポップアップ画面など、wrapper階層にグレースケールがかかり、その上に表示される画面がmodal階層となります。

modalの呼び出し方については、iframe方式とtoggle方式があります

Boxについて

Flameにあたる、globalheadercontentmodalの中にレイアウトを構成します。

Boxはb1b2の2つで1セットの要素です。2つで1セットというように、b1の直下には必ずb2が配置されます。同階層でb2が並ぶことは可能で、更にレイアウトを細かく構築するためにb2の中に次のセット（b1b2）を配置しながら、目的のレイアウトを構築します。

b2の中に並列してb1が入ったり、b1の直下にb1が入ったりすることはできません。

正しいパターン

<div class="content">
    <div class="b1">
        <div class="b2"> …………… 同階層に<b2>は存在してもよい。
            Parts
        </div>
        <div class="b2"> …………… 同階層に<b2>は存在してもよい。
            <div class="b1">
                <div class="b2">
                    Parts
                </div>
            </div>
        </div>
    </div>
</div>

<b1>の中に、<b2>は並列して入ってもよい。

間違ったパターン①

<div class="content">
    <div class="b1">
        <div class="b2">
            <div class="b1"> …………… 同階層に<b1>が存在してはいけない。
                <div class="b2">
                    Parts
                </div>
            </div>
            <div class="b1"> …………… 同階層に<b1>が存在してはいけない。
                <div class="b2">
                    Parts
                </div>
            </div>
        </div>
    </div>
</div>

<b2>の中に、<b1>は並列して入ってはいけない。

間違ったパターン②

<div class="content">
    <div class="b1">
        <div class="b1"> …………… <b1>の直下に<b1>が存在してはいけない。
            <div class="b2">
                Parts
            </div>
        </div>
        <div class="b2">
            <div class="b1">
                <div class="b2">
                    Parts
                </div>
            </div>
        </div>
    </div>
</div>

<b1>の子階層に、<b1>は入ってはいけない。

間違ったパターン③

<div class="content">
    <div class="b1">
        <div class="b2">
            <div class="b2"> …………… <b2>の直下に<b2>が存在してはいけない。
                Parts
            </div>
        </div>
        <div class="b2">
            <div class="b1">
                <div class="b2">
                    Parts
                </div>
            </div>
        </div>
    </div>
</div>

<b2>の子階層に、<b2>が入ってはいけない。

Partsについて

Boxによって構築されたレイアウトの中に配置される要素です。
テキスト要素やボタン要素、インプット要素といった具体的な要素を指します。

data-attrについて

data-attrはパーツの中身を構成するインライン要素で、texticonimagelistの４種類があります。
基本的にはテキストパーツやアイコンパーツと同様のDOMで作成されますが、class属性ではなくdata-attr属性として扱われます。

例えばボタンパーツなどは、アイコン要素だけで表現されるボタンもあれば、アイコン要素＋テキスト要素の２つで表現されるボタンもあります。
それらはパーツとしては同一のものですが、 ”中身を構築する要素” は異なります。
data-attr属性は、その ”中身を構築する要素” の違いをルール化し、汎用的にするために設けられた属性です。

<div class="pa-button">
    <a href="#">
        <i class="bi-apple" data-attr="icon"></i>
        <span data-attr="text">ボタン</span>
    </a>
</div>

Partsの種類については、各種Partsページを参照してください。