リファレンス - コーディング規約

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

コーディング規約について

alter.js が変換の対象とするコンテンツは、以下のコーディング規約に準じて作成するものとします。
これらのコーディング規約により、コードが簡素化されるので、Web ページの制作や保守において、alter.jsのメリットを享受できるようになります。

HTML

  • 基本構造

1. HTML5 doctypeを記述する

HTML5 に準拠して Web ページを記述します。

<!DOCTYPE html>

2. viewport タグを記述する

<head> タグ内に以下の <meta> タグを記載します。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

3. ライブラリを読み込む

<head> タグ内で GCMF.js の JS ファイルと CSS ファイルを読み込みます。
次のコードを、他の script よりも前に配置します。

<link rel="stylesheet" href="/gcmf-1.3.0/gcmf.min.css">
<script src="/config/gcmf-config.js"></script>
<script src="/gcmf-1.3.0/gcmf.min.js"></script>
gcmf.min.js よりも前に gcmf-config.js を読み込む必要があります。

4. header, main, footer タグを記述する

HTML5 の <header> <main> <footer> タグを使用し、それぞれヘッダ―、メインコンテンツ、フッタ―を配置します。
これらのタグは HTML 内に1つだけ記述します。

<body>
    <header><!-- ヘッダー --></header>
    <main><!-- メインコンテンツ --></main>
    <footer><!-- フッタ― --></footer>
</body>

5. section タグでコンテンツを記述する

<main> タグ内のコンテンツは、コンテンツの区間ごとに <section> タグで囲みます。

<main>
    <section><!-- コンテンツ1 --></section>
    <section><!-- コンテンツ2 --></section>
    <section><!-- コンテンツ3 --></section>
</main>
モーダル要素は <main> タグの外に記述します。
6. aside タグで補助的なコンテンツを記述する

<main> と同一階層に配置した <aside> にバナーなどの補助コンテンツを記述します。
MFEditで設定すると、サイドバーとして表示できます。

<body>
    <header><!-- ヘッダー --></header>
    <main><!-- メインコンテンツ --></main>
    <aside><!-- 補助コンテンツ --></aside>
    <footer><!-- フッタ― --></footer>
</body>

CSS

1. セクションは ID セレクター・クラスセレクターを使用する

CSS セレクタで特定のセクションを指定する場合、ID セレクタークラスセレクターのいずれかを使用します。子孫セレクターや隣接セレクター、:first-child 疑似クラスなどは利用できません。

HTML例
<main>
    <section id="mainVisual"> ... </section>
    <section class="banner"> ... </section>
    <section class="news"> ... </section>
    <section class="banner"> ... </section>
</main>
使用可能な構文
#mainVisual { ... }
.banner { ... }
.news { ... }
使用できない構文
section:first-child { ... }
#mainVisual + section { ... }
main > *:nth-of-type(3) { ... }
セクション以外の要素については、セレクターの制限はありません。

JavaScript

1. グローバル変数 mf を使用しない

グローバル変数 mf は、GCMF.js が予約しているため使用できません。

2. ECMAScript 5で記述する

JavaScript は Internet Explorer 11 にも対応した構文(ECMAScript 5)で記述します。

あわせて読みたい