CssのFloatについて

css Floatについて

htmlとcssを使ってホームページを作っています。

その際に、縦にくっつけて並べているふたつの要素のペアを、他のペアと横並びにしたいのですが、どこに”float”を書けばいいのか教えてください。

ふたつの要素をくくった新たなクラスをそれぞれのペアに作りそこに”float”を書いてみたところ、そのクラスの中身のふたつの要素がふたつ別々に書いたはずなのに、本来は別色のはずの背景の色等が両方に適応されてしまっていたりします。

長文失礼します
本当の初心者ですいません
よろしくお願いします

htmlのコード

<div class="hitotume">
       <div class="yousoichi">
        <h2>要素１</h2>
       </div>
        <div class="yousoichihonnbunn">
         <p>要素１本文</p>
        </div>
</div>
<div class="hutatume">
       <div class="yousoni"> 
        <h2>要素２</h2>
       </div>
        <div class="yousonihonnbunn">
         <p> 要素２本文</p>
        </div>
 </div>
 <div class="mittume">
       <div class="yousosann"> 
        <h2>要素３</h2>
       </div>
        <div class="yousosannhonnbunn">
         <p>要素３本文</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;
 }

}

kei344

2019/03/24 11:38

ご自身で試されたコード（HTML/CSS）を質問文にコードブロックで追記されたほうが回答が望めると思います。

m.ts10806

2019/03/24 11:53

質問は編集できますので適宜ご対応ください

yoshinavi

2019/03/24 11:58

言葉のみの説明は、人により解釈が異なる事が多く、間違いの素となり、回答は付きにくいと思います。こういう場合は、その症状が再現するHTMLとCSSのコードも一緒に提示してください。また、「現状」の配置と、「要望」する配置のスクリーンショット、またはイメージ図等を添付すると、より良い回答を得れるかと思います。

kei344

2019/03/24 12:11

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2019/03/24 12:48

> 本当の初心者ですいません気にしなくていいと思います（というか書かなくてもいいと思います。初心者アイコンつけられてるので）

kei344

2019/03/24 12:53

「hitotume」の外側に要素がありそうな切れ方をしていますが、提示のHTMLで問題が再現するのでしょうか。また、CSSも「}」が足りませんが、これで全てでしょうか。

kei344

2019/03/24 14:03

「要素のペア」とはどれを指していますか？「他のペアと横並び」とはどの要素とどの要素が並んでいる状態でしょうか。

aness-i-rinupen

2019/03/24 14:28 編集

CSSの「｛」が足りなかったのは質問文へのコピーミスでした。すいません今訂正しました。要素のペアというのは、1、2、3それぞれの要素のタイトルと本文のペアのことです。横並びは、要素1と要素2を横並びに、そして今ここには書いていないのですが、横並びにした要素1、2の下に、要素3と要素4を横並びに、そしてその下に要素5と要素6を横並びに..... というような形で作りたいと考えています。わかりにくくてすいません。よろしくお願いします

aness-i-rinupen

2019/03/24 14:35

今ここに提示させていただいたコードは、実際のものとは本文やタイトル、クラス名は変更してありますが、名前以外は全てそのままコピーしたものです。

yoshinavi

2019/03/25 00:14

＞それぞれのペアに作りそこに”float”を書いてみたところ･･･　 →　CSSの「float」は、どこに書いたのでしょうか？＞本来は別色のはずの背景の色等が両方に適応されてしまっていたり･･･ →　提示のコードでは、背景色は「#6E2A40」の同色になっています。どこを変えたいのでしょうか？

kei344

2019/03/25 07:33

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に追記し、「解決済」にされてはいかがでしょうか。

aness-i-rinupen

2019/03/25 12:59

解決済みに変更しました。皆さんありがとうございました

行動規範の内容に同意します

回答3件

横並び

単純な横並びを実現したいのであれば、floatはお勧めしません。floatは文章中に画像などコンテンツを流し込む際には使用しますが、横並びレイアウトのためには私はもう使用していません。

FlexboxかGridをお勧めします。

【よこ並びのCSS。】
http://lopan.jp/layout/

#######Flexbox

【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
http://www.webcreatorbox.com/tech/flexbox/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

#######Grid

【CSS Grid Layout を極める！（基礎編） - Qiita】
https://qiita.com/kura07/items/e633b35e33e43240d363

【5分で完璧に分かる！CSS Gridの基本的な使い方を解説 | コリス】
https://coliss.com/articles/build-websites/operation/css/learn-css-grid-in-5-minutes.html

【CSS Gridを使ったレスポンシブ対応の基本レイアウト | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/css-grid-basic-layout

投稿2019/03/25 06:47

kei344

総合スコア69407

[要素1] [要素2]
[要素3] [要素4]

上記を目標として回答します。スマホからなので入力ミスがあったらすいません。
[主な変更点]
・cssの一部は省略しているので、必要に応じて足したり変更してください。
・cssの設定を見る限りdivタグが過剰と判断した為、変更しております。
[参考程度]
・widthやmargin-right,leftの様な幅指定は、"%"指定が無難です。
・body等の親要素でwidth:100%指定であれば、rowクラスのdivも不要です。

html
1<!--一行目の要素1,2 -->
2<div class="row">
3<div class="left">
4<h1>要素1</h1>
5<p>要素1本文</p>
6</div>
7<div class="right">
8<h1>要素2</h1>
9<p>要素2本文</p>
10</div>
11</div>
12<!--二行目の要素3,4-->
13<div class="row">
14<div class="left">
15以降同様....

css
1.row{
2width:100%;
3}
4.row:after{
5clear:left;
6}
7.left{
8float:left;
9background-color:#6E2A40;
10width:45%;
11margin:0 1%;
12padding:1% 1%;
13}
14.left h1{
15color:yellow;
16}
17.left p{
18/＊pタグのフォントカラーやサイズ設定等を記述＊/
19}
20.right{
21float:left;
22/＊left同様に記述＊/
23}
24.right h1{
25/＊left同様＊/
26}
27.right p{
28/＊left同様＊/
29}