グローバルメニューの背景のみ伸ばすcss

グローバルメニューの背景のみ伸ばすcss

初めまして、webデザイナー目指し中のちゃんけいです。

コーディングの勉強を始めて4ヶ月ですが、前々よりtwitterに書いていましたが自分からも何か発信していこうと考えていたので勉強の意味も込めて、これからwebデザイナーを目指す方に少しでもお役に立てればと思いブログという形をとって発信したいと思います。

サイトのデザインにつきましては、時間を見つけて後々デザインを作っていこうと思います。

さて、今回のタイトルになっていますグローバルメニューの背景のみ伸ばすやってみたいと思います。

目次

  • 背景のみ伸ばすって??
  • まず伸ばすだけやってみよう
  • 伸びすぎてしまう
  • まとめ

背景のみ伸ばすって??

左右に余白をとっているwebサイトを作る場合に、グローバルメニューだけブラウザのサイズいっぱいに伸ばしたいなという方におすすめの方法です。

私が伸ばしたいと思ったきっかけは、よくみるデザインだからとグローバルメニューが途切れてしまうのがデザイン的に嫌で伸ばしたいと思ったことです。

まず伸ばすだけやってみよう

グローバルメニューの背景を伸ばしみましょう。HTML5でnavタグの中にリストタグを使用したグローバルメニューに適用すると考えていきましょう。リストタグにdisplay:tableを使った横並びのグローバルメニューです。こちらのリストタグの背景を伸ばしてみましょう。やることは簡単です、CSSに以下を加えるだけです。

nav ul{
   background:#fff;
   margin-left:-100%;
   margin-right:-100%;
   padding-left:100%;
   padding-right:100%;
}

ネガティブマージンの範囲をパディングによって戻すという方法です。マージンの数字は画面いっぱいになるようでしたらなんでも大丈夫です。マージンの範囲には背景色が適応されません、なのでその分をパディングによって背景色が適応されるように設定しています。

伸びすぎてしまう

お気づきの方も多いと思いますが、この方法をするとブラウザの右に永遠と背景が続きます、、、画面のしたに横スクロールバーが出ていると思いますので、こちらを解決したいと思います。やり方はたくさんあると思いますが私はCSSに

html{
  overflow-x:hidden;
}

画面外にはみ出したコンテンツをスクロールバーをつけて表示するかどうか決めるものなんですが、x方向のスクロールバーをhidden表示しないということで解決です。しかし、このoverflow-xですねまだ実験段階らしく、ブラウザのサポート状況がいささか不安です。ぜひこちらのリファレンスを確認ください CSS MDN

まとめ

グローバルメニューの背景伸ばせましたでしょうか。より良い方法を見つけ次第またこの件に関して書き留めようと思います。次回からはもっとわかりやすく伝える為に図や画像を使ったり、文章構成を少しでも良くしたりしたいと思います。

ブログを書くってこんなに難しいだと感じました、、、人生初ブログでした、最後までありがとうございます。