CSS　floatのかけ方と、マルチデバイス用のフロートのかけ方

初歩的な質問で大変申し訳ないのですが、フロートが上手にかけられません。

各要素にfloatをかけると、#prof-detailsの背景色の範囲から外れる上、上記の配置が理想なのですが、それも上手にかかりません。
また、レスポンシブ対応させたいのですが、初期の段階（レスポンシブ前の状態）がまずうまくいっていないので、手をつけられずにいます。
自分で試行錯誤しましたが、うまくいかなかったため、質問させていただきました。

大変申し訳ないのですが、どなたかご回答よろしくお願いします。

css
1#plofile{
2	position: relative;
3	padding: 10%;
4}
5
6#plof-top{
7	position: relative;
8	text-align: center;
9}
10
11#plof-top{
12	position: relative;
13	padding: 0 10% 0;
14}
15
16#plof-top p{
17	margin-bottom: 25px;
18}
19
20#contact-button {
21	text-align: center;
22}
23
24
25#ghost{
26	position: relative;
27	float: left;
28}
29
30#prof-details{
31	position: relative;
32	color: black;
33	background-color: rgba(240, 240, 240, 0.7);
34	border-radius: 10px;
35	width: 800px;
36	font-size: 0.8em;
37	padding: 5%;
38}
39
40#web-design{
41	position: relative;
42	float: left;
43}
44
45#web-coding{
46	position: relative;
47	float: right;
48}
49
50#web-SEO{
51	position: relative;
52	float: right;
53}
54
55#Qualification{
56	position: relative;
57	float: left;
58}
59
60#performance{
61	position: relative;
62	float: left;
63}
64
65#plofimg img{
66	position: relative;
67}

html
1    <!-- プロフィール ----------------------------------------->
2    <div class="section">
3      <div id="plofile">
4        <section id="plof-top">
5          <h2>Profile</h2>
6          <div id="plofimg">
7          <img src="img/ghost01.png">
8        </div>
9          <hr color="#fff" width="500" size="1" noshade="">
10          <p>説明１</p>
11        </section>
12
13        <!-- プロフィール詳細 -------------------------->
14          <section id="prof-details">
15  <article id="web-design">
16    <h3>title01</h3>
17    <ul>
18      <li>01</li>
19      <li>01</li>
20      <li>01</li>
21      <li>01</li>
22      <li>01</li>
23      <li>01</li>
24    </ul>
25  </article>
26  
27  <article id="web-coding">
28    <h3>title02</h3>
29    <ul>
30      <li>02</li>
31      <li>02</li>
32      <li>02</li>
33      <li>02</li>
34    </ul>
35
36    <article id="web-SEO">
37      <h3>title03</h3>
38      <ul>
39        <li>03</li>
40        <li>03</li>
41        <li>03</li>
42        <li>03</li>
43      </ul>
44 
45<article id="Qualification">
46  <h3>title04</h3>
47  <ul>
48    <li>04</li>
49    <li>04</li>
50  </ul>
51</article>
52
53<article id="performance">
54  <h3>title05</h3>
55  <ul>
56    <li>05</li>
57    <li>05</li>
58    <li>05</li>
59  </ul>
60</article>
61</section>
62         <p id="contact-button">
63          <a href="#page8" class="btn-flat-border-pink">CONTACT</a>
64        </p> 
65      </div>
66    </div>

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

回答2件

ベストアンサー

HTMLファイルに、article要素の終了タグの閉じ忘れが2箇所あるので、まずはそれを修正してください。あと、プロフィールの綴りはprofileですから、「plof」で始まるIDは直しておきましょう。

そして、floatレイアウトはあきらめて、flexレイアウトを行なってください。

HTML
1    <body>
2        <!-- プロフィール -->
3        <div class="section">
4            <div id="profile">
5                <section id="prof-top">
6                    <h2>Profile</h2>
7                    <div id="profimg">
8                        <img src="img/ghost01.png" alt="(画像の代替テキスト)">
9                    </div>
10                    <hr>
11                    <p>説明１</p>
12                </section>
13
14                <!-- プロフィール詳細 -->
15                <section id="prof-details">
16                    <div class="prof-container">
17                        <article id="web-design">
18                            <h3>title01 design</h3>
19                            <ul>
20                                <li>01</li>
21                                <li>01</li>
22                                <li>01</li>
23                                <li>01</li>
24                                <li>01</li>
25                                <li>01</li>
26                            </ul>
27                        </article>
28                        <div>
29                            <article id="web-coding">
30                                <h3>title02 coding</h3>
31                                <ul>
32                                    <li>02</li>
33                                    <li>02</li>
34                                    <li>02</li>
35                                    <li>02</li>
36                                </ul>
37                            </article>
38
39                            <article id="web-SEO">
40                                <h3>title03 SEO</h3>
41                                <ul>
42                                    <li>03</li>
43                                    <li>03</li>
44                                    <li>03</li>
45                                    <li>03</li>
46                                </ul>
47                            </article>
48                        </div>
49                    </div>
50
51                    <article id="Qualification">
52                        <h3>title04 Qualification</h3>
53                        <ul>
54                            <li>04</li>
55                            <li>04</li>
56                        </ul>
57                    </article>
58
59                    <article id="performance">
60                        <h3>title05 performance</h3>
61                        <ul>
62                            <li>05</li>
63                            <li>05</li>
64                            <li>05</li>
65                        </ul>
66                    </article>
67                </section>
68                <p id="contact-button">
69                    <a href="#page8" class="btn-flat-border-pink">CONTACT</a>
70                </p>
71            </div>
72        </div>
73    </body>

CSS
1* {
2    box-sizing: border-box;
3}
4
5#profile {
6    padding: 10%;
7}
8
9#prof-top {
10    text-align: center;
11    padding: 0 10%;
12}
13
14#prof-top p {
15    margin-bottom: 25px;
16}
17
18#contact-button {
19    text-align: center;
20}
21
22#prof-details {
23    color: black;
24    background-color: rgba(240, 240, 240, 0.7);
25    border-radius: 10px;
26    width: 800px;
27    font-size: 0.8em;
28    padding: 5%;
29    margin: 0 auto;
30}
31
32.prof-container {
33    display: flex;
34    justify-content: space-between;
35}
36
37#web-design {
38    border: 1px solid red;
39}
40
41#web-coding {
42    border: 1px solid green;
43}
44
45#web-SEO {
46    border: 1px solid blue;
47}
48
49#Qualification {
50    border: 1px solid pink;
51}
52
53#performance {
54    border: 1px solid magenta;
55}
56
57@media screen and (max-width: 800px) {
58    #profile {
59        padding: 0;
60    }
61
62    #prof-details {
63        width: 100%;
64        padding: 5%;
65    }
66
67    .prof-container {
68        display: block;
69    }
70}

投稿2020/09/25 14:04

Daregada

総合スコア11990

t01bi01

2020/10/13 09:20

解決いたしました。ご回答ありがとうございました。

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

float をかけなければ、普通に縦に並ぶので、モバイルファーストのレスポンシブにして、
ブレークポイントのサイズ以上で float をかければいいでしょう。
float をかけた要素は浮いた状態になるので、後の要素が上に移動してきて重なってしまうので、
clear: both; で回り込みを解除します。

css
1#plofile{
2  position: relative;
3  padding: 10%;
4}
5
6#contact-button {
7  text-align: center;
8}
9
10#prof-details{
11  position: relative;
12  color: black;
13  background-color: rgba(240, 240, 240, 0.7);
14  border-radius: 10px;
15  font-size: 0.8em;
16  padding: 5%;
17}
18#prof-details article {
19  border: 1px solid;  
20  margin: 5px;
21}
22
23/* ブレークポイントは仮に800pxにしてます。 */
24@media print, screen and (min-width: 800px) {
25  #web-design {
26    width: 45%;
27    float: left;
28  }
29  #web-coding {
30    width: 45%;
31    float: right;
32  }
33  #web-SEO {
34    width: 45%;
35    float: right;
36  }
37  #Qualification {
38    clear: both;
39  }
40}

HTMLで article の閉じタグが不足してます。

html
1<!-- プロフィール ----------------------------------------->
2<div class="section">
3  <div id="plofile">
4    <!-- プロフィール詳細 -------------------------->
5    <section id="prof-details">
6      <article id="web-design">
7        <h3>title01 web-design</h3>
8        <ul>
9          <li>01</li>
10          <li>01</li>
11          <li>01</li>
12          <li>01</li>
13          <li>01</li>
14          <li>01</li>
15        </ul>
16      </article>
17
18      <article id="web-coding">
19        <h3>title02 web-coding</h3>
20        <ul>
21          <li>02</li>
22          <li>02</li>
23          <li>02</li>
24          <li>02</li>
25        </ul>
26      </article>
27      <article id="web-SEO">
28        <h3>title03 web-SEO</h3>
29        <ul>
30          <li>03</li>
31          <li>03</li>
32          <li>03</li>
33          <li>03</li>
34        </ul>
35      </article>
36      <article id="Qualification">
37        <h3>title04 Qualification</h3>
38        <ul>
39          <li>04</li>
40          <li>04</li>
41        </ul>
42      </article>
43
44      <article id="performance">
45        <h3>title05 performance</h3>
46        <ul>
47          <li>05</li>
48          <li>05</li>
49          <li>05</li>
50        </ul>
51      </article>
52    </section>
53  </div>
54</div>