BEMの導入

　無事にレスポンシブデザインを導入できる状態になったわけなので、レイアウトもへったくれもない状態のスタイルシートを真面目に構築してみることに。今回は色々調べる過程で知ったBEM(Block Element Modifier)を導入してみた。決して妖怪人間の方ではない。

　htmlのあらゆる要素をどのようにレイアウトするかを決めるものがスタイルシートである。h1やp、divといったタグ全般からidやclassという符号を振り分けた(ほぼ個別の)要素にまで配置、配色、サイズ、フォントといった設定を行うことができる。しかし、例えばdivタグ全般についての設定と、「footer」というclassを名付けたdivへの設定とが競合するといったことがコーディングの過程で頻繁に起こる。このような問題がなるべく起こらないように、classに対して厳密な命名規則を課すものがBEMである。

　BEMの詳細についてはググればいくらでも調べることができる。とりあえずその規則に従ってスタイルシートの再設定を行ってみたが、なかなかどうして想像以上にレイアウトの構造設計がよく見えるようになった。頭の中で考えたレイアウトをどのようにコーディングするかということを非常に考えやすくなったので万々歳である。

ヘッダをいじってみる

　モバイル向けのサイトによくあるヘッダになるように試行錯誤してみた。

　まずはheaderと命名したdivを用意し、幅が100%になるようにサイズを設定した。ここでposition:fixed;を指定すると、スクロールに対して位置が変わらない(下にスクロールしても消えない)ので最低限の骨組みは完成である。

　このdivの中に6vw(viewportの横幅に対して6%のサイズ)で「OrientalAist.com」というタイトルをセンター位置に入れ、上下に4vwのpaddingを導入することで縦幅14vwのヘッダの完成である。なお、ヘッダとフッタの配色はarXivを参考にしてみた。ページタイトルのフォントは一丁前げにGoogle FontsからWebフォントとして引っ張ってきている。

その他の調整

　文字サイズの設定は基本的にBEMにおける各Elementで指定することにした。ただし、例外としてpタグだけは全般の設定として文字サイズ4vwと行間設定160%をつけた。

　ページのタイトルと更新日に対して独自のレイアウトを施し、セクションのタイトルにも下線を付けた。

　後はHTML5の規格に則る形でセクションタグであるarticle, header, footer, sectionタグを導入している(sectionはまだ完全に指定できていないが)。

　最後に、TwitterでURL付きのツイートをすると特殊なリンクが表示される、Twitterカードと呼ばれるもののの設定を行って、最低限のデザインができたといったところである。

　気にしだせばいくらでも凝る場所は出てくるものだが、ここまでできただけでも結構な達成感である。ただ、ここまでの設定は全てモバイル表示へのものであるため、PCでサイトを開くと全く脚色されていない原初のようなWebページが表示されるわけだが…。PCサイズへの調整や、タブレット向けの調整もおいおいやっていこうかといったところである。