Q&A
何をどう詰めたいのかわからないので現在のコードを提示して下さい。
リンク内容
↑理想画
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>
状況が分からないのでHTMLとCSSを全文載せてください。
また、現在どのような状態になっているか画像があれば、回答者が答えやすくなると思います。
<!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>
すみません！こんな感じです！
（質問は修正できるので質問本文に追記して下さい）
（<code>ってボタンを押すとでてくるマークダウンの中に）
了解です
左詰にしたいのはどの部分ですか？
山田太郎と「<h2>①<span1>タロウ</span1>の<span2>3つの言葉</span2></h2><br>」を並べたいというこことでしょうか？
簡単なもので構いませんので、イメージ画などあるとアドバイスしやすいです
回答3件
0
多分むやみやたらと突っ込んでいる float:left
が諸悪の根源です。
HTMLが結構悲惨なので最終的な理想像は私にはわかりませんが、
要素を横並びさせたいのなら float:left以外にもやり方はたくさんあります。
本当にfloat:left; が正しいのかもう一度考えてみてください。
横並びサンプル１
HTML
1<ul class="test1"> 2 <li>テスト１</li> 3 <li>テスト２</li> 4 <li>テスト３</li> 5</ul>
CSS
1.test1{ 2 display:flex; /* 横並び */ 3 justify-content:space-evenly; /* 等間隔 */ 4} 5 6.test1 { 7 list-style: none; /* マークを消す */ 8}
横並びサンプル２
HTML
1<ul class="test2"> 2 <li>テスト１</li> 3 <li>テスト２</li> 4 <li>テスト３</li> 5</ul>
CSS
1.test2 li { 2 display:inline; /* インライン要素に変更 */ 3}
投稿2019/12/19 08:48
編集2019/12/19 08:59総合スコア2341
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
総合スコア197
To: story_anikiさん
回答は編集できますよ。
同上の理由で低評価をさせていただきます。
0
元のコードは、文法的にかなり怪しいですが、最大限、元のコードを活かして修正しました
floatの使い方を基本的に間違えていると思います
投稿2019/12/19 09:40
総合スコア197
あなたの回答
tips
プレビュー
