テーマ作成進捗 (6)

リセットCSSを乗り換えた

ブラウザに元々適用されている User Agent Stylesheet を打ち消してくれる、リセットCSSという存在がありますが、かつては normalize.css というものを使っていました。

この normalize.css は一言でいえば、見出しや段落の余白をそのまま残してくれる一方で、<body>要素に入る無駄な margin を打ち消してくれたり、まさに最低限のマークアップ要素が残してあるようなCSSです。

しかしながら、たとえばリスト要素の margin / padding を0にしたりするという作業が日に日に増えていき、メンテナンスがとても煩雑になってしまいました。なにか良いCSSがないか、他を調べまわりました。

そこで、乗り換えた先のリセットCSSが ress.css です。

この ress.css は normalize.css に加えて、<ul> や元々インデントが加えられている要素に対してもこれが打ち消されるように設定されています。煩わしかった宣言も、最初の方に minify した本CSSをインサートするだけで数十行ほどを削減することができました。とてもおすすめです。

ページ全体のレイアウトをCSS Gridで組み直した

この改修を通じて、FlexboxCSS Grid の使い分けができるようになりました。でかいレイアウトの段組みには CSS Grid を、横並びの部品や小さなブロック要素には Flexbox を使ってあげるのが、それぞれの最適解のようです。

各セクションの役割によって FlexboxとCSS Grid の2つを使い分けています

事実、ヘッダー上のナビゲーションメニューについては Flexbox を使用していますが、フッターの並び、それから投稿ページのレイアウト、トップページの三段組みレイアウトに関しては、CSS Grid を利用しています。

最初はとても難しく感じましたが、かなり抽象的な書き方ができたのがとても印象深く、Flexbox 同様、グリッドの中にグリッドを組み込むということもできます。慣れてしまえば自由自在にレイアウトを組むことができます。

テーブルのレイアウトを修正

線の存在感や縦幅の大きさのせいで何となく不格好に見えていたようです。

色々試行錯誤を繰り返してみたんですが、ちょっとデザイン面で分かったことを言語化してみました。

  • レイアウトに実線を使うときはあまり濃い色にしてはいけない
  • 見出しのデザインを作っているときはとても意識をしてしまうが、実はユーザー目線に立ってみれば見出しのデザインなどは些細なものである

スマホ版Chromeのヘッダーの色

を変えました。以下のようなコードを<meta>タグ内に挿入し、ページのヘッダーと同じ色に設定しました。

<meta name="theme-color" content="#2d4059">