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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

1回答

681閲覧

画像とコンテンツが中央寄せにならない/flex-wrapで画像改行されない

fito3

総合スコア1

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2022/09/18 03:16

編集2022/09/23 14:47

リンク内容イメージ説明イメージ説明### 前提
codestep初級編でコーディング練習をしています。
3点上手く表示されない箇所があります。

実現したいこと

1:class名「mainvisual」の画像を全幅指定したい。(画面幅が変わっても)
2:各コンテンツを常に中央寄せにしたい。
3:id名「works」の6つの画像を、flex-wrapで改行させ、3列表示させる。

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

1・2
画面幅を縮小させ、おおよそ768pxよりサイズ下になると
コンテンツや画像が左に寄り、中央寄せにならない。


flex-wrapで指定すると1列に改行されてしまう。

該当のソースコード

HTML/CSS

1HTML 2<!DOCTYPE html> 3 4<html lang="ja"> 5 6<head> 7 <meta charset="UTF-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <script src="https://kit.fontawesome.com/205b28f9d8.js" crossorigin="anonymous"></script> 11 <title>Portfolio</title> 12 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 13 <link rel="stylesheet" href="CSS/style.css"> </head> 14 <body> 15 16<header class="header"> 17 <h1> 18 <img src="img/logo.svg" alt="My Work"> 19 </h1> 20 21 <nav> 22 <ul class="container"> 23 <li class="item"><a href="#">About</a></li> 24 <li class="item"><a href="#">Works</a></li> 25 <li class="item"><a href="#">News</a></li> 26 <li class="item"><a href="#">Contact</a></li> 27 <li class="item"><a href="#"><i class="fa-brands fa-instagram fa-2x"></i></a> 28 </li> 29 </ul> 30 </nav> 31</header> 32 33<main> 34<div class="mainvisual"> 35 <picture> 36 <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg"> 37 <img src="img/mainvisual-pc.jpg" alt="mainvisual"> 38 </picture> 39</div> 40 41<section id="wrapper"> 42 <h2 class="about" id="about">About</h2> 43 <ul class="list"> 44 <li class="list-tytle">Xxxxx Ashley</li> 45 <li class="text">2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 japan</li> 46 <li class="text">tel:000-0000-0000</li> 47 <li class="text">url:www.xxxxxx.jp</li> 48 <li class="text">mail:xxx@xxxxxx.jp</li> 49 <li>プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト 50 テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</li> 51 </ul> 52</section> 53 54<section id="wrapper"> 55 <h2 class="works" id="works">Works</h2> 56 57 <div class="work-container"> 58 <div class="work-item"> 59 <img src="img/works1.jpg" alt="works1"> 60 </div> 61 <div class="work-item"> 62 <img src="img/works2.jpg" alt="works2"> 63 </div> 64 <div class="work-item"> 65 <img src="img/works3.jpg" alt="works3"> 66 </div> 67 <div class="work-item"> 68 <img src="img/works4.jpg" alt="works4"> 69 </div> 70 <div class="work-item"> 71 <img src="img/works5.jpg" alt="works5"> 72 </div> 73 <div class="work-item"> 74 <img src="img/works6.jpg" alt="works6"> 75 </div> 76 </div> 77</section> 78<section id="wrapper"> 79 <h2 class="news" id="news">News</h2> 80 <dl> 81 <dt>2022.xx.xx</dt> 82 <dd>デザイン雑誌「XXXXXX Vol.11』に掲載していただきました。</dd> 83 <dt>2022.xx.xx</dt> 84 <dd>XX月XX日から写真集「XXXXXXX」の販売を開始します。</dd> 85 <dt>2022.xx.xx</dt> 86 <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 87 <dt>2022.xx.xx</dt> 88 <dd>デザイン雑誌「XXXXXX Vol.10』に掲載していただきました。</dd> 89 <dt>2022.xx.xx</dt> 90 <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd> 91 </dl> 92</section> 93 94<section id="wrapper"> 95 <h2 class="contact" id="contact">Contact</h2> 96 <form action="#" method="post"> 97 <dl> 98 <dt><label for="name">NAME</label></dt> 99 <dd><input type="text" id="name" name="your-name"></dd> 100 <dt><label for="email">E-MAIL</label></dt> 101 <dd><input type="text" id="email" name="your-email"></dd> 102 <dt><label for="message">MESSAGE</label></dt> 103 <dd><textarea id="message" name="your-message"></textarea></dd> 104 </dl> 105 <div class="button"><input type="submit" value="送信"></div> 106 </form> 107</section> 108 109</main> 110 111</body> 112</html> 113 114 115---------------------- 116CSS 117 118#wrapper { 119 max-width: 960px; 120 margin: 100px auto; 121 padding: 0 4%; 122} 123 124.header { 125 max-width: 960px; 126 display: flex; 127 justify-content: space-between; 128 align-items: center; 129 height: 270px; 130 margin: 0 auto ; 131} 132 133header h1 img { 134 margin-left:1.5rem; 135 margin-right: 200px; 136} 137 138.container { 139 width: 100%; 140 list-style: none; 141 display: flex; 142 align-items: center; 143} 144 145.item { 146} 147 148a { 149 text-decoration: none; 150 color: black; 151 margin: 0 1.5rem; 152} 153 154/* mainvisual */ 155.mainvisual { 156} 157 158.mainvisual img { 159 width: 100%; 160 height: 270px; 161 object-fit: cover; 162} 163 164/* about */ 165.about { 166 margin-top: 80px; 167 text-align: center; 168} 169 170.list { 171 width: 100%; 172 margin-top: 5rem; 173 margin-left:3rem; 174 margin-bottom: 3rem; 175 list-style:none; 176} 177 178.list-tytle { 179 margin-bottom: 2rem; 180} 181 182.text { 183} 184 185#about ul li:last-child { 186 margin-top: 50px; 187 text-align: justify; 188} 189 190/* works */ 191.works { 192 margin-top: 80px; 193 text-align: center; 194} 195 196.work-container { 197 width: 100%; 198 display:flex; 199 flex-wrap: wrap; 200 margin-bottom: 100px; 201} 202 203.work-item img { 204 width: 250px; 205 height: 200px; 206 /* margin: 15px; */ 207} 208 209/* newe */ 210.news { 211 margin-top: 80px; 212 margin-bottom: 80px; 213 text-align: center; 214} 215 216dl { 217 width: 100%; 218 font-size: 14.4px 219} 220 221hr { 222 margin: 15px 0; 223} 224 225dt { 226 float: left; 227} 228 229dd { 230 margin-left: 200px; 231} 232 233/* contact */ 234.contact { 235 text-align: center; 236 margin-bottom: 80px; 237} 238 239#contact dl { 240} 241 242#contact dt { 243 width: 15%; 244} 245 246#contact dd { 247 width: 85%; 248 margin-bottom: 10px; 249} 250 251#contact dd input, 252#contact dd textarea { 253 width: 100%; 254 border:solid 1px #c8c8c8; 255 padding: 10px; 256} 257 258#contact dd textarea { 259 height: 10rem; 260} 261 262#contact .button { 263 text-align: center; 264} 265 266.button input { 267 background-color:#24292e; 268 width: 10rem; 269 text-align: center; 270 color: white; 271 padding: 1rem 3rem; 272}

試したこと

1「mainvisual」をwidth:100%で全幅指定。

2各コンテンツをclass="wrapper"と名付け、中央寄せになるよう共有指定。
max-widht:960px;
margin: 0 auto;

3「works」
親要素にflexboxのwrapで改行するよう指定。子要素の幅は3列分の幅になるよう
width:30%で指定。

以上
よろしくお願いいたします。

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

レイアウト画像のスクリーンショットを追記いたしました。

上画像)現状作成中のもの(画面幅縮小すると、中央寄せにならず、右側に余白ができてる状態です。)
下画像)希望する内容(画面幅が縮小されても、右側に余白ができていません。)

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

1・2

.listmargin-left のせいで画面幅からはみ出してます。
これを削除してください。

css

1.list { 2 width: 100%; 3 margin-top: 5rem; 4/* margin-left:3rem; */ 5 margin-bottom: 3rem; 6 list-style:none; 7}

work-itemの画像は、 display:flex;で横並びにしてますので、justify-content: center;で中央寄せします。

css

1.work-container { 2 width: 100%; 3 display:flex; 4 justify-content: center; /* 追加 */ 5 flex-wrap: wrap; 6 margin-bottom: 100px; 7}

work-itemを画面幅に関係なく3列にするなら、幅を30%にすればいいはずです。
子要素のimgは親の幅にあわせるために!00%にします。

css

1.work-item { 2 width: 30%; 3} 4 5.work-item img { 6 width: 100%; 7}

投稿2022/09/18 04:46

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fito3

2022/09/19 02:03

早急なご回答頂きありがとうございます。 指示された内容で、各コンテンツが中央寄せ、worksの画像も3列できました。 ただ、残り1点の、画面幅が縮小されると、やはり780pxくらいの幅から、 header以外のコンテンツや画像が左寄りになってしまいます。 (デベロッパーツールの検証画面で確認) これの解決は難しいのでしょうか?
hatena19

2022/09/19 02:28

「header以外のコンテンツや画像」とは提示のHTMLのどれのことでしょうか。 また、言葉だけでは伝わりづらいので、現状のレイアウトと希望のレイアウトを画像で質問に追記してもらえますか。
fito3

2022/09/23 05:47

hatena19さん 対応が遅れてしまい申し訳ないです。 「header以外のコンテンツ」: 「main」タグで囲われた「About」「Works」「News」「Contact」です。 また、現状と希望のレイアウトのスクリーンショットを追加いたしました。 現状:上)画面幅縮小されると、画面右側に余白ができて左寄せになっています。 希望:下)画面幅に合わせて表示されています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問