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

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

ただいまの
回答率

88.62%

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

受付中

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 284

Kanno_Yama

score 8

リンク内容
↑理想画

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>

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • azuapricot

    2019/12/19 17:44

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

    キャンセル

  • Kanno_Yama

    2019/12/19 17:49

    了解です

    キャンセル

  • ebiten777

    2019/12/19 17:50

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

    キャンセル

回答 3

+3

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

が諸悪の根源です。

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

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


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

<ul class="test1">
  <li>テスト1</li>
  <li>テスト2</li>
  <li>テスト3</li>
</ul>
.test1{
  display:flex; /* 横並び */
  justify-content:space-evenly; /* 等間隔 */
}

.test1 {
  list-style: none; /* マークを消す */
}

Flexboxレイアウトまとめ


横並びサンプル2

イメージ説明

<ul class="test2">
  <li>テスト1</li>
  <li>テスト2</li>
  <li>テスト3</li>
</ul>
.test2 li {
  display:inline; /* インライン要素に変更 */
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/12/19 18:01

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

    キャンセル

-1

元のコードは、文法的にかなり怪しいですが、最大限、元のコードを活かして修正しました
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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

-1

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

<!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>
</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 19:05

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

    キャンセル

  • 2019/12/19 19:36

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

    キャンセル

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

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る