コーディング規約 - より良い結果を得るために

alter.js を正しく、そして簡単に利用するための HTML、CSS、JavaScript のコーディング規約です。

ベストプラクティス

以下の規約は必須事項ではありませんが、コードをよりシンプル化するために推奨される事項です。

h1 〜 h3 タグを main タグ直下に記載する

見出しを <h1> <h2> <h3> タグで記述する場合は、デザイン上、可能であれば <section> タグ内に含めず、<main> タグ直下に記載します。
<main> タグ直下の <h1> <h2> <h3> タグは、1カラムとして表示されるため、その見出しに関連するセクションが複数存在するときに、見出しのレイアウト調整が不要になります。

推奨しない構文
<main>
    <section><h2> ... </h2></section>
    <section> ... </section>
    <section> ... </section>
</main>
推奨する構文
<main>
    <h2> ... </h2>
    <section> ... </section>
    <section> ... </section>
</main>

section タグを main タグ直下に配置する

<section> タグを <div> タグで囲むのを極力避け、できるだけ<main>タグ直下の同一階層に配置します。

推奨しない構文
<main>
    <div class="wrapper">
        <div class="container">
            <div class="row">
                <section> ... </section>
            </div>
            <div class="row">
                <div>
                    <section> ... </section>
                </div>
                <section> ... </section>
            </div>
        </div>
    </div>
</main>
推奨する構文
<main>
    <section> ... </section>
    <section> ... </section>
    <section> ... </section>
</main>

<div> タグで囲むのは、連続するセクションをまたぐ背景を設定する場合など、デザイン上、必要なケースにとどめます。

<main>
    <div class="background">
        <section> ... </section>
        <section> ... </section>
    </div>
    <section> ... </section>
</main>

スマホ1画面程度を1セクションにする

<section> タグの範囲の目安は、スマホの画面の半分から2画面分とします。
なお、狭い区間のセクションをたくさん作ると、スマホサイトと PC サイトとでレイアウトの差異が大きくなります。また、広い区間のセクションを作ると、縦長のコンテンツとなり、視認性が低下します。

推奨しない構文
<main>
    <section><h4> ... </h4></section>
    <section><p><img></p></section>
    <section><p><a> ... </a></p></section>
</main>
推奨する構文
<main>
    <section>
        <h4> ... </h4>
        <p><img></p>
        <p><a> ... </a></p>
    </section>
</main>

セクションの区切りタグを追加する

連続するセクション間で、文脈や内容が大きく変化する位置に、セクションの区切りを示す <hr class='mf-hr'> タグを追加します。
<hr class='mf-hr'> タグを追加すると、<hr>タグの前のセクションは右側もしくは１カラムで配置され、<hr>タグの後のセクションは左側もしくは１カラムで配置されるようになります。

推奨しない構文
<main>
    <section><!-- メインビジュアル --></section>
    <section><!-- 機能紹介 1 --></section>
    <section><!-- 機能紹介 2 --></section>
    <section><!-- 機能紹介 3 --></section>
    <section><!-- ニュース --></section>
    <section><!-- プレスリリース --></section>
</main>
推奨する構文
<main>
    <section><!-- メインビジュアル --></section>
    <hr class='mf-hr' style="display: none">
    <section><!-- 機能紹介 1 --></section>
    <section><!-- 機能紹介 2 --></section>
    <section><!-- 機能紹介 3 --></section>
    <hr class='mf-hr' style="display: none">
    <section><!-- ニュース --></section>
    <section><!-- プレスリリース --></section>
</main>
<hr> タグが水平線として表示されるのを避けるには、style 属性もしくは CSS で非表示にします。

リストを ul タグで記述する

画像リストやリンクリストなどのリスト要素は<ul>タグで記述します。
<section>タグ内にある<ul>タグは、リストの横並び配置(mf-list-col-*)によるレイアウト調整が可能です。
MFEdit を利用すれば、レイアウト調整をするために HTML を修正する必要がありません。

推奨しない構文
<section>
    <div><img></div>
    <div><img></div>
    <div><img></div>
    <div><img></div>
</section>
推奨する構文
<section>
    <ul>
        <li><img></li>
        <li><img></li>
        <li><img></li>
        <li><img></li>
    </ul>
</section>
入れ子になった <ul> タグは、横並びレイアウトの対象にはなりません。

フォーム項目は dl タグで記述する

次のように記述することで、フォームを2カラムレイアウトで配置できます。

  • フォームの項目名は<dt>タグ、フォームコンポーネントは<dd>タグで記述します。
  • 同一の項目を<div>タグで囲みます。
  • 項目名が存在しないチェックボックスやサブミットボタンの場合は、<dl>タグを使用せず、任意のタグで記述します。
  • <section>タグを<form>タグで囲みます。
推奨する構文
<main>
    <!-- form タグは section タグを囲むように配置します。 -->
    <form>
        <section>
            <dl>
                <div>
                    <dt><!-- 項目名 --></dt>
                    <dd><!-- inputタグや説明など --></dd>
                </div>
            </dl>
            <p><input type="submit"></p>
        </section>
    </form>
</main>

PC 向けのメディアクエリーを記述しない

CSS はスマホ用に記述し、PC ブラウザやタブレット用のメディアクエリーを記述する必要はありません。
PC 向けのレイアウト調整は、GCMF.js が行います。

メディアクエリーと GCMF.js のレイアウト変換を併用することも可能です。その場合、対象のセクションに mf-disable オプションを指定します。

header, section, footer に背景を設定する

ヘッダーやフッターに背景色・背景画像を指定する場合は、<header>タグ、もしくは<footer>タグに対して直接 background プロパティを設定します。
セクションに背景色・背景画像を指定する場合も、<section>タグに対して直接 background プロパティを設定します。

推奨しない構文
<section id="mainVisual">
    <div class="wrapper">
        ...
    </div>
</section>

#mainVisual > .wrapper { background: ... }
推奨する構文
<section id="mainVisual">
    ...
</section>

#mainVisual { background: ... }

上下方向のマージン・パディングの指定方法を統一する

セクションに対して以下の CSS プロパティを設定する場合、統一的なルールに基づいて値を設定します。

  • margin-top
  • margin-bottom
  • padding-top
  • padding-bottom

たとえば、連続するセクションでは margin-top と margin-bottom の値を同じ値に設定したり、上下方向のマージンはすべて margin-top のみで調整するなどです。

フォームは div タグにボーダー・上下マージンを指定する

フォームで項目と項目の間にボーダーを指定したり、マージンを指定したりする場合は、<dt> <dd>ではなく<div>に対して設定します。

HTML例
<dl class="form">
    <div>
        <dt> ... </dt>
        <dd> ... </dd>
    </div>
    <div>
        <dt> ... </dt>
        <dd> ... </dd>
    </div>
</dl>
推奨しない構文
.form > div > dd { border-bottom: ... ; margin-bottom: ... ; }
推奨する構文
.form > div { border-bottom: ... ; margin-bottom: ... ; }

mf-* クラスや data-mf-* 属性を使用しない

mf- から始まるクラス名および、data-mf- から始まる属性は alter.js が予約しているため、HTML や CSS ではこれらを使用せずにコーディングします。
なお、予約済みのクラスや属性を利用すると、予期せぬ動作をしたり、バージョンアップ時にコンテンツの変更が必要になったりすることがあります。

推奨しない構文
<main>
    <section class="mf-news-section"> ... </section>
</main>
推奨する構文
<main>
    <section class="news-section"> ... </section>
</main>

スライダーは Slick.js, Swiper を使用する

スライダーのレイアウト調整機能は、Slick.js と Swiper のみに対応しているため、いずれかを使用します。