このブログのデザインで、どうしても入れたかったのが、ヘッダとメインカラム・サイドバーの間に、画面いっぱいに水平線を入れる事。それが、ようやっとできました。記事の上、ヘッダの下に二重線が入っているとおもいます。
いや、まぁ、だからなんだ、と言う話ではあるのですけどね・・・(^^;)
｢そんなの簡単じゃないの？｣と思うかも知れませんが・・・
最初からこういうレイアウトのテンプレートだったら簡単なのですが。
※ヘッダ（赤い部分）が画面いっぱいにレイアウトされている。
でも、こういうレイアウトも多いですよね ※全体のコンテナが幅を制限しており、余白（ピンクの部分）がヘッダ部分にもある。
｢Simplicity｣というテーマを使わせて貰っていますが、それも下のタイプなのです。。。気に入ったテンプレートが下のタイプだった場合、構造に手を加える必要がありますから、簡単には行きませんね。 FC2の場合はテンプレートはすべてHTMLタグで作られていたので、上のタイプに構造を大改造してしまったのですが。 WordPressの場合は、構造をいじるのはまだちょっと理解が浅いので怖い。（PHPで作られているので、僅かなミスで画面真っ白になっちゃいますからね・・・てか既に何度かなったｗ） いずれ、レイアウト実験用のテスト用ブログを作ってやってみるつもりですが、PHPをまだ齧り始めたばかり程度なので、とりあえずは構造はいじりたくない。
ん～、そうだ、例えばpaddingでコンテナの内側を制限していても、marginにマイナスの値を与える事で、それを突き抜けさせると言う技がありますね。部分的に、コンテナの外に突き抜けてしまっている大きな要素を作ってしまうわけですね。
それを使えばできるんじゃなかろうかと思ったのですが・・・ 幅（はみ出す量）が決まっていないと、この技は使えない。見る人の環境により、画面の横幅が違うので、数値が決まらないわけです。 そこで、極端に広い値を与えてしまえばどうかと思い、試してみたのですが。 画面のはるか外まで広がっている要素を作ってしまうと、横スクロールバーが発生してしまう・・・ダメじゃんorz
では、レスポンシブデザイン対応のVWという単位を使って、画面ぴったりサイズ＝100vwで指定してやったらどうか？ おっと、width:100vw;とやったのでは、要素のスタートがコンテナの左端からになってしまう。→では幅を150vwにして、position leftを使って左に25vwずらしてやれば・・・だから、スクロールバーが出ちゃうってば(笑)（※しかもスクロールは画面の左端起点で右側に伸びていくだけっぽい？） 結局、マージンで左右をぴったりに指定してやるしかないようで・・・(´～｀)
では、画面の幅を取得して、余白を割り出してしてしてやれば・・・？ そうだ、新しいCSSの仕様で、calcという関数？を使って計算させてやることができるようになってましたね、たしか？ できるというのは知っていたのだけど、最新のブラウザしか対応していないと言う事なので、ずっと避けて来たのだけれど。。。 いい加減、古いブラウザも絶滅しつつあるし、そろそろいいかと、四苦八苦してやってみたら、できました(笑)
メインのコンテナの幅を仮に900pxとして。画面いっぱいの幅は100vw
画面の幅100vwから、コンテナの幅900pxを引いてやれば、余白のサイズが出る。なんだ、簡単じゃん(笑)
calc(100vw-900px)
おっとっと、左右に余白があるわけだから、引いた数字の半分
calc((100vw-900px)/2)
これをマージンの左右にマイナスで設定してやれば・・・
あれ、calcって、-calc(****)って使えないんですね。手ごわいな・・・
-1 掛けてやればマイナスになるか？
calc((100vw-900px)/2)*-1)
やってみたら、できた！((((ｏﾉ´3｀)ﾉcalcって、単位が違う数字同士でも、自動的に計算してくれるのは、考えてみたら凄いですね。％とpxとか％とvwでも計算できるのですから。。。 あれ、ということは、もしかして・・・ ※コンテナの幅は、数字決め打ちじゃなくて、100%と表記してもオーケーみたいですね！ というわけで、 margin:0 calc((100vw-100%)/2)*-1); と書くだけで、どんな環境でも画面いっぱりピッタリの要素が作れました ※これだとスクロールバーが1px分くらい微妙に出てしまったので、幅を少し減らして margin:0 calc((99vw-100%)/2)*-1); としました。 と言うわけで、無事、水平線ができた、なんか、この技、凄い、素晴らしい！感動した(^^)/ （※このやり方だと、ビューポートの幅が余白ができないほど小さくなると、今度は水平線が短くなって端まで到達しなくなりますので、メディアクエリーを使ってコンテンツの幅より小さくなったらマージンの左右をゼロ指定する必要がありますので忘れないように。）
コメント