Q&A
実現したいこと
複数の六角形の要素を結合して、cssを適用させたい。
現時点で1つずつの六角形を3段に並べることはできました。
実現したいこととしては、複数の要素(例A, C, D)をくっつけてホバー等のCSSを適応させたいです。単純にAをホバーするとCDもホバーが適用されるだけでなく、AC, CD, DA間のマージンも無くし、完全に1つの要素(大きなタイル)のようにしたいです。
前提
六角形タイルを敷き詰めたようなハニカム構造のWebsiteを作成しています。複数のタイルを結合する方法がわからず、こちらで質問させていただきます。
発生している問題・エラーメッセージ
複数のタイルを結合し、各六角形の間のマージンを無くし、1つの大きいタイルのようにする方法がわかりません。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>NIBG</title> 6 <link rel="stylesheet" href="css/style.css"> 7</head> 8<body> 9 10 <div class="container"> 11 <div class="row"> 12 <div class="hexagon">A</div> 13 <div class="hexagon">B</div> 14 </div> 15 <div class="row"> 16 <div class="hexagon">C</div> 17 <div class="hexagon">D</div> 18 <div class="hexagon">E</div> 19 </div> 20 <div class="row"> 21 <div class="hexagon">F</div> 22 <div class="hexagon">G</div> 23 </div> 24 </div> 25</body> 26</html>
style.scss
1@import url("https://fonts.googleapis.com/css?family=Roboto"); 2 3@mixin hexagon($size, $gutter, $color) { 4 position: relative; 5 width: $size; 6 height: ($size * 0.577); 7 background-color: $color; 8 margin: ($size * 0.288) 0; 9 margin-right: $gutter; 10 display: flex; 11 align-items: center; 12 justify-content: center; 13 transform: scale(1); 14 transition: all 0.25s ease-in-out; 15 &:hover { 16 transform: scale(0.75); 17 } 18 &:before, 19 &:after { 20 content: ""; 21 position: absolute; 22 width: 0; 23 left: 0; 24 border-left: ($size/2) solid transparent; 25 border-right: ($size/2) solid transparent; 26 } 27 28 &:before { 29 bottom: 100%; 30 border-bottom: ($size * 0.288) solid $color; 31 } 32 33 &:after { 34 top: 100%; 35 width: 0; 36 border-top: ($size * 0.288) solid $color; 37 } 38} 39 40$size: 12rem; 41$gutter: 0.25rem; 42 43body { 44 width: 100%; 45 height: 100%; 46 display: flex; 47 justify-content: center; 48 align-items: center; 49 background: #323232; 50 font-family: "Roboto", sans-serif; 51 font-size: 2rem; 52 font-weight: bold; 53 .row { 54 margin-top: calc(((#{$size} * 0.288) * -1 + #{$gutter})); 55 display: flex; 56 flex-direction: row; 57 align-items: center; 58 justify-content: center; 59 } 60} 61 62.hexagon { 63 @include hexagon($size, $gutter, cyan); 64} 65 66html{ 67 height: 100%; 68}
style.css
1@import url("https://fonts.googleapis.com/css?family=Roboto"); 2body { 3 width: 100%; 4 height: 100%; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 background: #323232; 9 font-family: "Roboto", sans-serif; 10 font-size: 2rem; 11 font-weight: bold; 12} 13body .row { 14 margin-top: calc((12rem * 0.288) * -1 + 0.25rem); 15 display: flex; 16 flex-direction: row; 17 align-items: center; 18 justify-content: center; 19} 20 21.hexagon { 22 position: relative; 23 width: 12rem; 24 height: 6.924rem; 25 background-color: cyan; 26 margin: 3.456rem 0; 27 margin-right: 0.25rem; 28 display: flex; 29 align-items: center; 30 justify-content: center; 31 transform: scale(1); 32 transition: all 0.25s ease-in-out; 33} 34.hexagon:hover { 35 transform: scale(0.75); 36} 37.hexagon:before, .hexagon:after { 38 content: ""; 39 position: absolute; 40 width: 0; 41 left: 0; 42 border-left: 6rem solid transparent; 43 border-right: 6rem solid transparent; 44} 45.hexagon:before { 46 bottom: 100%; 47 border-bottom: 3.456rem solid cyan; 48} 49.hexagon:after { 50 top: 100%; 51 width: 0; 52 border-top: 3.456rem solid cyan; 53} 54 55html { 56 height: 100%; 57}/*# sourceMappingURL=style.css.map */
試したこと
色々検索をしてみましたが、ほしい情報が手に入りませんでした。丸投げのようになってしまい申し訳ありません。
補足情報（FW/ツールのバージョンなど）
VSCode
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/03/16 11:55 編集