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

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

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

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

Q&A

解決済

CSS ブロック要素をインラインにしたい

seika
seika

総合スコア3

CSS

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

1回答

0グッド

0クリップ

194閲覧

投稿2022/11/29 05:20

編集2022/11/29 05:37

イメージ説明### CSS ブロック要素をインラインにしたい

2段の見出しを作り・たいのですが、二段目のタイトルの位置が中途半端なところにきてしまいます。

実現したいこと

二段の見出しを作りたい

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

二段目のタイトルが始まる位置を指定できない![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-11-29/f95daaa3-8cbb-42ed-874a-0fc60fc92f8e.png) `` ### ・html (headは省略しています) <div class="nemu-bar" style="border: solid 1px red;"> menu bar </div> <div class="Section"> <h2>Section1</h2> <div class="header" style="border: solid 1px red;"> header1 </div> <div class="header" style="border: solid 1px red;"> header2 </div> <div class="header" style="border: solid 1px red;"> header3 </div> </div> <div class="Section"> <h2>Section2</h2> <div class="header" style="border: solid 1px red;"> header1 </div> <div class="header" style="border: solid 1px red;"> header2 </div> <div class="header" style="border: solid 1px red;"> header3 </div> </div> ```css body { margin: 0; padding: 0 30px; } .nemu-bar { width: 100%; height: 100px; } .header { text-align: center; float: left; width: 25%; height: 300px; }

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

適切な質問に修正を依頼しましょう。

回答1

1

ベストアンサー

想定する結果イメージがわからないのでなんですが
この手の処理をfloatデザインするのはちょっと古いかも

css

1<style> 2.section{ 3display:flex; 4 flex-wrap:wrap; 5} 6.section h2{ 7width:100%; 8} 9.header{ 10width: 25%; 11 height: 300px; 12} 13</style> 14<div class="nemu-bar" style="border: solid 1px red;"> 15 menu bar 16 </div> 17 18 <div class="Section"> 19 <h2>Section1</h2> 20 <div class="header" style="border: solid 1px red;"> 21 header1 22 </div> 23 <div class="header" style="border: solid 1px red;"> 24 header2 25 </div> 26 <div class="header" style="border: solid 1px red;"> 27 header3 28 </div> 29 </div> 30 <div class="Section"> 31 <h2>Section2</h2> 32 <div class="header" style="border: solid 1px red;"> 33 header1 34 </div> 35 <div class="header" style="border: solid 1px red;"> 36 header2 37 </div> 38 <div class="header" style="border: solid 1px red;"> 39 header3 40 </div> 41 </div>

投稿2022/11/29 05:34

yambejp

総合スコア109126

spoofy_dragon👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

seika

2022/11/29 05:44

教えていただいてありがとうございます! 学校の課題で、floatを使ってやってみるっていうものだったのですが、よくわからず、、、 flex覚えます!
yambejp

2022/11/30 03:35

とりえあずfloatであればclearを利用する必要があります .Section ~ *{clear:left;}

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

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

CSS

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