サイトのスタイルを調整した
微妙にサイトのスタイルを調整した。
- フォントサイズを
clamp()で可変にしていたが、止めた。iPhone の標準フォントサイズに合わせて17pxのみを決め打ちしている- 昔はピクセル指定止めろみたいなのよく言われてたけど、もう最近どうでも良くなっている
- ヘッダの色味を少しだけ変えた
- 完全に気分
- ヘッダ部分で
position: absoluteを使った2カラムにしていたのが気に食わなくなったので、HTML 構造から書き換えて CSS Grid にした - 横並びのリストで
display: inline-blockを使っているのが気に食わなくなったので、CSS Grid (display: inline-grid) にした- パンくずリストだけは数が可変するので
inline-blockのまま
- パンくずリストだけは数が可変するので
- iPhone や Mac 環境で Over Scrolling する際の「はみ出る部分の色」を付けるようにした
- たまたまこのサイトは
div#contentsでページ全体をラップしていたので、白い背景色はコイツに担わせた html要素のbackgroundが、ページ上部の Over Scrolling の色になるmeta name="theme-color"という HTML 要素を使ってテーマカラーを指定できる機能が最近出たらしく、コレを付与すると、iPhone の場合はページ下部の Over Scrolling の色になる他、タブの背景色にもなってくれる
- たまたまこのサイトは
- 余白の付け方などを調整した
現在のこのサイトのスタイルは、単一の CSS ファイルで実装している。拙作の Neo's Normalize をベースに調整しているのだが、前回実装した時から時間が経って、自分が書いたのに読解しづらいところが多く出てきた。そこで今回は、どの辺が分かりにくく感じたかというところから逆算して、後で読みやすい CSS になるように書き方を考えた。
前回は、
- Neo's Normalize を読み込む
- 要素セレクタ
- Class セレクタ (コンポーネントのデザイン)
- ID セレクタ (ページデザイン)
といった順で実装していて、例えばページのヘッダとなる #header セレクタは基本的に1回しか書かない、みたいな感じになっていた。でもところどころ「同じスタイルだから」と複数セレクタを列挙しているところもあったりして、#footer のスタイルが #header セレクタ関連のセクションに混じってる、みたいなことが起きていた。
そこで今回は、おおよそ次のようなセクションの順番で実装してみた。
- Neo's Normalize を読み込む
html・body・#containerによるページ全体のデザイン- ページデザインのうち、上下の Margin・Padding 設定
- ページデザインのうち、画面いっぱいに伸びる「Outer」要素による背景色指定
- ページデザインのうち、「Outer」要素直下にある「Inner」要素で、コンテンツの最大幅を指定する
- 残りのページデザインを HTML 構造順に実装する
- コンポーネント (要素セレクタ・Class セレクタ) の上下 Margin 設定
- コンポーネントのうち、要素セレクタの残りのスタイル実装
- コンポーネントのうち、Class セレクタの残りのスタイル実装
セクション 2. 〜 6. で、テンプレートとなる HTML 構造に合わせたスタイリングをしている。その中でも、余白指定、背景色指定、コンテンツ幅指定、といったカテゴリで分類しているので、例えば #header セレクタは 3.・4.・6. にそれぞれ登場したりする感じ。
セクション 3. は、前後のセクションでココの指定が上書きされないように、ショートハンド (margin) を使わず margin-top と margin-bottom のみを、ページ構造順に書き連ねている。#header・#main・#footer 間の余白はこのセクションだけ見れば分かる寸法。
セクション 4. と 5. で、ヘッダとグローバルメニュー、フッタのように、画面の横いっぱいに背景色が付いているが、中のコンテンツは中央揃えで最大幅を持っている構造を組み立てている。セクション 4. は background 指定のみだし、セクション 5. では max-width と左右マージンの auto だけ付けている感じ。
そしてセクション 6. で、文字色や Grid やら、残りのスタイリングをしている。このセクションには要素と要素の位置関係を調整するような margin なんかが登場しないことになる。
セクション 7. と 8.・9. の別け方も同じ要領で、上下のマージン指定だけ先に行っておき、個別のスタイルの中にはマージン指定が入らないようにしている。
遠慮なく HTML 構造もイジってキレイになったので良き良き。
