コーディング規約について
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)で記述します。