Q&A
やりたいこととしては背景画像を全体に敷きたいのか、特定のタブ内だけに敷きたいのかどちらなのでしょうか？
cssの背景を特定のタブ内に設定をしたいのですがどのように設定すべきかわかりません。
次のようなhtmlを作成しました。
html
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> conmapany</title> 8 <!-- ページレイアウト用CSS --> 9 <link rel="stylesheet" href="css/layout.css"> 10 <link rel="preconnect" href="https://fonts.googleapis.com"> 11 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 12 <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> 13 <!-- jQueryで操作する部分のCSS --> 14 <!-- jQueryで操作対象となる部分のCSS --> 15 <link rel="stylesheet" href="css/dynamic.css"> 16 <!-- jQueryのダウンロード --> 17 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 18 <script src="scripts/custom.js"></script> 19</head> 20<body > 21 <div class="wrapper-header"> 22 <div class="header"> 23 <h1>nissan computering star</h1> 24 </div><!-- /.header --> 25 </div><!-- /.wrapper-header --> 26 27 <div clas="wrapper-nav-global"> 28 <ul class="nav-global"> 29 <li><a href="#">ABOUT</a></li> 30 <li><a href="#">CONTACT</a></li> 31 <li><a href="#">PRESIDENT</a></li> 32 <li><a href="#">ACHIEVEMENT</a></li> 33 </ul> 34 </div><!-- /.wrapper-nav-global --> 35 36 <div class="wrapper-explain"> 37 <div class="part-img"> 38 <div class="explain"> 39 <a> 40 コメント 41 </a> 42 </div> 43 </div> 44 </div> 45</body> 46</html>
次にcssです。
css
1@charset "UTF-8"; 2/* CSS Document */ 3 4/* 基本設定クリア */ 5html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, input, textarea, legend, article, aside, footer, header, hgroup, menu, nav, section { 6 border: 0; 7 color: #000; 8 font-size: 100%; 9 font: inherit; 10 margin: 0; 11 padding: 0; 12 vertical-align: baseline; 13} 14h1, h2, h3, h4, h5, h6 { 15 font-weight: bold; 16} 17a { 18 text-decoration: none; 19} 20ul { 21 list-style: none; 22} 23.header h1 { 24 margin-bottom: 25px; 25 margin-left: 25px; 26 margin-top: 25px; 27 font-size: 30px; 28 color: #b31be0; 29 font-family: 'Roboto', sans-serif; 30 border-bottom: solid 2px #c10eeb; 31} 32.nav-global li { 33 float: left; 34 text-align: center; 35 width: 25%; 36} 37.nav-global li a { 38 border-bottom:solid 1px #000; 39 border-top: solid 1px #000; 40 border-right: solid 1px #ddd; 41 color: #000; 42 display: block; 43 padding: 10px 0; 44} 45.explain a{ 46 color: aliceblue 47} 48.part-img { 49 background-image: url(../img/イメージ図.jpg); 50 background-repeat: no-repeat; 51 background-position:center center; 52 background-attachment: fixed; 53 background-size: cover; 54} 55
イメージ図のところには3000*2000のピクセルを置いてるのですが
現状ではイメージ図のピクチャが<ul class="nav-global">と<div class="wrapper-explain">の欄にしか背景が映らず全体の写真が見えません
イメージ図を背景にするには.part-img とせずbodyにすれば現状イメージがブラウザに合わせて表示されますが
できればABOUTですとか、COINTACTが表示されている.nav-global liにはイメージ図を表示させずそこはナビゲーションとして何も画像を
表示させないようにしたいです。
このように特定のタブの中にのみ画像を表示させた時はどのような方法があるのでしょうか？
わかりずらい質問で大変申し訳ございません。どなたかご存じでしたら教えていただけますでしょうか？
以上です、よろしくお願いいたします。
はい、特定のタブ内(今回ですと<div class="part-img">のタブの中)だけに敷きたいです。
もうすこし言うとそのタブ内でさらにブラウザの大きさに合わせて拡大縮小
スクロールする必要が無いように設定したいですね。
回答2件
0
ベストアンサー
イメージ図を背景にするには.part-img とせずbodyにすれば現状イメージがブラウザに合わせて表示されますが
できればABOUTですとか、COINTACTが表示されている.nav-global liにはイメージ図を表示させずそこはナビゲーションとして何も画像を
表示させないようにしたいです。
「特定のタブのみ表示」という説明と矛盾しているような気がするのですが。
上記の引用部分から、、
ブラウザ全体に背景画像を固定(background-attachment: fixed;)で表示して、
.nav-global li の部分には、背景画像が透けて見えないようにしたい、
と解釈しましたが、あってますか。
だとしたら、単純に、.nav-global li に適当な background-color を設定するだけです。
例えば下記のような感じでどうですか。
css
1.nav-global { 2 display: flex; 3} 4.nav-global li { 5/* float: left;*/ 6 text-align: center; 7 width: 25%; 8 background-color: white; /* 追加 */ 9} 10
float: left;での横並びは時代遅れの古い手法ですので、display: flex; によるものに修正してます。
投稿2021/10/01 22:10
総合スコア33795
0
ナビのところで使用したfloatが解除されていないからです。
以下を追加してみてください。
CSS
1.wrapper-explain { 2 clear: both; 3}
あとは.part-imgに好きな高さを与えてみるとよいでしょう。
height: 100vh;とか。
投稿2021/10/01 16:50
総合スコア8402
あなたの回答
tips
プレビュー
