実現したいこと
画面中央に配置したflex要素の内側と外側に画像を配置したい。
KNT(それぞれ別ファイル)という画像をflex要素として中央に配置しました。
橙色の長方形要素に接する形で画像ファイルを挿入したいです。目指すイメージは下記のサイトで示す通りです。
前提
下記のサイトを参考にHTML,CSSの学習を行なっています。
https://takeshioide.com/
上記のサイトでは左右のWORKS, ABOUTにカーソルを合わせるとそこにaタグによって次の画面に遷移する仕様になっています。デベロッパーツールで仕様を確認しましたが、中央の要素がflexで配置されており、そこに2分した画像ファイルを回転？させて配置していると思われます。
CSSで
CSS
1img {2 overflow-clip-margin: content-box;3 overflow: clip;4}
という記述があり、これが上記の仕様を可能にしているのではないかと考えました。
しかし、単にこれを模倣するだけでは実現できず、他の方法を模索しています。代替案もしくは上記サイトの詳細がわかる方がいらっしゃるようでしたら、ご教授願います。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
html
1<body>2 <div class="home-container">3 <div class="style">4 <div class="greeting mt-5">5 <div class="greeting greeting-text">Hi, I'm KNT. A Web Designer.</div>6 <span class="greeting greeteng-border">|</span>7 <span class="greeting greeting-contact">CONTACT</span>8 </div>9 </div>10 11 <div class="home-nav-wrapper">12 13 14 <div class="home-name my-5">15 <div class="home-name-img k">16 <img src="static/img/K.png" alt>17 </div>18 19 <div class="home-name-img n">20 <img src="static/img/N.png" alt>21 </div>22 23 <div class="home-name-img t">24 <img src="static/img/T.png" alt>25 </div>26 27 </div>28 29 </div> 30 31 <div class="side_bar">32 <a href="#">33 <div class="nav out-side works" id="out-works">34 <img src="static/img/WORKS.png" alt>35 </div>36 <!-- <div class="nav in-side works" id="in-side-works"> 37 <img src="static/img/WORKS下.png" alt> 38 </div> -->39 </a>40 </div>41 42 43 44 45 46 47 48 </div>49 50 51 52</body>53</html>54
CSS
1.greeting{2 display: inline-block;3}4 5.style{6 text-align: center;7}8 9.home-nav-wrapper{10 background-color: bisque;11 margin-top: 3%;12 margin-left: 10%;13 margin-right: 10%;14} 15 16.home-name{17 display: flex;18 justify-content: center;19 /* margin-left: 15%; 20 margin-right: 15%; */21}22 23.home-name-img{24 margin: 10%;25}26 27.home-name-img img{28 height: 130%;29}30 31img{32 overflow: clip;33 overflow-clip-margin: content-box;34}
結果は下に示す通りです。
試したこと
overflow: clip;
overflow-clip-margin: content-box;
について調べましたが、参考にできるサイトがあまりなく、理解できませんでした。
補足情報（FW/ツールのバージョンなど）
Visual Studio Codeを使用しています。
0 コメント