css Floatについて
htmlとcssを使ってホームページを作っています。
その際に、縦にくっつけて並べているふたつの要素のペアを、他のペアと横並びにしたいのですが、どこに”float”を書けばいいのか教えてください。
ふたつの要素をくくった新たなクラスをそれぞれのペアに作りそこに”float”を書いてみたところ、そのクラスの中身のふたつの要素がふたつ別々に書いたはずなのに、本来は別色のはずの背景の色等が両方に適応されてしまっていたりします。
長文失礼します
本当の初心者ですいません
よろしくお願いします
htmlのコード
<div class="hitotume"> <div class="yousoichi"> <h2>要素1</h2> </div> <div class="yousoichihonnbunn"> <p>要素1本文</p> </div> </div> <div class="hutatume"> <div class="yousoni"> <h2>要素2</h2> </div> <div class="yousonihonnbunn"> <p> 要素2本文</p> </div> </div> <div class="mittume"> <div class="yousosann"> <h2>要素3</h2> </div> <div class="yousosannhonnbunn"> <p>要素3本文</p> </div> </div>
cssのコード
@media screen and (min-width:961px) { .yousoichi{ font-size:24px; background-color:#6E2A40; box-shadow: 0px 0px 0px 5px #6E2A40; border:dashed 2px white; padding:3px 15px; margin-right:20px; margin-left:20px; } .yousoichi h2{ color:white; } .yousoichihonnbunn{ font-size:16px; border-right:2px solid #808080; border-left:2px solid #808080; border-bottom:2px solid #808080; padding:5px 10px 10px 10px; margin-bottom:15px; margin-right:15px; margin-left:15px; } .yousoni{ font-size:24px; background-color:#6E2A40; box-shadow: 0px 0px 0px 5px #6E2A40; border:2px dashed white; padding:3px 15px; margin-right:20px; margin-left:20px; } .yousoni h2{ color:white; } .yousonihonnbunn{ font-size:16px; border-right:2px solid #808080; border-left:2px solid #808080; border-bottom:2px solid #808080; padding:5px 10px 10px 10px; margin-bottom:15px; margin-right:15px; margin-left:15px; } .yousosann{ font-size:24px; background-color:#6E2A40; box-shadow: 0px 0px 0px 5px #6E2A40; border:2px dashed white; padding:3px 15px; margin-right:20px; margin-left:20px; } .yousosann h2{ color:white; } .yousosannhonnbunn{ font-size:16px; border-right:2px solid #808080; border-left:2px solid #808080; border-bottom:2px solid #808080; padding:5px 10px 10px 10px; margin-bottom:15px; margin-right:15px; margin-left:15px; } }
ご自身で試されたコード(HTML/CSS)を質問文にコードブロックで追記されたほうが回答が望めると思います。
質問は編集できますので適宜ご対応ください
言葉のみの説明は、人により解釈が異なる事が多く、間違いの素となり、回答は付きにくいと思います。
こういう場合は、その症状が再現するHTMLとCSSのコードも一緒に提示してください。
また、「現状」の配置と、「要望」する配置のスクリーンショット、またはイメージ図等を添付すると、より良い回答を得れるかと思います。
質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
> 本当の初心者ですいません
気にしなくていいと思います(というか書かなくてもいいと思います。初心者アイコンつけられてるので)
「hitotume」の外側に要素がありそうな切れ方をしていますが、提示のHTMLで問題が再現するのでしょうか。また、CSSも「}」が足りませんが、これで全てでしょうか。
「要素のペア」とはどれを指していますか?「他のペアと横並び」とはどの要素とどの要素が並んでいる状態でしょうか。
CSSの「{」が足りなかったのは質問文へのコピーミスでした。すいません
今訂正しました。
要素のペアというのは、1、2、3それぞれの要素のタイトルと本文のペアのことです。
横並びは、要素1と要素2を横並びに、そして今ここには書いていないのですが、横並びにした要素1、2の下に、要素3と要素4を横並びに、そしてその下に要素5と要素6を横並びに.....
というような形で作りたいと考えています。
わかりにくくてすいません。
よろしくお願いします
今ここに提示させていただいたコードは、実際のものとは本文やタイトル、クラス名は変更してありますが、名前以外は全てそのままコピーしたものです。
>それぞれのペアに作りそこに”float”を書いてみたところ・・・
→ CSSの「float」は、どこに書いたのでしょうか?
>本来は別色のはずの背景の色等が両方に適応されてしまっていたり・・・
→ 提示のコードでは、背景色は「#6E2A40」の同色になっています。どこを変えたいのでしょうか?
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に追記し、「解決済」にされてはいかがでしょうか。
解決済みに変更しました。
皆さんありがとうございました
回答3件
あなたの回答
tips
プレビュー