質問: ### 前提・実現したいこと ここに質問したいことを詳細に書いてください ヤフージャパンのトップページの様にナビゲーションバーの中央にロゴを表示するにはどのようなHTML・CSSを書けば良いのでしょうか? ### 発生している問題・エラーメッセージ ``` エラーメッセージ ``` ### 該当のソースコード ``` ここにご自身が実行したソースコードを書いてください ``` hoge1 hoge2 hoge3 hoge4 ### 試したこと 課題に対してアプローチしたことを記載してください ul>liに対してfloat:left; を に対してmargin: 0 auto をやってみました ### 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報
回答: > ヤフージャパンのトップページの様に お手本にしたいサイトがあるのであれば、デベロッパーツールでコードを見てみるのが手っ取り早いと思います。 すでに実用されているので間違いないし、同じようなデザインのサイトでも違う発想でコーディングしていたりして面白いです。 ロゴはナビの外に出してあげたほうが構造的にきれいだと思います。 ``` hoge1 hoge2 hoge3 hoge4 ``` cssはいろんな方法がありそうです。 質問者さんの思いついたmargin:0 autoやfloat:leftを使う方法だと、例えばこんな風にできます。 ``` header{ position: relative; width: 800px; } h1{ width: 200px; height: 50px; margin: 0 auto; } ul{ position: absolute; top: 0; left: 0; width: 100%; } li{ float: left; width: calc( ( 100% - 200px ) / 4); } li:nth-child(3){ margin-left: 200px; } ``` position:absoluteで位置を重ねて、calc()を使ってロゴの幅を引いたスペースを等分し、中央に当たる所だけmarginで間を空ける...といった感じです。ヒントになれば幸いです。