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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

Q&A

解決済

3回答

1308閲覧

CSSで文字がうまく配置できない

tetra

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

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

0グッド

0クリップ

投稿2019/03/08 15:54

編集2019/03/08 16:28

イメージ説明
最近HTML/CSSの勉強を始めたものです。
HTML/CSSで簡単なHPを作っています
初心者なのでコードがひどいと思いますがよろしくお願いします。

発生している問題・エラーメッセージ

右の様なサイトを作りたいのですが NEWSの下に文字をうまく配置できません。

該当のソースコード

#topbar{ margin: 0 auto; width: 1000px; height: 40px; } body{ margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; } .topbar-section{ float: left; border-left: 1px #C0C0C0 solid; height:100%; } #logo{ margin-top: 8px; margin-right: 10px; float: left; width: 100px; } #signin-image{ width: 30px; float: left; margin-left: 10px; margin-top: 8px; } #signin-text{ font-size: 15px; margin-left: 15px; float: left; margin-top: 10px; } .bell-div{ float: left; } .wigg{ margin-top: 0; margin-right: 6px; margin-left:40px; height: 40px; float: left; } .bell-img{ width: 30px; margin-top: 6px; margin-right: 8px; } .topbar-menu{ font-weight: bold; font-size: 90%; padding: 13px 15px 0 15px; height:27px; } .more-img{ margin-top: 15px; width: 15px; } .clear{ clear: both; } #sch-txt{ margin-left: 10px; padding:5px; margin: 5px 0 5px 5px; float: left; } #btn{ height: 25px; background: #7fbfff; margin-top:5px; margin-left: 10px; } #menu-bar-container{ border-top: 1px solid #CCCCCC; background-color: #BB1919; width:100%; height:140px; } .menubar{ color: white; width:1000px; margin:0 auto; } h1{ top: -20; position: relative; float: left; font-size: 40px; } .find-local{ color: white; font-size: 30px; float:right; width:250px; padding: 5px 5px 0 10px; margin: 0px 10px 0 0; } .fl-img{ float: right; } #menubar-2{ }
<html> <head> <title>BBC News</title> <link rel="stylesheet" type="text/css" href="bbc.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> </head> <body> <div id="topbar"> <img id="logo" src="https://www.completewebdevelopercourse.com/content/2-css/images/bbc-logo.png"> <div id="signin-div" class="topbar-section"> <img id="signin-image" src="https://www.completewebdevelopercourse.com/content/2-css/images/signinimage.png"> <span id="signin-text"><a href=""> Sign in</a></span> </div> <div class="bell-div"> <img class="wigg" src="https://www.completewebdevelopercourse.com/content/2-css/images/wigglyline.png"> <img class="bell-img" src="https://www.completewebdevelopercourse.com/content/2-css/images/bell.png"> </div> <div class="topbar-section topbar-menu">Nwes</div> <div class="topbar-section topbar-menu">Sport</div> <div class="topbar-section topbar-menu">Weather</div> <div class="topbar-section topbar-menu">iPlayer</div> <div class="topbar-section topbar-menu">TV</div> <div class="topbar-section topbar-menu">More</div> <img class="more-img" src="https://www.completewebdevelopercourse.com/content/2-css/images/more-arrow.png"> <div class="clear"></div> <form> <input id="sch-txt"type="text" placeholder="Search"> <input id="btn" type="submit" value="検索"> </form> </div> <div class="clear"></div> <div id="menu-bar-container"> <div class="menubar"> <h1>NEWS</h1> <div class="find-local"><a href="" >Find local news</a></div> </div> <div class="clear"></div> <div id="menubar-2"> <a href="">Home</a> <a href="">UK</a> <a href="">World</a> <a href="">Business</a> <a href="">Politics</a> <a href="">Tech</a> <a href="">Science</a> <a href="">Health</a> <a href="">Education</a> <a href="">Entertainment&amp;Arts</a> <a href="">Video&amp;Audio</a> <a href="">More</a> </div> </div> </body> </html>

試したこと

いろいろと試しましたが原因がわかりません。

補足情報(FW/ツールのバージョンなど)

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

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

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

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

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

kei344

2019/03/08 16:08

(質問文は編集できます)質問文のコードは省略しないほうが解決しやすくなりますよ。
tetra

2019/03/08 16:19

なるほど、今日使い始めたので教えていただきありがとうございます。 編集しておきます。
guest

回答3

0

質問のソースに

css

1.clear { 2 clear: both; 3}

を追加しては?

投稿2019/03/08 16:00

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

tetra

2019/03/08 16:02

ソースには載せていないのですが既にclearはしているのですが駄目でした;;
退会済みユーザー

退会済みユーザー

2019/03/08 16:05

具体的にどういう風にしたいんです? 画像見る限り、tetraさんもNEWSの下に文字を配置できてますよね?
tetra

2019/03/08 17:19

質問の内容が分かりにくく申し訳ありませんでした。 どうやらh1タグが原因だったのでmargeを調整することで解決できました。 まだまだ勉強中の身なので、また質問させていただくことがあると思いますが その時はよろしくお願いします。 ご親切にお答えいただき、ありがとうございました
guest

0

#menu-bar-containerheightを指定してますが、その構成ではそもそも必要ないです。

「Newsと文字の間」はh1タグにデフォルトで付いているスタイルによって上下にmarginがあるので、消すなり なんなり すればよいです。

【2019年版!おすすめのリセットCSSまとめ | Web Design Trends】
https://webdesign-trends.net/entry/8137

【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/

【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

positionfloat をなるべく使わずレイアウトを組むように心がけると無理が出にくいのでお勧めです。

【よこ並びのCSS。】
http://lopan.jp/layout/

【段組みのCSS。】
https://lopan.jp/layout2/

投稿2019/03/08 16:58

kei344

総合スコア69364

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

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

tetra

2019/03/08 17:14

あまりfloatとpositionは使わないようにしたいと思います。 ご回答ありがとうございました。
guest

0

ベストアンサー

h1{ float: left; } #menu-bar-container{ height 90px; }

90pxだから入りきらなかったりしてそうなので、上記あたりを修正してみるとNEWSの下で赤枠の中に入ると思います!

投稿2019/03/08 16:11

hatsu

総合スコア1809

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

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

tetra

2019/03/08 16:32

試しに140pxにしましたがNewsと文字の間が空きすぎていて不自然な感じになってしまいました。 文字の間隔調整はmaegeか何かを使って解決すればいいのか、 そもそもコードが誤っているのでしょうか?
hatsu

2019/03/08 16:36

h1のmargin-bottomが広いんだと思います。 試しにh1{margin-bottom:0;}とかにしてみて、調整してみるといいかもです!
tetra

2019/03/08 17:08

いい感じになりました! まさかh1タグが原因だとは思いませんでした。 ありがとうございました。
hatsu

2019/03/08 17:22

良かったです!????
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問