画像が横並びになりません

実現したいこと

.workingimgを横並びにしたい

newsクラスを横並びにしたい

ラベルタグのdtとddの間に余白がほしい

発生している問題・分からないこと

模写コーディング(https://code-jump.com/demo/html/portfolio1/)のようにならない

https://felix-915.github.io/Mywork/

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>My Work</title>
8  <link rel="stylesheet" href="style.css">
9</head>
10<body>
11
12 <header >
13  <div class="title">
14    <h1>My Work</h1>
15
16    <ul >
17      <li>About</li>
18      <li>Works</li>
19      <li>News</li>
20      <li>Contact</li>
21      <li><img src="icon-instagram.png" alt="instagrm" width="20"></li>
22
23
24
25    </ul>
26
27  </div>
28</header> 
29
30<div class="mainimg">
31  <img src="mainvisual-pc.jpg" alt="" >
32</div>
33  
34  
35 
36<main>
37 <section id="about" class="container">
38  <h2>About</h2>
39  <p>Xxxxx Ashley</p>
40  <div class="post">
41  <p>
42    2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan<br>
43    tel: 000-0000-0000 <br>
44    url: www.xxxxxx.jp <br>
45    mail: xxx@xxxxxx.jp <br>
46  </p>
47</div>
48
49<p>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
50
51
52 </section>
53
54 <section id="works" class="container">
55  <h2>works</h2>
56  <div class="worksimg">
57    <img src="works1.jpg" alt="">
58    <img src="works2.jpg" alt="">
59    <img src="works3.jpg" alt="">
60    <img src="works4.jpg" alt="">
61    <img src="works5.jpg" alt="">
62    <img src="works6.jpg" alt="">
63
64  </div>
65 </section>
66
67 <section id="newss" class="container">
68  <h2>News</h2>
69   <div class="news">
70          <dt>2020.XX.XX</dt>
71          <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
72          <dt>2020.XX.XX</dt>
73          <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
74          <dt>2019.XX.XX</dt>
75          <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
76          <dt>2019.XX.XX</dt>
77          <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
78          <dt>2019.XX.XX</dt>
79          <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
80        </dl>
81      </div>
82
83
84 </section>
85
86
87 <section id="contact" class="container">
88  <h2>Contact</h2>
89  <div class="text">
90    <dl>
91      <dt><label for="name">NAME</label></dt>
92      <dd><input type="text" id="name" name="your-name"></dd>
93      <dt><label for="email">E-mail</label></dt>
94      <dd><input type="email" id="email" name="your-email"></dd>
95      <dt><label for="message">MESSAGE</label></dt>
96      <dd><textarea id="message" name="your-message"></textarea></dd>
97    </dl>
98
99    
100  <!-- <label for="name">NAME
101    <input type="text" id="name">
102  </label>
103
104  <label for="e-mail" >E-mail
105    <input type="text" id="e-mail">
106  </label>
107
108  <label for="massage" >MESSAGE
109    <input type="text" id="massage">
110  </label> -->
111</div>
112<div class="btn">
113<button>送信</button>
114</div>
115 </section>
116</main>
117
118<footer>
119  <small>
120    © 2020 My Work
121  </small>
122</footer>
123</body>
124</html>

css
1@charset "utf-8";
2
3body{
4  margin: 0;
5
6}
7
8html {
9  font-size: 100%;
10}
11h1{
12  margin: 0;
13  font-weight: normal;
14  font-size: 30px;
15  
16}
17
18h2{
19  margin: 30px;
20  font-size: 22px;
21  text-align: center;
22  padding-bottom: 30px;
23
24}
25
26p{
27  margin: 0;
28}
29
30img {
31  max-width: 100%;
32}
33li {
34  list-style: none;
35}
36
37header{
38  max-width: 960px;
39padding: 0 4%;
40
41margin: 0px auto;
42
43  
44}
45
46.container{
47  max-width: 960px;
48  margin: 0 auto;
49  margin-top: 80px;
50
51}
52
53.title{
54  display: flex;
55  justify-content: space-between;
56  align-items: center;
57  height: 270px;
58}
59
60.title ul{
61  display: flex;
62}
63
64.title ul li{
65  font-size: 0.9rem;
66margin-left: 30px;
67}
68
69
70.mainimg img{
71  width: 100%;
72  height: 420px;
73  object-fit: cover;
74}
75
76/* .container{
77  margin-top: 80px;
78} */
79
80#about p{
81  margin: 25px;
82  font-size: 14px;
83}
84
85/* dekinai */
86.worksimg {
87 
88  display:flex;
89  justify-content: space-between; 
90  flex-wrap: wrap;
91}
92
93.news dl {
94  display: flex;
95  flex-wrap: wrap;
96  border-top: solid 1px #c8c8c8;
97  margin-bottom: 20px;
98}
99.news dt {
100  width: 20%;
101  border-bottom: solid 1px #c8c8c8;
102  padding: 15px;
103}
104.news dd {
105  width: 80%;
106  border-bottom: solid 1px #c8c8c8;
107  padding: 15px;
108}
109
110/* 
111.text{
112  display: flex;
113  flex-wrap: wrap;
114
115} */
116
117/* .text {
118  
119  display: flex;
120  flex-wrap: wrap;
121  margin-bottom: 20px ;
122  
123}
124
125#name{
126 width: 80%;
127 height:40px;
128
129}
130
131#e-mail{
132  width: 80%;
133  height:40px;
134 
135 }
136
137 #massage{
138  width: 80%;
139  height:100px;
140 
141 } */
142
143
144 #contact dl {
145  display: flex;
146  flex-wrap: wrap;
147  margin-bottom: 20px;
148}
149#contact dt {
150  width: 15%;
151}
152#contact dd {
153  width: 85%;
154  margin-bottom: 10px;
155}
156#contact dd input,
157#contact dd textarea {
158  width: 100%;
159  border: solid 1px #c8c8c8;
160  padding: 10px;
161}
162#contact dd textarea {
163  height: 10rem;
164}
165
166.btn{
167  text-align: center;
168}
169
170.btn button{
171  
172
173 width: 200px;
174 background-color: #24292e;
175 color: #fff;
176 padding: 15px 0;
177 border: solid 1px #24292e;
178}
179
180
181footer{
182text-align: center;
183margin-top: 100px;
184background-color: #24292e;
185  color: #fff;
186
187  padding: 7px;
188  font-size: 0.7rem;
189
190}
191
192
193 
194 
195
196

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

ラベルタグでは要素が横並びにならないと思い模写コーディングのようにdlタグを使用した

ラベルタグは模写コーディングと同じコードだが要素が横並びにならない

補足

特になし

Lhankor_Mhy

2024/08/23 01:02

ご提示のページを拝見しましたが、CSSファイルの読み込みに失敗しているようです。パスやファイル名をご確認されてはどうでしょうか。

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

回答2件

.worksimg
imgのwidthが設定されていないため、bodyの100％に対して2つ画像が入らない状態です。

詳しいサイズはわかりませんが、簡単に言うと
100のbodyに対して
80のimgだと合計で160になるので、横並びにならず縦に並びます。

お手本だと横に3つ並んでると思うので、例えばimgに対して33％を指定すれば横並びになります。

css
1.worksimg img{
2  width:33%;
3}

ラベルタグの横並びについて

まず、htmlのコードで、<dl>の開始タグが抜けてます。

あと、<dt> <dd>にwidthが100％になるようにそれぞれ20%,80%を指定していますが、padding15pxを加えることでその分widthが広がって100%を超えてしまうため横並びになりません。

box-sizing:border-box;
をいれることで、paddingを含んだwidthを設定できるようになります。

あとは、初期値として<dd>にmargin-leftが設定されているので、それを0にすれば横並びになります。

↓元のコードをできるだけ崩さないように入れてます。

css
1.news dl {
2  display: flex;
3  flex-wrap:wrap;
4  border-top: solid 1px #c8c8c8;
5  margin-bottom: 20px;
6}
7.news dt {
8  width: 20%;
9  border-bottom: solid 1px #c8c8c8;
10  padding: 15px;
11  box-sizing:border-box;
12}
13.news dd {
14  width: 80%;
15  border-bottom: solid 1px #c8c8c8;
16  padding: 15px;
17  margin-left:0;
18  box-sizing:border-box;
19}

全体的にwidthの設定がされてないなどあったので、これだけではないと思いますが、一応これでやりたいことはできるかなと思います。

投稿2024/08/25 13:16

編集2024/08/25 15:29

退会済みユーザー

総合スコア0

worksimgはimgのサイズ次第。きちんとサイズを指定して表示してくださいaltも空ではないものがベターです
newsは構造が悪いと思います、横並びにしいたいdt+dlの組み合わせごとにdlで囲みdiv.newsでflexを試してみてください
typoも見受けられるし、もう少し正確性を重視しないと回答がブレるかもしれません。

投稿2024/08/23 01:14