保守性向上のため、できるだけシンプルな構成とし、ファイル数を減らす
- SPAに使われるVue.jsを採用した
- index.htmlのarticleタグの表示を切り替えてSPA型のサイトとした
- index.html, style.css, script.js + Vue.js(外部サーバ) + img/(画像)の最小構成で作成
検索エンジン最適化(SEO)のため、Vue.jsのテンプレート記法などがクローラから見えないようにする
- CSSのflexboxとorderを用いて、上部にあるnavタグのメニューをHTMLファイルの最下部に記述した
クローラを含むJavaScript非対応の環境や、外部サーバからのスクリプト(Vue.js)読み込みを拒否した場合でも閲覧できるようにする
- スクリプトなしでもindex.htmlを閲覧可能にした
PCだけでなくスマートフォンにも対応する
- CSSのflexboxによるレスポンシブデザインを採用した
各ページに固有のURLを付与し、URL直打ちでも各ページを参照可能にする
- 「index.html#xxx」などhash付きのURLで、各ページを参照可能とした
- script.jsにhashの一覧を記述し、articleタグのv-showにページ切り替え条件を記述した
- articleタグのidにhashを記述できれば綺麗だが、ページ切替時に見出しの位置に移動してしまう
配色をBoard Game Japanに合わせたものとする
- 和色大辞典を参照し、紺藍(#4a488e)を基調色にした
- 「勝負」なので菖蒲色(#674196)を使うのが理想だが、やや紫色が強く使いづらい
- style.cssではCSS3の変数を用い、色のハードコードを除去した