スマートフォン向けサイトのデザインをする
alter.jsでは、スマートフォンを主軸に構築します。パソコン向けのサイトのことを考えないのではなく、スマートフォン向けのサイト構築のあとに、考えます。
イメージが湧かない場合は、以下のコンテンツも参照の上、イメージを膨らませてみてください。
以下のコンテンツも活用ください：
コーディング規約を確認する
alter.jsは、HTMLの構造を自動で解析して、パソコン向けにレイアウトを自動調整します。そのためHTMLの書き方に決まりがあります。
詳しくは、コーディング規約を参照してください。
スマートフォン向けサイトを構築する
コーディング規約に従って、ページをコーディングしていきましょう。
GCモバイルファーストのモジュールを読み込みます。
<link rel="stylesheet" type="text/css" 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>
GCモバイルファーストの HTML 構文に従い、<header> <main> <footer>を使用して文書構造を記述します。
パソコンブラウザや、MFEdit を使って、確認する
スマートフォン向けサイトが完成したら、パソコンのブラウザで完成したページをみてみてください。変換されていますか？
MFEditを使って、レイアウトを調整する
パソコンでのレイアウトを調整するには、MFEditを使います。
MFEdit では HTML を修正しなくても、MFセクションのレイアウト調整や、カスタム CSS を追加することができます。
HTMLに直接レイアウトオプションを追加する
MFEdit を使用せず、HTML にレイアウトオプションを直接指定する方法もあります。
詳しくは、レイアウトオプションを参照してください。
レイアウトオプションファイルを書き出す
設定が終われば、MFEdit からレイアウトオプションファイルgcmf-config.jsを MFEdit からダウンロードします。
ファイルは、上書き保存をします。
動作確認
構築が終わったら、主要なブラウザで動作を確認します。
詳しくは、動作確認を参照してください。
公開
スタティックな HTML と JavaScript ファイルをウェブサーバー上に配置します。