質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Q&A

1回答

1198閲覧

複数の六角形の要素を結合して、cssを適用させたい

Rivermouth

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

0グッド

1クリップ

投稿2023/03/15 14:32

実現したいこと

複数の六角形の要素を結合して、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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

https://codepen.io/arcxor/pen/abaGVNz

こういう感じでしょうか。

投稿2023/03/15 16:18

arcxor

総合スコア2859

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Rivermouth

2023/03/16 11:55 編集

わざわざソースコードまで載せてくださりありがとうございます! ただやりたいこととしては、ACDを1つの要素としたいです。その要素に画像を貼ったり、CSSを適用させたいです。 arcxor 様のCSSですと、Aにカーソルを乗せた時にACDがくっ付いたように見えます。 そうではなく、初めから1つの要素にしたいです。 教えていただいたソースのAにホバーさせた時のACDがくっついた状態を初期状態としたいのです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問