非デザイナーがチャチャッと野暮ったいブログを修正してみた

2015年11月28日土曜日 08:51

css,Web開発

はじめに、cssのリファクタリング

ここしばらくでブログの css の整理をしました。

若干の変更を加えつつ、主に冗長な指定を修正し使われていない指定を外していきました。

なぜリファクタリングが必要になったかといいますと…

スマートウォッチからフルHD向け指定まで計5パターンも！レイアウトを切り替えている、フルHD > PCとタブレット横向き > タブレット縦向き > スマホ > ウォッチ
印刷用CSS
Blogger ではテンプレートが書き出した id や class をフックしてセレクタを書くので階層が把握し難い...(ここまで言い訳)
Sass 等を利用していない
一つの .css ファイルにズラズラ書いている
スマートウォッチ用では背景色が白から黒になり、文字色、特にリンク色指定の上書きでゴチャゴチャしている

相変わらず Sass に手を出していませんが css を分けてコードを見通しやすくできました。(サーバに上げる際はバッチファイルで一本化して minify しています)

満足してしばらく眺めているとイマイチ野暮ったいことに気づきました (；・`д・´)

一本化バッチファイル

@echo off
type nul        > all.css
type css\*.css >> all.css

どこをどう直せばオサレになるの…？

昨夜遅く、僕は“タイポグラフィ中心のかっこいい日本語のサイト”を検索しその答えを探しました。

一番最初の画像はその時点でのスクリーンショットになります。

読者の皆さんもどこを直したらいいか？ぜひ考えて教えてください　m(_ _)m

僕の答えは…

そして昨夜のうちに至った結論は次の2点なります。

施策のたびにスクリーンショットを残しています、効果をご確認アレ。

見出しの太字を辞める

ブログタイトル(<h1>)と記事の見出し(<h2>, <h3>)に太字を使っていたのをノーマルにしました。

見出しの太字については特に考えもなく、見出しなので目立てばよいとデフォルトスタイルのままでした。

この指定が野暮ったい印象の最大の元凶だったと思います。

ヘッダーの背景色を辞める

ヘッダーの黒系の背景色(#333333)が重たくのしかかっているように感じたのでメイン部分と同じ白系にしました。(完全な白では眩しいので若干グレーにしています)

替わりにボーダーをひいてアクセントとし、ブログタイトルのフォントサイズも少し小さくしました。

このようにヘッダーをすっきりとさせるデザインはしばしば見かけ憧れていました。そしてこのほどようやく取り入れることができました。

ちなみに本ブログにテーマカラーはなくこの色(#333333)に思い入れがあるわけではありません。

フルHD向けスタイルについて

最後にフルHD向けスタイルのご紹介です。この手の話をあまり聞かないようなのでどうぞこの機会に見ていってくださいな。

本ブログは自身の Web 開発時に参照するためパソコンからフルHD画面での閲覧が多くなります。

そこで画面サイズが十分に大きい場合にメインコンテンツを2カラムで表示します。

リキッドレイアウト

似た発想にリキッドレイアウト(2011頃登場？)があります。

大型化するディスプレイスペースを有効利用するため、カラム幅を表示領域に比例させます。

しかしこのレイアウト手法が登場した当時はメインカラムが広くなると一行の文字数が増えてしまい可読性が落ちる、という欠点がありました。

現在では文字サイズをベースとしたメディアクエリと columns 指定によって簡単に可読性が維持されます。

@media screen and (min-width: 96em) {
/* 2カラム */
  .Pb {
   -webkit-column-count : 2;
   -webkit-column-gap   : 2.6em;
      -moz-column-count : 2;
      -moz-column-gap   : 2.6em;
           column-count : 2;
           column-gap   : 2.6em;
  }
/* 左カラム最初の<h3>のマージンを0にして右カラムに揃える */
  .Pb>*:first-child {
   margin-top : 0;
  }
}