Web開発の進捗とメモ4

2019-08-26

PC用のスタイルシート

　モバイル用のCSSファイルが最低限整備できた、ということでPC用のスタイルシートを整備してみる。

　基本的にはモバイル用のCSSに書いたことを写すことになる。が、PC用CSSでは一部のdivタグの大きさをpxで指定することになる。このサイトのモバイル用CSSでは各種レイアウトや文字のサイズは全て画面幅に対する比(例えば4vwというサイズは画面横幅に対して4%という意味)で指定している。もしこれをPC用CSSにも適用した場合、数Kの大きなモニタなどでは不必要なほどにでかい表示になる可能性があるため、絶対的なサイズであるpxで指定するのである。とはいってもこの場合にもさじ加減が難しく、研究室にあるPCのモニタでは解像度が小さいためにサイトは左右キツキツに表示され、家にあるモニタでは解像度が大きすぎるためにサイトは画面中央にポツンと表示される。丁寧に構成されたWebサイトではこういったところもメディアクエリで解決していたりするのだろうか。

　後はフォントの調整も行った。個人的にメイリオはあまり好きではないので、Google FontsからNoto Sansを読み込んで表示させた。ついでに文字色も#000000だとコントラストがきついので#333333に変更した。

フッターが浮いてくる問題

　今までトップページ(?)にはフッターを表示しなかった。これは単純な理由で、トップページの文章量が少なすぎてフッターが画面の中央まで浮き上がってくるからだ。とはいえ、これを放置するのもなんとも言えないので色々調べてみた。

　CSS内でpositionをfixedにするだとかabsoluteにするだとか、さらにはjavascriptを使うだとかいった情報があったが今回はフレックスボックスの導入を試してみた。

　フレックスボックスはCSS3で初めて実装されたもので、名前の通り柔軟にレイアウトを行うための機能である。メニューが横並びになっていて画面サイズに応じて二段になる、これもフレックスボックスが使われている。画面全体を一つのボックスとみなし、そのボックスをきれいに満たすようにレイアウトを設定することでフッターを浮かせないようにすることができた。

HTML構造の見直し

　なんとなくで使っていたセクションタグ(article, section, header, footer)をちゃんと構造化させた。

　bodyタグのすぐ後にpageというクラスの箱(所謂wrapper)を置き、header, article, footerを配置する。実際はもう少し詳細な決め事をしたが、それだけでhtmlファイル自身や開発者ツールが見やすくなった。現在htmlファイルの編集に使用しているNotepad++ではhtmlのタグを自動で検知し、折りたたむことができるので編集作業を行う際にも非常に便利である。

　個人的にやっているこの規模のサイトならまだしも、企業のようなデザイン重視のサイトならこういった機能は非常に有用に働くだろうということをしみじみと感じた。