前提・実現したいこと
ここに質問の内容を詳しく書いてください。
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>© 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)
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/11/12 07:34
退会済みユーザー
2020/11/12 07:40
2020/11/12 07:41
退会済みユーザー
2020/11/12 08:00