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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

672閲覧

ブラウザ上のレイアウトが崩れる

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/11/12 07:11

編集2020/11/12 07:16

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
1冊ですべて身につくHTML$CSSとWebデザイン入門講座という書籍
(https://www.amazon.co.jp/1%E5%86%8A%E3%81%A7%E3%81%99%E3%81%B9%E3%81%A6%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FHTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%85%A5%E9%96%80%E8%AC%9B%E5%BA%A7-Mana/dp/4797398892)
の見本を参考にコードを映しているのですが見本通りいきません。画像下の文字列が画像の幅からはみ出してしまいます。
一応画面幅を調節すると画像幅と揃うには揃うのですがデフォルトの状態でそろえたいです。
皆様回答お待ちしております。できれば今後自部で対処ができるような方法も教えていただけると幸いです。

該当のソースコード

HTML5

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>WCB Cafe - NEWS</title> 8 <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 9 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 10 <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> 11 <link href="css/style.css" rel="stylesheet"> 12 <link rel="icon" type="image/png" href="images/favicon.png"> 13</head> 14 15<body> 16 <div id="news" class="big-bg"> 17 <header class="page-header wrapper"> 18 <h1><a href="index.html"><img src="images/logo.svg" alt="WCBカフェホーム" class="logo"></a></h1> 19 <nav> 20 <ul class="main-nav"> 21 <li><a href="news.html">News</a></li> 22 <li><a href="menu.html">Menu</a></li> 23 <li><a href="contact.html">Contact</a></li> 24 25 </ul> 26 </nav> 27 28 </header> 29 <div id="wrapper"> 30 <h2 class="page-title">NEWS</h2> 31 </div> 32 </div> 33 <div class="news-contents wrapper"> 34 <article> 35 <header class="post-info"> 36 <h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2> 37 <p class="post-date">3/30 <span>2019</span></p> 38 <p class="post-cat">カテゴリー:お店の紹介</p> 39 </header> 40 <img src="images/wall.jpg" alt="店内の様子"> 41 <p> 42 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 43 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 44 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 45 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 46 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 47 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 48 </p> 49 <p> 50 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 51 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 52 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 53 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 54 体に優しい自然食を提供する,WCB CAFE。無添加の食材を利用したメニューが特徴です。 55 おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 56 </p> 57 <p>体に優しい自然食を提供する、WCB CAFE</p> 58 </article> 59 <aside> 60 サイドバー部分 61 </aside> 62 </div> 63 64 <footer> 65 <div class="wrapper"> 66 <p><small>&copy; 2020 Manabox</small></p> 67 </div> 68 </footer> 69 70 71 72</body> 73 74</html>

CSS3

1@charset "UTF-8"; 2 3/* 共通部分 4------------------------------- */ 5html { 6 font-size: 100%; 7} 8body { 9 font-family: "Yu Gothic Medium", "游ゴシック Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", sans-serif; 10 line-height: 1.7; 11 color: #432; 12} 13a { 14 text-decoration: none; 15} 16img { 17 max-width: 100%; 18} 19/*HEADER*/ 20.logo { 21 width: 210px; 22 margin-top: 14px; 23} 24.main-nav { 25 display: flex; 26 font-size: 1.25rem; 27 text-transform: uppercase; 28 margin-top: 34px; 29 list-style: none; 30} 31.main-nav li { 32 margin-left: 36px; 33} 34.main-nav a { 35 color: #432; 36} 37.main-nav a:hover { 38 color: #0bd; 39} 40.page-header { 41 display: flex; 42 justify-content: space-between; 43} 44.wrapper { 45 max-width: width 110px; 46 margin: 0 auto; 47 padding: 0 4%; 48} 49/*HOME*/ 50.home-content { 51 text-align: center; 52 margin-top: 10%; 53} 54.home-content p { 55 font-size: 1.125rem; 56 margin: 10px 0 42px; 57} 58/*NEWS*/ 59#news { 60 background-image: url(../images/news-bg.jpg); 61 height: 270px; 62 margin-bottom: 40px; 63} 64#news .page-title { 65 text-align: center; 66} 67.news-contents { 68 display: flex; 69 justify-content: space-between; 70 margin-bottom: 50px; 71} 72/*記事本文*/ 73article { 74 width: 74%; 75} 76.post-info { 77 position: relative; 78 margin-top: 4px; 79 margin-bottom: 40px; 80} 81.post-date { 82 background: #0bd; 83 border-radius: 50%; 84 color: #fff; 85 width: 100px; 86 height: 100px; 87 font-size: 1.625rem; 88 text-align: center; 89 position: absolute; 90 top: 0; 91 padding-top: 10px; 92} 93.post-date span { 94 font-size: 1rem; 95 border-top: 1px rgba(255, 255, 255, .5) solid; 96 padding-top: 6px; 97 display: block; 98 width: 60%; 99 margin: 0 auto; 100} 101.post-title { 102 font-family: "Yu Mincho", "YuMincho", sefif; 103 font-size: 2rem; 104 font-weight: normal; 105} 106.post-title, 107.post-cat { 108 margin-left: 120px; 109} 110article img { 111 margin-bottom: 20px; 112} 113article p { 114 margin-bottom: 1rem; 115} 116 117/*見出し*/ 118.page-title { 119 font-size: 5rem; 120 font-family: 'philosopher', serif; 121 text-transform: uppercase; 122 font-weight: normal; 123} 124.button { 125 font-size: 1.375rem; 126 background: #0bd; 127 color: #fff; 128 border-radius: 5px; 129 padding: 18px 32px; 130 131} 132.button:hover { 133 background: #0090aa; 134} 135.big-bg { 136 background-size: cover; 137 background-position: center top; 138 background-repeat: no-repeat; 139} 140#home { 141 background-image: url(../images/main-bg.jpg), linear-gradient(#c9ffbf, #ffafbd); 142 background-blend-mode: luminosity; 143 min-height: 100vh; 144} 145#home .page-title { 146 text-transform: none; 147} 148 149footer { 150 background: #432; 151 text-align: center; 152 padding: 26px 0; 153} 154footer p { 155 color: #fff; 156 font-size: 0.875rem; 157} 158aside { 159 width: 22%; 160} 161``` 162コード 163``` 164 165### 試したこと 166 167自分で試してみたこととしては、サンプルコードをそのままコピペしたら見本通りの画面になったため誤植でないことはわかった。外套の正誤情報も探してみたが、みつからなかった。 168そのままサンプルコードを見ながらどこが違うか、照らし合わせようとしたが、自分が進めている以降のcssセレクター(次回HTMLで使われるものを含む)が途中に入ってきたり、そもそものコードの書き方の順番が書籍上明記されなかったりで自分と違うコード編成となっており、かなり見落としやすかったりで全部確認できている自信がない。 169セレクターarticle p自体にwidth:74%;を試しに書いてみたが画像よりさらに細い幅になってしまった。同じく100%も入れてみたが今度はレイアウトが崩れっぱなしの状態のままだった。 170ウィンドウ幅を縮小したりすると揃う。 171などです。 172 173 174 175### 補足情報(FW/ツールのバージョンなど) 176ブラウザ:chrome コードエディタ::vscode ウィンドウズ10 画面幅23.2インチほど(斜め幅) 177画像は見切れてしまっていますがこの通りです 178 179![イメージ説明](329a08ac9f1d107b92c6ce80c7926b0a.png)

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

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

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

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

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

guest

回答2

0

ベストアンサー

max-widthをやめて、widthにすれば良いかと思います。

img { width: 100%; }

投稿2020/11/12 07:16

salud

総合スコア215

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

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

退会済みユーザー

退会済みユーザー

2020/11/12 07:34

ありがとうございます。画像幅は大きくなってしまいましたが、レイアウトが揃いました。よろしければmax-widthの指定ではなぜダメだったのか、画像幅を変えずに対処する方法も教えていただけると幸いです。
退会済みユーザー

退会済みユーザー

2020/11/12 07:40

一応教科書ではmax-widthになっており、誤植情報にも記載されていないのでこれ以外の直し方もあると思うのですが…。
salud

2020/11/12 07:41

max-widthは最大幅を決めるだけなので、画像の幅が指定されておらず、デフォルトになってしまっていたイメージです。画像を小さくするには article { width: 74%; } ごと小さくした方が良いかと思います。(参考)https://qiita.com/d-dai/items/0b580b26bb1d1622eb46
退会済みユーザー

退会済みユーザー

2020/11/12 08:00

回答ありがとうございます。アドバイス通りのやり方で何とかcss全体の構造を大きく崩さずに期待されている画面通りのレイアウトにすることができました。テキストとは多少異なってしまいましたが期待通りの結果になったためベストアンサーとさせていただきたいと思います。
guest

0

解決方法とは違うかもしれませんが追記させていただきます。一番最初に試したコードを大型デスクトップではなく、普通サイズのパソコンで単したところレイアウトも全く問題ありませんでした。大型のパソコンのみに起こる問題のようです。もしこのようなパソコンに対応させたいと思った同じお悩みを持った方はぜひベストアンサーをさせていただいたかたの意見を参考にしてください。

投稿2020/11/12 12:39

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2020/11/12 12:41

すみません、編集ミスでベストアンサーが変わってしまいました。salud様の意見を参考にしてください。
kei344

2020/11/12 12:47

ベストアンサーははずせると思うので、「ベストアンサーボタン」を押してみてください。
退会済みユーザー

退会済みユーザー

2020/11/12 13:21

ありがとうございます。たすかりました 。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問