ナビゲーションを全幅っぽく見せたい

Question

お世話になります。例えばYahoo!ショッピングで下記のストアのように、ナビゲーションを全幅っぽく見せるにはどうすればよいでしょうか。https://store.shopping.yahoo.co.jp/broadstage/よろしくお願い致します。

Answer

ECマスターズの田中です。> 例えばYahoo!ショッピングで下記のストアのように、ナビゲーションを全幅っぽく見せるにはどうすればよいでしょうか。いただいたストアの構造を確認したところ、上から重なっている順に１．ストアのロゴ、ナビボタン、NEWS&TOPICSなどのパーツ２．ヘッダーの白背景部分３．白背景の下に見える影部分４．ピンク背景部分以上を重ねることで実現されておりました。ピンク背景はストアクリエイターPro上の設定で、他３つはヘッダーのフリースペースを利用して設置されております。ヘッダーのフリースペースに全幅のコンテンツを設置すると、通常はページ全体のレイアウトも全幅になってしまいますが、スタイルシートでposition: absolute;left: 0px;width: 100%;とご設定いただき、topおよびbottomの値を設定しないことで、本来の表示位置（つまり、ヘッダーのフリースペースの左上端）の高さで全幅を使う背景をご設定いただくことができます。ロゴなどの各パーツも、position: absolute; によって座標を指定して配置されております。スタイルシートのpositionを使うことによるレイアウトの仕組みは、下記ページにて詳しく説明されております。https://saruwakakun.com/html-css/basic/relative-absolute-fixed#section2仕組みを踏まえた上で、実際のストアページのソースをご参照いただき、どのような仕組みになっているかご確認いただきますようお願いします。ストアページのソースにおいて、

からヘッダーのフリースペースが始まり、

が「２．ヘッダーの白背景部分」に、

が「３．白背景の下に見える影部分」に、それ以降の内容、「」の２行前までが「１．ストアのロゴ、ナビボタン、NEWS&TOPICSなどのパーツ」に該当します。ソースが�のような記号だらけで読みづらい場合は、下記ツールにて変換をお願いします。https://tech-unlimited.com/escape.html

Answer

田中様、解析いただきまして、ありがとうございます。解説いただいたようにトライしてみます。その上でわからなくなりましたらまたご連絡いたしますので、よろしくお願いいたします。

ナビゲーションを全幅っぽく見せたい

カテゴリーから探す