Q&A
高さを内容物依存にする、ということですよね？
絶対配置をあきらめた方が早いと思いますが、position: absolute は絶対条件ですか？
個人的な意見としては、フロート・絶対配置・インライン配置は、CSSの仕様がややこしいのでうかつに手を出すとハマります。どうしても、という場面にピンポイントで使うのがいいと思います。
現在ポートフォリオサイトを独学で作っており、レスポンシブなデザインにしたいと考えています。
【問題点】
現状、背景画像（親要素）の高さを固定にしていましたが、画面サイズを変えたところ中の文字が入りきらない場合がある。（当たり前ですが）
よって、高さの数値を可変にしたいができない。
【試したこと】
文字を見やすくするために、画像を暗くするためposition-absolute;を使っているので、これが原因で思うようにいかないというのは調べた結果わかりました。
ですが、ここからは思うような資料に行きつかず、詰まっている次第です。
大変お手数ではありますが、どなた様かお知恵を貸して頂けないでしょうか????♂️
【環境】
Mac OS：Big Sur バージョン11.2.1
ブラウザ chrome バージョン: 88.0.4324.150
エディタ VS code バージョン: 1.53.2
html
1 2<!DOCTYPE html> 3<html lang="ja"> 4<head> 5 <meta charset="utf-8"><!--人間とPCの文字の対応表の一種--> 6 <title>OKA's Portfolio</title> 7 <link rel="stylesheet" href="normalize.css"><!--各ブラウザでデフォルトのスタイルを平均化する--> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> 10 <link rel="stylesheet" href="stylesheet.css"> 11 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"><!--アニメーションを繰り返すCDN--> 12 <link href="https://fonts.googleapis.com/css?family=PT+Serif&display=swap" rel="stylesheet"><!--Googleフォント--> 13 <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet"> 14 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 15 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"> 16 17 <!-- ＃リンクのスムーズスクロール --> 18 <script> 19 $(function(){ 20 // #で始まるリンクをクリックしたら実行されます 21 $('a[href^="#"]').click(function(){ 22 // スクロールの速度 23 var speed = 400; // ミリ秒で記述 24 var href= $(this).attr("href"); 25 var target = $(href== "#" || href == "" ? 'html' : href); 26 var position = target.offset().top; 27 $('body,html').animate({scrollTop:position},speed,'swing'); 28 return false; 29 }) 30 }) 31 </script> 32</head> 33 34<body> 35<!--ヘッダー--> 36<header> 37 <div class="header-wrapper" id="5"> 38 <li class="hide"><a href="#1">About Me</a></li> 39 <li class="hide"><a href="#2">Service</a></li> 40 <li class="hide"><a href="#3">Works</a></li> 41 <li class="hide"><a href="#4">Contact</a></li> 42 43 <!--????--> 44 <input id="menu" type="checkbox" /> 45 <label for="menu" class="open"><div class="line"></div><div class="line"></div><div class="line"></div></label> 46 <label for="menu" class="back"></label> 47 <!--????--> 48 <aside> 49 <!--????--> 50 <label for="menu" class="close">×</label> 51 <!--????--> 52 <nav> 53 <ul> 54 <li><a href="#1">About Me</a></li> 55 <li><a href="#2">Service</a></li> 56 <li><a href="#3">Works</a></li> 57 <li><a href="#4">Contact</a></li> 58 </ul> 59 </nav> 60 </aside> 61 </div> 62</header> 63 64<div class="top-wrapper"> 65 66 <div class="top-text"> 67 <h1>〜OKA's Portfolio〜</h1> 68 <p></p> 69 </div> 70</div> 71 72 73<div class="about-container" id="1"> 74 <div class="about-wrapper"> 75 <div class="about-box"> 76 <h1>About Me</h1> 77 <img src="ni.jpg"> 78 <h4>初めまして。Web制作の仕事をしているOKAと申します。<br> 79 「スピード」と「より深いご要望を汲み取る」ことをモットーにしています。 80 <br>また、クライアント様に寄り添った丁寧なコミュニケーションを常に心掛け、責任を持って仕事に取り組ませていただきます。 81 </h4> 82 </div> 83 </div> 84</div> 85 86 87<footer> 88 <div class="contact-title" id="4"> 89 <svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16"> 90 <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/> 91 </svg> 92 <h1>Contact</h1> 93 </div> 94 <div class="contact-text"><h2>ご依頼（ご相談）はメールよりお願い致します</h2></div> 95 <!--SNSアイコン--> 96 <div class="follow-wrapper"> 97 <ul class="follow-me"> 98 <li class="gm"><a href="mailto:okanet.web.start.102733@gmail.com?body=ご依頼/ご相談内容"><i class="fas fa-envelope size"></i></a></li> 99 <li class="tw"><a href="https://twitter.com/Kei_Okato" class="twitter"><i class="fab fa-twitter-square size"></i></a></li> 100 </ul> 101 </div> 102 <div class="top-back"> 103 <h4><a href="#5">Topへ戻る</a></h4> 104 </div> 105 </div> 106 <div class="copy"> 107 <!--コピーライト--> 108 <div id="copyright"> 109 <p>Copyright © 2021 OKA's Protfolio All Rights Reserved.</p> 110 </div> 111 </div> 112</footer> 113</div> 114 <script src="jquery-2.2.4.min.js"></script> 115 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> 116 <script src="jquery.waypoints.min.js"></script> 117 <script src="jquery.magnific-popup.min.js"></script> 118 <script src="mobile-detect.min.js"></script> 119 <script src="main.js"></script> 120 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 121 <script src="jquery.waypoints.min.js"></script> 122 123</body> 124 125</html>
css
1html,body { 2 font-family:"Open Sans",sans-serif; 3 font-family:"italic",serif; 4} 5body { 6 margin:0; 7h1 { 8 font-size:calc(30px+5vw); 9} 10h2 { 11 font-size:calc(20px+4vw); 12} 13h4 { 14 font-size:calc(20px+3vw); 15} 16} 17 18.header-wrapper { 19 background:black; 20 color:white; 21 width:100%; 22 height:42px; 23 list-style:none; 24 text-align:right; 25 padding-top:9px; 26} 27.hide { 28 display:inline; 29 margin-right:15px; 30 position:absolute; 31 left:-100px; 32 a { 33 text-decoration:none; 34 color:white; 35 } 36} 37 38.open, 39.close { 40 display:block; 41} 42.line { 43 width:20px; 44 height:3px; 45 background-color:white; 46 margin:3px; 47} 48.open { 49 position:absolute; 50 left:90vw; 51 font-size:20px; 52 53} 54.close { 55 font-size:30px; 56} 57aside { 58 position:absolute; 59 top:-250px; 60 width:100%; 61 height:150px; 62 transition: all 0.2s; 63 background:rgba(0,0,0,0.7); 64 display:flex; 65 flex-direction:column; 66 li { 67 list-style:none; 68 color:white; 69 } 70 a { 71 text-decoration:none; 72 color:white; 73 } 74} 75input[type="checkbox"] { 76 position:absolute; 77 left:-50vw; 78} 79/*input checkboxと同列の要素 〜は、これ以降の要素で指定したものという意味 この場合はaside*/ 80input[type="checkbox"]:checked ~ aside { 81 top: 42px; 82} 83input[type="checkbox"]:checked ~ .back { 84 position:absolute; 85 width:100%; 86 height:100%; 87 background: rgba(0,0,0,0.8) !important; 88} 89 90.top-wrapper { 91 height:600px; 92 background-image: url("yamagiri2.jpg"); 93 background-size:cover; 94 h1,p { 95 text-align:center; 96 margin:0; 97 color:white; 98 text-shadow:5px 0 5px black; 99 } 100} 101.top-text{ 102 padding-top:280px; 103} 104 105.about-wrapper { 106 position:relative; 107 width:100%; 108 height:auto; 109 background-size:cover; 110 padding-bottom:50px; 111 background-image:url("bridge.jpg"); 112} 113.about-wrapper:before { 114 display:block; 115 padding-top:100%; 116} 117.about-box { 118 position:absolute; 119 width:100%; 120 height:100%; 121 background:rgba(0,0,0,0.5); 122 text-align:center; 123 124 h1,h4 { 125 margin:0 auto; 126 color:white; 127 } 128 h1 { 129 padding:30px 0; 130 131 } 132 img { 133 border-radius:50%; 134 width:200px; 135 height:auto; 136 } 137 h4 { 138 padding:50px; 139 text-align:left; 140 } 141} 142 143 144 145 146footer { 147 background-image:url("renga.jpg"); 148 background-size:cover; 149 text-align:center; 150} 151.contact-title { 152 svg { 153 margin-bottom:50px; 154 } 155 h1 { 156 margin-top:30px; 157 display:inline-block; 158 } 159} 160.contact-text { 161 padding:0 30px; 162 text-align:left; 163} 164 165.follow-wrapper { 166 167} 168.follow-me { 169 padding-left:0; 170 li { 171 list-style:none; 172 display:inline-block; 173 margin:60px; 174 } 175} 176.size { 177 font-size:5em; 178 color:black; 179} 180.gm { 181 margin-right:110px; 182} 183.tw { 184 margin-left:110px; 185} 186.copy { 187 background:black; 188 width:100%; 189 height:40px; 190 display:flex; 191 justify-content:center; 192 align-items:center; 193} 194#copyright { 195 196 p { 197 color:white; 198 font-size:1vw; 199 } 200} 201 202.top-back { 203 a { 204 text-decoration:none; 205 color:black; 206 } 207} 208 209@media (min-width: 550px){ 210 /* ???? */ 211 .open, 212 .close { 213 display:none; 214 } 215 216 .service-wrapper { 217 height:2100px; 218 } 219 .service-box { 220 height:2100px; 221 } 222 .point { 223 text-align:left; 224 } 225 .works-container { 226 height:1000px; 227 } 228 .works-window { 229 text-align:center; 230 height:1000px; 231 } 232 .each-window { 233 display:inline-block; 234 margin-right:30px; 235 img { 236 width:260px; 237 } 238 } 239 .hide { 240 position: static; 241 left:100px; 242 a { 243 text-decoration:none; 244 } 245 } 246} 247 248@media (min-width: 900px){ 249 .about-wrapper { 250 height:1070px; 251 } 252 .about-box { 253 height:1120px; 254 img { 255 width:45%; 256 } 257 } 258 .each-window { 259 img { 260 width:380px; 261 } 262 } 263} 264 265@media (min-width: 1300px){ 266 .about-wrapper { 267 height:1200px; 268 } 269 .about-box { 270 height:1250px; 271 } 272}
※文字数の都合で途中省略しております
記載いただき有難うございます????♂️
＞高さを内容物依存にする、ということですよね？
そのとおりでございます。
＞絶対配置をあきらめた方が早いと思いますが、position: absolute は絶対条件ですか？
文字を見やすくするという観点からposition: absoluteを利用して画像を暗くしております。
私はそれ以外の方法がわからないのですが、他に方法があれば変えてしまっても全く問題はありません。
アドバイスも合わせて有難うございます！
何卒よろしくお願いします????♂️
.about-box の絶対配置を外せばいいように思えるのですが、それだとどういう問題が発生しますか？
>.about-box の絶対配置を外せばいいように思えるのですが、それだとどういう問題が発生しますか？
有難うございます！状況は好転しました。
ただ、背景画像は可変になったのですが、.about-boxのbackground:rgba(0,0,0,0.5);が途中で切れてしまっていて、足りないような状態になっています。
これの長さをぴったりにするにはどうしたら良いのでしょうか。
何度も申し訳ありません????♂️
問題を把握しました。回答しました。
回答1件
0
ベストアンサー
背景画像は複数重ねることができますので、.about-boxはいらないと思います。
削除してしまうのはどうですか？
css
1.about-wrapper { 2 background-image: linear-gradient(rgba(0, 0, 0, 0.5) 0% 100%), 3 url("bridge.jpg"); 4}
参考：
background プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。
投稿2021/02/19 06:59
編集2021/02/19 07:00総合スコア36128
あなたの回答
tips
プレビュー
