実現したいこと
前回の質問(https://teratail.com/questions/333907)の続きになります。
CSS gridでコンテナを左右に分けたサイトを作っています。
その右サイドで固定したbackground画像を画面中央ではなく右サイド中央で固定したいというのが前回の質問でした。
最終的にはこちらのサイト(https://www.casleyconsulting.co.jp/blog/engineer/283/)の「サンプル3」のように画像とテキストを連続で表示したく、そこでまた躓いてしまいました。
右サイド中央で固定した状態で上記サイト「サンプル3」のようにパララックスにするにはどうすれば良いでしょうか。
また、現状で下記画像の赤枠の範囲でスクロールしようとするとh2に引っかかってしまいスクロールできません。
こちらも見ていただけると助かります。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>@@@@@</title> 6 <meta name="description" content="@@@@@@@@@"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 9 <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="css/sub.css"> 11 <link rel="icon" type="image/png" href="images/favicon.png"> 12</head> 13<body> 14 <div class="container"> 15 <div class="guide"> 16 <div class="id-wrapper"> 17 <div class="face"> 18 <a href="index.html"><img src="https://placehold.jp/1000x1000.png" alt="face photo"></a> 19 </div> 20 <h1 class="name"><a href="index.html"><ruby>@@@@<rt>@@@@@@@@</rt></ruby> <ruby>@@@@<rt>@@@@@</rt></ruby></a></h1> 21 </div> 22 <nav class="global-nav"> 23 <ul class="nav-menu"> 24 <li><a href="profile.html">profile</a></li> 25 <li><a href="works.html">works</a></li> 26 <li><a href="contact.html">contact</a></li> 27 </ul> 28 </nav> 29 </div> 30 <div class="container-right"> 31 <div class="profile"> 32 <div class="parallax"> 33 <h2>Profile</h2> 34 </div> 35 <div class="contents">This is Example.</div> 36 <div class="parallax"></div> 37 </div> 38 </div> 39 <footer> 40 <p>© @@@@@@@@@@@@@ 2021</p> 41 </footer> 42 </div> 43</body> 44</html>
css
1@charset "UTF-8"; 2/* intersection 3--------------------------------------------------------- */ 4html { 5 font-size: 100%; 6} 7body { 8 font-family: "Helvetica Neue", Helvetica, Arial, "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", sans-serif; 9 background-color: #024058; 10 color: #fff; 11 line-height: 1.7; 12 font-size: 16px; 13} 14a { 15 color: #fff; 16 text-decoration: none; 17} 18img { 19 max-width: 100%; 20} 21ul { 22 list-style: none; 23} 24* { 25 box-sizing: border-box; 26} 27/* container 28--------------------------------------------------------- */ 29.container { 30 display: grid; 31 grid-template-columns: 8fr 26fr; 32 animation: fadeIn 3s ease 0s 1 normal; 33} 34@keyframes fadeIn { 35 from { 36 opacity: 0; 37 } 38 to { 39 opacity: 1; 40 } 41} 42.container-right { 43 position: absolute; 44 top: 0; 45 left: calc(8 / 34 * 100vw); 46 background-color: #f6f6f6; 47 width: calc(26 / 34 * 100vw); 48 height: 100%; 49 color: #024058; 50} 51/* guide 52--------------------------------------------------------- */ 53.guide { 54 display: grid; 55 grid-template-rows: 13fr 8fr; 56 place-items: center; 57 position: fixed; 58 top:0; 59 left: 0; 60 width: calc(8 / 34 * 100vw); 61 height: 100vh; 62} 63.face { 64 margin: 0 auto; 65 min-width: calc(8 / 34 * 600px); 66 max-width: 224px; 67} 68.face img { 69 border-radius: 50%; 70} 71.name { 72 font-family: serif; 73 letter-spacing: 0.1em; 74 text-align: center; 75 ruby-position: under; 76} 77.name rt { 78 font-size: 8px; 79 letter-spacing: 1em; 80 opacity: 0.5; 81} 82.global-nav { 83 position: relative; 84 display: flex; 85 justify-content: center; 86 height: 100%; 87} 88.global-nav .nav-menu { 89 position: absolute; 90 top: 0; 91} 92.nav-menu a { 93 font-family: serif; 94 font-size: 24px; 95 position: relative; 96} 97.nav-menu a:hover { 98 opacity: 1; 99} 100.nav-menu a::after { 101 content: ""; 102 position: absolute; 103 bottom: -4px; 104 left: 0; 105 width: 100%; 106 height: 2px; 107 background-color: #fff; 108 transform: scale(0, 1); 109 transform-origin: center top; 110 transition: transform 250ms; 111} 112.nav-menu a:hover::after { 113 transform: scale(1, 1); 114} 115 116/* profile 117--------------------------------------------------------- */ 118.profile { 119 height: 100%; 120 background-image: url(https://placehold.jp/2048x1364.png); 121 background-attachment: scroll; 122 background-position: center; 123 background-size: cover; 124 background-repeat: no-repeat; 125 overflow-y: scroll; 126} 127.parallax { 128 height: 100%; 129} 130.parallax h2 { 131 color:#fff; 132 font-family: Quicksand; 133 font-size: 80px; 134 text-shadow: 0px 0px 10px #c0c0c0; 135 text-align: center; 136 position: fixed; 137 width: calc(26 / 34 * 100vw); 138 top: 20%; 139} 140.contents { 141 position: relative; 142 z-index: 1; 143 height:500px; 144 font-size:60px; 145 background: #f89174; 146 padding: 100px 20px; 147 text-align :center; 148 } 149/* footer 150--------------------------------------------------------- */ 151footer { 152 position: fixed; 153 bottom: 1vh; 154 left: 1vw; 155} 156footer p { 157 font-family: serif; 158 font-size: 12px; 159 opacity: 0.7; 160}
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/19 02:40
2021/04/19 03:05