Q&A
回答ありがとうございます！
Progateでfloatを使っていたので疑わず使っておりました。。
記載していただいたCSSで、リストがきちんと収まりました！
flexboxについて調べて活用していきます。
前提・実現したいこと
ProgateのHTML/CSSを学習し終えたので、初めてサイトデザインとコーディングをしている者です。
初心者の上divだらけのコードで申し訳ないのですが、ググってもわからないためご指導お願いします。
添付画像の右上のリスト『Menu』『Take out』『Information』が上の青い部分（header）に入らずはみ出て困っています。
これをheaderに収めるにはどうしたらいいのか、ご享受お願いします。
headerのバックはとりあえず青にしてboxが見やすいようにしています。
<DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>本格インド・ネパール料理</title> <link rel="stylesheet" href="main.css"> <link href="spice_resutaurant_top.css" rel="stylesheet" type="text/css"> <!-- [if lt IE 9] --> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> </head> <header> <div class="head_container"> <div class="header_left"> <a href="" class="logo"> <img src="cmn/logo/logo.png"> </a> </div> <div class="header_right"> <ul class="list_nav_header"> <li><a href="">Menu</a></li> <li><a href="">Take out</a></li> <li><a href="">Information</a></li> </ul> </div> </div> </header>
@charset "UTF-8"; /* CSS Document */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, div { margin: 0; padding: 0; } li { list-style: none; } a { text-decoration: none; } body { width: 100%; } header { width: 100%; height: 106px; background-color: blue; position: fixed; } .head_container { height: 85px; padding: 10px 87px; } .header_left { color: #A57323; box-sizing: border-box; } .header_right { float: right; box-sizing: border-box; color: black; } .list_nav_header { display: flex; align-items: center; font-family: times; float: right; } .list_nav_header li { padding: 50px 29px; }
試したこと
ネットで問題を検索したところ『box-sizing:border-box;』をCSSに記述するとあったので
入れてみましたが変わりませんでした。
補足情報（FW/ツールのバージョンなど）
コードエディター：Brackets
ブラウザ：Google Chrome 88.0324.150
回答3件
0
他の方とも重なりますが
- 理由のないガチガチの高さ指定・余白の指定はやめる。
- floatは使わずflexで。
この2点で解消するとは思います。
まずは横並びなどのレイアウトを実現⇒ 中央寄せ・均等配置などで大まかな場所調整 ⇒ 最後に余白調整 という流れが良いのではないでしょうか。
あとは、htmlの宣言の記述（「!」抜けてませんか）と、bodyタグが無いのが気になりました。
投稿2021/02/18 06:25
総合スコア272
0
ベストアンサー
現状のコードを活かすなら、.header_left に下記を追加します。これでロゴ画像とメニューが横並びになります。あとは、パディングを調整すればいいでしょう。
css
1.header_left { 2 float: left; /* 追加 */ 3 color: #A57323; 4 box-sizing: border-box; 5}
ただし、他の方も指摘してますが、現在ではfloatを使うレイアウトは時代遅れです。CSS Flexboxを使ったレイアウトにした方がシンプルだし融通が効きます。
他の部分ではFlexを使っているので、ここでFlexを使わないのは謎です。
下記でうまくいくと思います。floatの設定は不必要なので削除してください。
css
1.head_container { 2 height: 85px; 3 padding: 10px 87px; 4 display: flex; /* 横並べ */ 5 justify-content: space-between; /* 両端揃え */ 6 align-items: center; /* 上下中央寄せ */ 7}
投稿2021/02/18 05:41
総合スコア34073
0
こんにちは。
css
1.list_nav_header li { 2 3 padding: 50px 29px; 4}
とありますので、上下にパディングが50pxずつ付いていますから、最低でも高さ100pxあります。
一方で、
css
1.head_container { 2 height: 85px; 3 padding: 10px 87px; 4}
とあり、.head_containerの高さは85pxしかないのですから、はみ出すのは当然ではないでしょうか。
解決方法の前に、横並びにするのにfloatを使うフロートレイアウトは時代遅れです。
10年前ならともかく、2021年に採用する理由はありませんので、フレックスレイアウトなどを検討してみてください。
解決方法ですが、矛盾しないレイアウト設計をしましょう。小さなボックスに大きなものを納めないように気をつけましょう。
まず、レイアウトのワイヤーフレームやモックを作ってみるのもいいかもしれません。
フローチャートやワイヤーフレーム、プレゼン資料まで作れる | Cacoo(カクー)
投稿2021/02/18 05:25
総合スコア36946
回答ありがとうございます！
heightの設定がおかしいですね。。指摘していただいてようやく気がつくレベルです。。
flexについて調べて活用していこうと思います！
デザイナー出なのでデザインから作ってしまいましたが、ワイヤーフレームのみでコーディングした方が早く練習になりそうですね。Cacooを紹介いただきありがとうございました！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/18 10:35