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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

3回答

567閲覧

floatを使っても左詰めされない

Kanno_Yama

総合スコア8

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/12/19 08:34

編集2022/01/12 10:55

リンク内容
↑理想画

h2{
float:left;
}
と入力しても左に詰められず、上のスペースに移動してしまいます。左に詰めるにはどうすれば良いですか?

コードです↓

<!DCTYPE html> <html lang=“ja”> <head> <meta charset="utf-8"> <meta name="discription" content="kanno"> </head> <body> <tytle>山田太郎のポートフォリオサイト(練習)</tytle> <ul1> <a href="https://www.weblio.jp/content/amp/%E7%99%BA%E6%B3%A8">発注</a><br> <a href="https://chewy.jp/businessmanner/6441/">ご連絡</a> </ul1> <h1>山田太郎</h1> <h2>①<span1>タロウ</span1>の<span2>3つの言葉</span2></h2><br> <ul2> <li1>分析力</li1> <li2>思いやり</li2> <li3>強い意志</li3> </ul2> <h2>②趣味、特技</h2><br> <ul3> <li4>読書•カフェ巡り•サッカー観戦</li4> </ul3> <br> <br> <br> <p2>メールアドレス</p2> <input> <p3>ご意見、ご相談</p3> <textarea></textarea> <style> body{ font-family:sans-serif; } tytle{ font-size:15px; padding-bottom:20px; } h1{ color:gold; font-size:40px; padding:0px; margin:0px; } ul1{ float:right; list-style:none; } header{ float:right; } h2{ font-size:30px; float:left; border-bottom:3px solid black; } span1{ color:gold; } span2{ color:white; background-color:black; } ul2{ font-size:23px; float:left; } p1{ float:left; } li1{ color:green; background-color:black; } li2{ color:orange; background-color:black; } li3{ color:red; background-color:black; } ul3{ font-size:23px; float:left; background-color:yellow; } p2{ float:left; padding:80px 0px 0px 0px; } input{ padding:5px 70px; float:left; } p3{ float:left; } textarea{ padding:15px 70px; float:left; } </style>

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

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

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

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

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

azuapricot

2019/12/19 08:37

何をどう詰めたいのかわからないので現在のコードを提示して下さい。
退会済みユーザー

退会済みユーザー

2019/12/19 08:38

状況が分からないのでHTMLとCSSを全文載せてください。 また、現在どのような状態になっているか画像があれば、回答者が答えやすくなると思います。
Kanno_Yama

2019/12/19 08:50 編集

<!DCTYPE html> <html lang=“ja”> <head> <meta charset="utf-8"> <meta name="discription" content="kanno"> </head> <body> <tytle>山田太郎のポートフォリオサイト(練習)</tytle> <ul1> <a href="https://www.weblio.jp/content/amp/%E7%99%BA%E6%B3%A8">発注</a><br> <a href="https://chewy.jp/businessmanner/6441/">ご連絡</a> </ul1> <h1>山田太郎</h1> <h2>①<span1>タロウ</span1>の<span2>3つの言葉</span2></h2><br> <ul2> <li1>分析力</li1> <li2>思いやり</li2> <li3>強い意志</li3> </ul2> <h2>②趣味、特技</h2><br> <ul3> <li4>読書•カフェ巡り•サッカー観戦</li4> </ul3> <br> <br> <br> <p2>メールアドレス</p2> <input> <p3>ご意見、ご相談</p3> <textarea></textarea> <style> body{ font-family:sans-serif; } tytle{ font-size:15px; padding-bottom:20px; } h1{ color:gold; font-size:40px; padding:0px; margin:0px; } ul1{ float:right; list-style:none; } header{ float:right; } h2{ font-size:30px; float:left; border-bottom:3px solid black; } span1{ color:gold; } span2{ color:white; background-color:black; } ul2{ font-size:23px; float:left; } p1{ float:left; } li1{ color:green; background-color:black; } li2{ color:orange; background-color:black; } li3{ color:red; background-color:black; } ul3{ font-size:23px; float:left; background-color:yellow; } p2{ float:left; padding:80px 0px 0px 0px; } input{ padding:5px 70px; float:left; } p3{ float:left; } textarea{ padding:15px 70px; float:left; } </style> すみません!こんな感じです!
azuapricot

2019/12/19 08:44

(質問は修正できるので質問本文に追記して下さい) (<code>ってボタンを押すとでてくるマークダウンの中に)
退会済みユーザー

退会済みユーザー

2019/12/19 08:50

左詰にしたいのはどの部分ですか? 山田太郎と「<h2>①<span1>タロウ</span1>の<span2>3つの言葉</span2></h2><br>」を並べたいというこことでしょうか? 簡単なもので構いませんので、イメージ画などあるとアドバイスしやすいです
guest

回答3

0

多分むやみやたらと突っ込んでいる float:left

が諸悪の根源です。

HTMLが結構悲惨なので最終的な理想像は私にはわかりませんが、
要素を横並びさせたいのなら float:left以外にもやり方はたくさんあります。

本当にfloat:left; が正しいのかもう一度考えてみてください。


横並びサンプル1
イメージ説明

HTML

1<ul class="test1"> 2 <li>テスト1</li> 3 <li>テスト2</li> 4 <li>テスト3</li> 5</ul>

CSS

1.test1{ 2 display:flex; /* 横並び */ 3 justify-content:space-evenly; /* 等間隔 */ 4} 5 6.test1 { 7 list-style: none; /* マークを消す */ 8}

Flexboxレイアウトまとめ


横並びサンプル2

イメージ説明

HTML

1<ul class="test2"> 2 <li>テスト1</li> 3 <li>テスト2</li> 4 <li>テスト3</li> 5</ul>

CSS

1.test2 li { 2 display:inline; /* インライン要素に変更 */ 3}

CSSでリストを横並びのメニューにする

投稿2019/12/19 08:48

編集2019/12/19 08:59
azuapricot

総合スコア2341

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

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

azuapricot

2019/12/19 09:01

理想画貼っていただいてますが、 float:left; を取り除けば理想にはなります。 横並び = float:left だけではありません
guest

0

見にくかったので、もう一度インデントを整理して張りなおしておきます

html

1<!DCTYPE html> 2<html lang=“ja”> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="discription" content="kanno"> 6</head> 7 8<body> 9<div class="container1"> 10 <tytle>山田太郎のポートフォリオサイト(練習)</tytle> 11 <ul1> 12 <a href="https://www.weblio.jp/content/amp/%E7%99%BA%E6%B3%A8">発注</a><br> 13 <a href="https://chewy.jp/businessmanner/6441/">ご連絡</a> 14 </ul1> 15 <h1>山田太郎</h1> 16 <h2><span1>タロウ</span1><span2>3つの言葉</span2></h2><br> 17 <ul2> 18 <li1>分析力</li1> 19 <li2>思いやり</li2> 20 <li3>強い意志</li3> 21 </ul2> 22</div> 23 24<div class="container2"> 25 <h2>②趣味、特技</h2><br> 26 <ul3> 27 <li4>読書•カフェ巡り•サッカー観戦</li4> 28 </ul3> 29</div> 30 31<div class="container3"> 32 <p2>メールアドレス</p2> 33 <input> 34 <p3>ご意見、ご相談</p3> 35 <textarea></textarea> 36</div> 37 38<style> 39 40body{ 41 font-family:sans-serif; 42 margin: 0 auto; 43 width: 400px; 44} 45tytle{ 46 font-size:15px; 47 padding-bottom:20px; 48} 49h1{ 50 color:gold; 51 font-size:40px; 52 padding:0px; 53 margin:0px; 54} 55ul1{ 56 float:right; 57 list-style:none; 58} 59/* header{ 60float:right; 61} */ 62h2{ 63 font-size:30px; 64 /* float:left; */ 65 border-bottom:3px solid black; 66} 67span1{ 68 color:gold; 69} 70span2{ 71 color:white; 72 background-color:black; 73} 74ul2{ 75 font-size:23px; 76 /* float:left; */ 77} 78/* p1{ 79 float:left; 80} */ 81li1{ 82 color:green; 83 background-color:black; 84} 85li2{ 86 color:orange; 87 background-color:black; 88} 89li3{ 90 color:red; 91 background-color:black; 92} 93ul3{ 94 font-size:23px; 95 /* float:left; */ 96 background-color:yellow; 97} 98p2{ 99 /* float:left; */ 100 padding:80px 0px 0px 0px; 101} 102input{ 103 padding:5px 70px; 104 /* float:left; */ 105} 106/* p3{ 107 float:left; 108} */ 109textarea{ 110 padding:15px 70px; 111 display: block; 112 /* float:left; */ 113} 114input { 115 display: block; 116} 117</style> 118

投稿2019/12/19 09:52

story_aniki

総合スコア197

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

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

kei344

2019/12/19 10:05

To: story_anikiさん 回答は編集できますよ。
kyoya0819

2019/12/19 10:36

同上の理由で低評価をさせていただきます。
guest

0

元のコードは、文法的にかなり怪しいですが、最大限、元のコードを活かして修正しました
floatの使い方を基本的に間違えていると思います

<!DCTYPE html> <html lang=“ja”> <head> <meta charset="utf-8"> <meta name="discription" content="kanno"> </head> <body> <div class="container1"> <tytle>山田太郎のポートフォリオサイト(練習)</tytle> <ul1> <a href="https://www.weblio.jp/content/amp/%E7%99%BA%E6%B3%A8">発注</a><br> <a href="https://chewy.jp/businessmanner/6441/">ご連絡</a> </ul1> <h1>山田太郎</h1> <h2>①<span1>タロウ</span1>の<span2>3つの言葉</span2></h2><br> <ul2> <li1>分析力</li1> <li2>思いやり</li2> <li3>強い意志</li3> </ul2> </div> <div class="container2"> <h2>②趣味、特技</h2><br> <ul3> <li4>読書•カフェ巡り•サッカー観戦</li4> </ul3> <br> <br> <br> </div> <div class="container3"> <p2>メールアドレス</p2> <input> <p3>ご意見、ご相談</p3> <textarea></textarea> </div> <style> body{ font-family:sans-serif; margin: 0 auto; width: 400px; } tytle{ font-size:15px; padding-bottom:20px; } h1{ color:gold; font-size:40px; padding:0px; margin:0px; } ul1{ float:right; list-style:none; } /* header{ float:right; } */ h2{ font-size:30px; /* float:left; */ border-bottom:3px solid black; } span1{ color:gold; } span2{ color:white; background-color:black; } ul2{ font-size:23px; /* float:left; */ } /* p1{ float:left; } */ li1{ color:green; background-color:black; } li2{ color:orange; background-color:black; } li3{ color:red; background-color:black; } ul3{ font-size:23px; /* float:left; */ background-color:yellow; } p2{ /* float:left; */ padding:80px 0px 0px 0px; } input{ padding:5px 70px; /* float:left; */ } /* p3{ float:left; } */ textarea{ padding:15px 70px; display: block; /* float:left; */ } input { display: block; } </style>

投稿2019/12/19 09:40

story_aniki

総合スコア197

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問