css Simplicity解体新書 part1 ヘッダーをよりシンプルにするためには

htmlの仕組みが複雑になると、cssも複雑に面倒くさくなったりします。できるだけシンプルなhtmlでやりたい事が実現できるのが一番良いわけですが、簡単にすると逆に難しくなる場合もあります。

逆に難しくなる場合というのは例えば、Simplicityでいうとヘッダ部分で、サイトタイトルのある部分とフォローボタンがある部分は.alignleft(.top-title-catchphrase)と.alignright(.top-sns-follows)に分けられています。それを#h-topが囲んでいます。
これらを排除してもレイアウトは可能ですが、どのように実現させるかをかなり考えないといけません。

カスタマイザーで背景画像を入れる時、記事幅に合わせるタイプとウィンドウ幅に合わせるために、#h-topに背景画像を入れるか、#headerに背景画像を入れるかで分けられています。

この#h-topのスタイルはカスタマイズする上では機能が分けられているため、直感的に記事幅に合わせる場合とそうでない場合にアップロードした画像を使い分けするのには便利です。他の理由もあるでしょうが、記事幅にするかウィンドウ幅にするかだけで同じ画像を使うのであれば、#h-topは必要ありません。

また#h-topは#header-inと言う要素で囲まれています。#header-inは他の#なんちゃら-inとあわせてコンテンツの幅を決めるために利用されています。またmargin: x auto;で要素をセンタリングしていると言うだけです。実はこれも不要です。
サイズの指定は#header部分にすれば良いわけで他のパーツでも#footerや、#bodyにサイズを指定すればよいわけです。

しかしこれらがあることで#header-inに色つけその中にある、#h-top、更にその中にある.alignleftや.alignrightを別の色や設定にできるというような方法もあります。もしこのような設定やスタイルの使い分けをしないのであれば不要です。つまり、

このような構造が、

ここまで減らせます。あんまり変わっていないようですが、#header-inと#h-topが取り除かれています。で、この状態で通常表示をどうするかですが、例えば、

このようにしておき、

こんな風にすることでデフォルトとほぼ同じようにできます。#h-topにはmin-heightが設定されているため別途その設定も必要ですがそれはまた別のクラスに書いても良いです。

.post-widthを使う利点は、#navi、#body、#footerにも.post-widthを使うことでクラスを流用できるというわけです。幅を変えたい場合は、.post-widthのサイズを変更するか、使い分けをすることで対応できます。と言ってもたいていは.post-widthをつけない場合は100%で表示されるので、つけたり外したりだけで大丈夫なわけです。

また別の方法として、

と、#headerやら#bodyの親要素である#contentに幅を持たせてその中の要素は100%としても良いです。ただし、#contentが最大幅となるために、ヘッダは画面幅いっぱい、他は記事幅というようなことはできません。ここらを使い分けるには、やはり、それぞれの要素に.post-widthを利用するのが良さそうです。

サンプル

See the Pen html、cssサンプル ヘッダー by Hidekichi (@Hidekichi) on CodePen.


※ 記事タイトルをクリックすると(トグルで)サイズが変わります。
※ ヘッダ部分だけ処理するようにしています

このサンプルは幅が足りないので、現物(フルページビュー)を見てもらって試してもらうのがわかりやすいかと思います。ややスマホなどの狭い画面で問題が出そうですが回避はできます。

サンプルはjQueryで#header-inと#h-topをjQueryで外しています。元のhtmlソースはデフォルトのままですが、デベロッパーツールで見るとこれらが外れているのがわかるかと思います。

背景画像は#headerに設定していますが、サイズが変わったからといって何かしら変更用のスタイルを書いているわけではありません。サイズに追従しているわけです。

ここから変更するとすれば、レスポンシブに対応するということでしょうが幅が広い状態でウィンドウを狭くしてもそれに追従していくと思います。フォローボタンとタイトル部分が重なるのをなんとかしたり、あるいはスマホサイズぐらいになった時にタイトル部分のフォントサイズを変更したり等をすれば良い感じになるかと思います。

まとめると

cssはクラスの使い回しにこそ極意があります。共通化できる部分はできるだけ共通化して、使いまわすのが良いです。

画像に関してももし他と使いまわすのであれば、

このようにして使いまわすことも可能ですが、まぁヘッダに使う画像を他で使うことはないと思うので、その背景画像の設定の部分を使いまわすほうが効率的でしょうか。

これなら他の要素にも使えそうです。ヘッダに使う場合は、background-image: url(画像パス);だけを書いて、

こんなhtmlをその時に追加すればよいわけです。cssは、

で行けるのではなかろうかと思います。前に書いた.header-imageを使うのであればhtmlにクラスを追加するだけでokになります。

これらを設定するモードで使い分ければよいということですが、一番最初に書いたように、カスタマイザーで設定することの有用性として、ヘッダ画像は「これ」と決定できて、それをwordpressの関数で読み込むことができるということから、.header-imageのスタイルはカスタマイザーを使う上では使いにくいことになります。

書き出しもできるでしょうが、何をどのように使うかを予め考えておかなくてはいけません。また子テーマstyle.cssにbackground-imageを書くぐらいだけならより簡単にできるという点で、画像のパスは自身で入れるというのが手間の代わりにわかりやすくなるかも知れません。

なるべく少ない記述を効率良く使いまわす、そのためにhtmlを少し簡略化させるのは見た目にもスタイルをするにおいても便利になるということなのです。

スポンサーリンク

シェアする

フォローする