🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

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

HTML5

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

HTML

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

CSS

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

Q&A

解決済

1回答

418閲覧

ブラウザの両端まで表示設定しているが適応されないページがある

let

総合スコア41

CSS3

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

HTML5

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2021/03/28 07:09

編集2021/03/29 14:34

イメージ説明
HOMEなどは両端まで画像やグローバルナビゲーションは表示されるが一部のページには反映されないのです。
ご助言お願いします
試した事 width: 1040px;をwidth100%にすると項目が両端まで広がるが項目は中央に配置したい為この設定は使えない。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="description" content=""> 6<link href="css/reset.css" rel="stylesheet" type="text/css" madia="screen"> 7<link href="css/style.css"rel="stylesheet" type="text/css" madia="screen"> 8<link href="css/cons.css" rel="stylesheet" type="text/css" madia="screen"> 9<link rel="shortcut icon" href="/favicon.ico"> 10<meta name="viewport" content="width=device-width,initial-scale=1.0"> 11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet"> 12<title>*****┃****</title> 13</head> 14<body> 15 <div class="wrapper01"> 16 <header> 17 <!-- header--> 18 <div class="headline"> 19 <a href="#"><img src="images/rogo.svg" alt=""></a> 20 <p class="syamei">*********</p> 21 </div> 22 <ul class="nav-list"> 23 <li class="top-nav"><a href="#">****E</a></li> 24 <li class="top-nav"><a href="#">****</a> 25 <ul> 26 <li><a href="#">******</a></li> 27 <li><a href="#">****</a></li> 28 <li><a href="#">*******</a></li> 29 </ul> 30 </li> 31 <li class="top-nav"><a href="#">****</a></li> 32 <li class="top-nav"><a href="#">*****</a></li> 33 <li class="top-nav"><a href="#">****</a></li> 34 </ul> 35 </header> 36 <main> 37 <ol class="breadcrumb"> 38 <li><a href="#">***</a></li> 39 <li><a href="#">*****</a></li> 40 <li><a href="#">******</a></li> 41 </ol> 42 <div class="wrapper"> 43 <div class="box-text"> 44 <h1 class="cons">&lt;*****&gt;</h1> 45 <p class="cond-setumei">******/p> 46 <div class="menu"> 47 <h2>&lt;**********&gt;</h2> 48 <ul> 49 <li>*********</li> 50 <li>********</li> 51 <li>********</li> 52 </ul> 53 </div> 54 </div> 55<div class="box-img01"> 56 <img src="work.jpg" alt=""> 57</div> 58</div> 59<div class="sitagazou"> 60<img class="footerue" src="e1.jpg" alt=""> 61<p>***********</p> 62</div> 63 </main> 64</body> 65</html>

style.css

1@charset "utf-8"; 2body{ 3 margin-right:auto; 4 margin-left:auto; 5 height: 100%; 6} 7.wf-notosansjapanese { font-family:"-apple-system","BlinkMacSystemFont","Noto Sans JP","Meiryo","游ゴシック","ヒラギノ角ゴ ProN",sans-serif;} 8.headline { 9 display: flex; 10 width: 70%; 11 margin-top: 30px; 12 margin-bottom: 0; 13 margin-left: 300px; 14 justify-content: space-between; 15 align-items: baseline; 16 list-style-type:none; 17} 18.headline p{ 19 font-size:30px; 20 margin-top:0; 21 font-weight: bold; 22 text-align: right; 23 margin-bottom: 0; 24 vertical-align: middle; 25} 26.headline img{ 27 width: 200px; 28 height: auto; 29} 30.main-nav { 31 background: #0000FF; 32} 33.nav-list{ 34 padding: 35px 0 5px 0 25px; 35 margin-top: 3px; 36 margin-bottom: 15px; 37 font-size:25px; 38 display : flex; 39 display : -webkit-box; /* old Android */ 40 display : -webkit-flex; /* Safari etc. */ 41 display : -ms-flexbox; /* IE10 */ 42 display: -o-box; /* Opera */ 43 display: box; /* ベンダープレフィックスなし */ 44 justify-content:center; 45 list-style-type:none; 46 align-items:center; 47 max-width: 100%; 48 width: 1040px; 49 margin: 0 auto; 50 } 51.nav-list li a { 52 text-decoration: none; 53 color: #FFFFFF; 54 background-color: #0000FF; 55 display: block; 56 padding: 5px; 57} 58.nav-list li:hover a { 59 background-color: #000080; 60} 61.nav-list li:hover ul { 62 display: block; 63} 64.nav-list li ul { 65 margin: 0px; 66 padding: 0px; 67 list-style-type: none; 68 display: none; 69 width:11%; 70 position: absolute; 71 z-index:100; 72} 73.nav-list li:hover ul{display: block;} 74.nav-list li ul a { 75 display: block; 76 text-decoration: none; 77 color: #FFFFFF; 78 background-color: #0000FF; 79} 80.nav-list li ul li:hover a { 81 background-color: #008080; 82} 83.nav-list:after { 84 content: ""; 85 clear: both; 86 display: block; 87} 88.top-nav{ 89 width:20%; 90 font-size:20px; 91 text-align: center; 92 border-right: 1px solid; 93 border-left:1px solid; 94 border-color:#ffffff; 95 background: #0000FF; 96} 97.top-nav a{ 98 display: inline-block; 99 text-decoration: solid; 100 height: 25px; 101} 102.top{ 103 margin-top: 10px;/*ロゴ列*/ 104} 105.syamei{/*TOP社名*/ 106 font-size:30px; 107 margin-top:0; 108 margin-left: 500px; 109 font-weight: bold; 110 text-align: right; 111 margin-bottom: 0; 112 vertical-align: middle; 113} 114.breadcrumb{ 115 padding-top: 30px; 116 padding-left: 400px; 117} 118.breadcrumb ol{ 119 list-style-type: none; 120 margin: 30px 0 0 0; 121 padding: 0; 122} 123.breadcrumb li{ 124 display: inline; 125 margin: 10px 0 0 0; 126} 127.breadcrumb li::after{ 128 content: " ≫ "; 129 color: #999; 130} 131.breadcrumb li:last-child::after{ 132 content: none; 133} 134.breadcrumb a{ 135 text-decoration: none; 136 color: #1864b9; 137} 138.saiyou-zikou{ 139 font-size:30px; 140 margin-top: 30px; 141 margin-bottom: 15px; 142} 143.topimages{ 144 position: relative;/*相対配置*/ 145} 146.topimages p{ 147 position: absolute;/*絶対配置*/ 148 color: white;/*文字は白に*/ 149 font-weight: bold; /*太字に*/ 150 font-size: 1.8em;/*サイズ2倍*/ 151 top: 45%; 152 left: 18%; 153} 154.topimages img{ 155 width: 100%; 156 height: 400px; 157} 158.kategoriue{ 159 font-size: 16px; 160 font-weight: bold; 161 text-align: left; 162 margin-top: 15px; 163 margin-bottom: 150px; 164 width: 46%; 165} 166.kategoriue ul{ 167 list-style-type: none; 168 line-height: 2.0; 169} 170.kategori{ 171 font-size: 30px; 172 font-weight: bold; 173 color:#0000ff; 174 text-align: center; 175 margin-top: 200px; 176 margin-bottom: 30px; 177} 178.saiyou-setumei{ 179 font-size: 23px; 180 margin-top: 20px; 181 margin-bottom: 500px; 182} 183.table-wrapper{ 184 overflow:auto; 185 white-space: nowrap; 186 margin-bottom: 150px; 187 margin-top:40px; 188} 189.saiyou{ 190 font-size: 30px; 191 margin-top: 30px; 192 margin-bottom: 20px; 193} 194.saiyou-setumei{ 195 line-height: 1.8; 196 font-size: 20px; 197 margin-bottom: 300px; 198} 199dt,dl{ 200 line-height: 1.7; 201 font-size: 19px; 202 margin-bottom: 10px; 203} 204.yokuaru{ 205 font-size:30px; 206 margin-top: 20px; 207 margin-bottom: 15px; 208} 209/*gaiyou,enkaku h1*/ 210.setumei{ 211 font-size: 30px; 212 margin-top: 60px; 213 margin-bottom: 0; 214} 215.sitagazou{ 216position: relative;/*相対配置*/ 217} 218.sitagazou p{ 219 position: absolute;/*絶対配置*/ 220 color: white;/*文字は白に*/ 221 font-weight: bold; /*太字に*/ 222 font-size: 1.8em;/*サイズ2倍*/ 223 font-family: "Bradley Hand ITC"; 224 top: 50%; 225 left: 40%; 226} 227.sitagazou img{ 228 width: 100%; 229 height: 250px; 230} 231.footer-nav{ 232 list-style-type:none; 233 align-items: start; 234 padding: 5px 15px 10px 400px; 235 margin-bottom: 10px; 236 flex-wrap: wrap; 237 display : -webkit-box; /* old Android */ 238 display : -webkit-flex; /* Safari etc. */ 239 display : -ms-flexbox; /* IE10 */ 240 display : flex; 241} 242.footer-nav a{ 243 text-decoration: none; 244} 245.footer-nav1{ 246 list-style-type: none; 247 align-items: normal; 248 padding: 0 10px 35px 10px 249} 250.footer-nav2{ 251 list-style-type: none; 252 align-items: normal; 253 padding: 0 10px 5px 10px; 254 text-decoration: none; 255} 256.sanretu{ 257 padding-bottom: 10px; 258 list-style-type:none; 259 padding: 0px 0px 5px 0px; 260 margin-bottom: 10px; 261 align-items:stretch; 262} 263.sitalogo{ 264 text-align: center; 265} 266.tyosakuken{ 267 color:#444444; 268 text-align: center; 269 bottom: 0; 270} 271/*indeximg*/ 272.main{ 273 width: 100%; 274 height: 400px; 275 margin-right: auto; 276 margin-left: auto; 277 display:block; 278} 279.wrapper01{ 280 width: 100%; 281 /*min-height:calc(100% - 50px);*/ 282} 283.bottom{ 284 height:220px; 285 margin-top: 0; 286 padding-top: 5px; 287 line-height: 30px; 288 text-decoration: none; 289} 290.sentence{ 291 margin-bottom: 150px; 292} 293.rinen{ 294 font-size: 25px; 295 text-align: center; 296} 297.top-sentence{ 298 margin:15px auto 15px auto; 299 line-height: 2.1; 300 font-size: 19px; 301 margin-top: 30px; 302 text-indent: 2em; 303 304} 305.top-sentence01{ 306 line-height: 2.1; 307 font-size: 19px; 308 margin-top: 30px; 309 margin-bottom: 30px; 310 text-indent: 2em; 311} 312.topsetumei01{ 313 display: inline-block; 314 font-size: 20px; 315 text-align: center; 316 margin-top: 8px; 317 margin-bottom: 10px; 318 padding-bottom:5px; 319} 320li.indexsetumei:hover{ 321 opacity: 0.6; 322} 323.news{ 324 font-size: 35px; 325} 326@media screen and (max-width: 768px){ 327main{ 328 width: 100%; 329 height: auto; 330} 331.headline{ 332 display: flex; 333 width: 70%; 334 margin-top: 5px; 335 margin-bottom: 0; 336 margin-left: 0; 337 justify-content: space-between; 338 align-items: baseline; 339 list-style-type:none; 340} 341.headline p{ 342 font-size:25px; 343 margin-top:0; 344 font-weight: bold; 345 text-align: right; 346 margin-bottom: 0; 347 vertical-align: middle; 348} 349.syamei{/*TOP社名*/ 350 font-size:10px; 351 margin-top:0; 352 margin-left: 100px; 353 font-weight: bold; 354 text-align: right; 355 margin-bottom: 0; 356 vertical-align: middle; 357} 358.main-nav{ 359 width: 400px; 360} 361.nav-list ul{ 362 width: 100%; 363 height: auto; 364} 365.top-nav li{ 366 width: 100%; 367 height:auto; 368} 369.top-nav{ 370 width:100px; 371 font-size:20px; 372 text-align: center; 373 border-right: 2px solid; 374 border-color:#ffffff; 375} 376.top-nav a{ 377 display: inline-block; 378 font-size:15px; 379 text-decoration: solid; 380 height: 20px; 381} 382.topimages img{ 383 width: 400px; 384 height: 400px; 385 position: relative;/*相対配置*/ 386} 387.topimages p{ 388 position: absolute;/*絶対配置*/ 389 color: white;/*文字は白に*/ 390 font-weight: bold; /*太字に*/ 391 font-size: 1.8em; 392 top: 40%; 393 left: 5%; 394} 395.main{ 396 width: 750px; 397 margin-right: auto; 398 margin-left: auto; 399} 400.sitagazou img{ 401 width: 400px; 402 height: 200px; 403 position: relative;/*相対配置*/ 404} 405.sitagazou p{ 406 position: absolute;/*絶対配置*/ 407 color: white;/*文字は白に*/ 408 font-weight: bold; /*太字に*/ 409 font-size: 1.6em;/*サイズ2倍*/ 410 font-family: "Bradley Hand ITC"; 411 top: 40%; 412 left: 15%; 413} 414}

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

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

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

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

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

Lhankor_Mhy

2021/03/29 06:20

「width: 1040px;をwidth100%にすると項目が両端まで広がるが項目は中央に配置したい為この設定は使えない。」とのことですが、そうすると何を広げたいのですか?
let

2021/03/29 14:14

グローバルナビゲーションに適用しているデザインが両端まで表示されるようにしたいのです
let

2021/03/29 14:34

イメージ追記しました
Lhankor_Mhy

2021/03/30 00:16

.main-nav は消してしまったのですか?
let

2021/03/30 00:19

消していません
let

2021/03/30 02:55

Lhankor_Mhyさん main-navが消えているページがありました。失礼致しました。回答欄にご帰休頂ければベストアンサーにさせていただきます。お手数おかけします。
Lhankor_Mhy

2021/03/30 05:07

お手数ですが自己解決の処理をお願いします。
guest

回答1

0

自己解決

main-navが記載漏れがあり、適用されてませんでした。Lhankor_Mhyさんいつもありがとうございます。

投稿2021/03/30 05:44

let

総合スコア41

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問