質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

307閲覧

CSSのfloatの設定について

sanayaaan

総合スコア25

float(CSS)

これはCSSのfloatプロパティのタグです。指定された要素を左または右に寄せて配置する際に使用します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/10 08:57

編集2020/05/10 09:12

初心者です。
練習でホテルのサイトを作ってみているのですが、
下記header-rightにfloatを設定して右寄せにした際になぜ上に余白ができるのか、ロゴと同じ高さにならないのかがわかりません。
色々いじっているうちに迷子になってしまいました。。
ここ変だよ!という部分があれば教えていただけると嬉しいです。

↓html

<header> <div class="container"> <div id="header-logo"> <a href="#"> <p class="logo">MARINA HILLS HOTEL</P> <p class="sublogo">Resort&Spa</p> </a> </div> <div id="header-right"> <div class="el_selectChevron"> <select name="setLang" id="setLang" class="js_dropdownLocator"> <option value="//www.rihga.co.jp/tokyo">言語 / Language</option> <option value="#">English</option> <option value="#">한국어</option> <option value="#">簡体中文</option> <option value="#">繁体中文</option> </select> </div> <div id="header-sub"> <a href="#" id="membership">会員のご案内</a> <a href="#" id="question">よくあるご質問</a> <a href="#" id="reservation">予約する</a> <a href="#" id="menu-icon"> <span class="fa fa-bars"></span> </a> </div> </div> <div id="header-navigation"> <ul> <li><a href="#">宿泊</a></li> <li><a href="#">レストラン&バー</a></li> <li><a href="#">ウエディング</a></li> <li><a href="#">宴会</a></li> <li><a href="#">アクセス</a></li> </ul> </div> </div> </header>

↓CSS

body{ font-family:'Noto Serif JP', serif; } header{ width: 100%; height: 120px; } .container{ margin:20px 10px 0px 10px; } #header-logo { width:20%; } #header-logo a{ text-decoration:none; } .logo{ font-family: 'Merriweather', serif; font-size: 20px; font-weight: bold; color:#130958; text-align: center; margin: 0; } .sublogo{ font-family: 'Karla', sans-serif; font-size: 10px; font-weight:bold; color:#372d79; letter-spacing: 10px; text-align: center; margin: 0; } #header-right{ float: right; } #header navigation ul{ display: table; margin: 0 auto; padding: 0; width: 100%; text-align: center; } #header-navigation ul li{ display: table-cell; min-width: 50px; list-style: none; float: left; background-color:#372d79; transition:color 0.3s; } #header-navigation ul li:hover{ background-color: #ffffff; } #header-navigation ul li a{ display: block; width:80%; padding: 10px 0; text-decoration: none; font-weight: bold; color:#ffffff; }

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/05/10 09:00

(質問文は編集できます)質問文のHTML/CSSはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
sanayaaan

2020/05/10 09:04

とても見づらいですね、、、やってみます!
m.ts10806

2020/05/10 09:08

あ、既に同じ指摘が入っていた。
sanayaaan

2020/05/10 09:13

すみません、編集いたしました。お願いいたします。
guest

回答2

0

floatはその要素が始まる地点から始まるので、#header-logofloatしていないと同ラインには並びません。

CSS

1#header-logo { 2 width: 20%; 3 float: left; 4}

ただ、「画像の周りに文字を回りこませたい」などの場合以外のレイアウトには
floatは使わないほうがよいです。(flexgridが無かった時代にレイアウト用途で使われていただけで、使いやすいわけではない)
いまからCSSを勉強するならflexgridでレイアウトを作ることをお勧めします。

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

【これからのレイアウトはGrid Layoutで決まり?特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
https://ics.media/entry/15921/

【CSS Grid Layout を極める!(基礎編) - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

投稿2020/05/10 09:19

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanayaaan

2020/05/10 09:31

リンクまでつけてくださりありがとうございました!! flexやgridでの配置を勉強します!
guest

0

ベストアンサー

floatを使わなくていいなら
logoとlogo-rightを同じdivに突っ込んでflexを適用、両端揃えのがいいかと

html

1<div class="container"> 2 <div class="flex"> 3 <div id="header-logo"> 4 <a href="#"> 5 <p class="logo">MARINA HILLS HOTEL</p> 6 <p class="sublogo">Resort&Spa</p> 7 </a> 8 </div> 9 10 <div id="header-right"> 11 <div class="el_selectChevron"> 12 <select name="setLang" id="setLang" class="js_dropdownLocator"> 13 <option value="//www.rihga.co.jp/tokyo">言語 / Language</option> 14 <option value="#">English</option> 15 <option value="#">한국어</option> 16 <option value="#">簡体中文</option> 17 <option value="#">繁体中文</option> 18 </select> 19 </div> 20 <div id="header-sub"> 21 <a href="#" id="membership">会員のご案内</a> 22 <a href="#" id="question">よくあるご質問</a> 23 <a href="#" id="reservation">予約する</a> 24 25 <a href="#" id="menu-icon"> 26 <span class="fa fa-bars"></span> 27 </a> 28 </div> 29 </div> 30 </div> 31 32 <div id="header-navigation"> 33 <ul> 34 <li><a href="#">宿泊</a></li> 35 <li><a href="#">レストラン&バー</a></li> 36 <li><a href="#">ウエディング</a></li> 37 <li><a href="#">宴会</a></li> 38 <li><a href="#">アクセス</a></li> 39 </ul> 40 </div> 41</div>

css

1body { 2 font-family: 'Noto Serif JP', serif; 3} 4 5header { 6 width: 100%; 7 height: 120px; 8} 9 10.flex { 11 display: flex; 12 justify-content: space-between; 13} 14 15.container { 16 margin: 20px 10px 0px 10px; 17} 18 19#header-logo { 20 width: 20%; 21} 22 23#header-logo a { 24 text-decoration: none; 25 26} 27 28.logo { 29 font-family: 'Merriweather', serif; 30 font-size: 20px; 31 font-weight: bold; 32 color: #130958; 33 text-align: center; 34 margin: 0; 35} 36 37.sublogo { 38 font-family: 'Karla', sans-serif; 39 font-size: 10px; 40 font-weight: bold; 41 color: #372d79; 42 letter-spacing: 10px; 43 text-align: center; 44 margin: 0; 45 46} 47 48#header-right { 49 float: right; 50 51} 52 53#header navigation ul { 54 display: table; 55 margin: 0 auto; 56 padding: 0; 57 width: 100%; 58 text-align: center; 59} 60 61#header-navigation ul li { 62 display: table-cell; 63 min-width: 50px; 64 list-style: none; 65 float: left; 66 background-color: #372d79; 67 transition: color 0.3s; 68} 69 70#header-navigation ul li:hover { 71 background-color: #ffffff; 72} 73 74#header-navigation ul li a { 75 display: block; 76 width: 80%; 77 padding: 10px 0; 78 text-decoration: none; 79 font-weight: bold; 80 color: #ffffff; 81} 82

投稿2020/05/10 09:23

okina

総合スコア471

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanayaaan

2020/05/10 09:32

このようにすれば良いのですね、ありがとうございました! これからはflex使うようにしてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問