More than 5 years have passed since last update.

CSSとVue.jsでHexagon Mapを作る

Last updated at 2019-09-04Posted at 2019-09-04

作ったもの

参考にしたサイト

CSS Hexagon Grid - codepen

See the Pen CSS Hexagon Grid by Eric Cornelissen (@ericornelissen) on CodePen.

基本的に上記のコードを使ってます．

作り方

コードは，Vue CLI で作られる App.vue に全部書いてます．

最終的な App.vue は以下の通り

App.vue

<template>
  <div id="hexagonA-container">
    <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
      <span>{{ i }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
    }
  }
};
</script>

<style lang="scss" scoped>
# app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

$hex-width: 100px; 
$hex-between: 10px;
  
/* Other hexagon dimentions */
// どれが，hexのどの長さに対応するかを理解すること
$hex-height: $hex-width / 1.73 /* sqrt(3) */;
$hex-margin: $hex-width / 2;
$hex-border: $hex-margin / 1.73 /* sqrt(3) */;
$hex-transition: all .2s ease;

/* Colors */
$color-hex-default: #000000;
$color-hex-hover:   #FFFFFF;
$color-sass:        #CC6699;

# hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}

.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA span {
  width: 100%;
  height: $hex-height * 0.9;
  line-height: $hex-height;
  color: rgb(255, 255, 255);
  text-align: center;
  display: block;
  position: relative;
  z-index: 1;
}

.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}
.hexagonA:hover {
  background-color: $color-hex-hover;
}
.hexagonA:hover:after,
.hexagonA:hover:before {
  border-top-color: $color-hex-hover;
  border-bottom-color: $color-hex-hover;
}
// https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child
.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}
</style>

多分，余計なコードも交じってます．

六角形の作り方

.hexagonA {
  align-items: center;  //センターに配置？http://www.htmq.com/css/align-items.shtml
  background-color: $color-hex-default;
  cursor: pointer;  //リンクカーソル
  display: flex;  //要素が並列になる？ https://mamewaza.com/support/blog/howto-use-flex.html
  fill: white;
  height: $hex-height;
  justify-content: center;  //https://developer.mozilla.org/ja/docs/Web/CSS/justify-content
  margin: $hex-border 0;
  position: relative;
  transition: $hex-transition;
  width: $hex-width;
}
.hexagonA:after,
.hexagonA:before{
  // border-left,border-rightは三角形の横幅
  border-left: $hex-margin solid transparent;
  border-right: $hex-margin solid transparent; 
  content: "";
  left: 0;
  position: absolute;
  transition: $hex-transition;
  width: 0;
}
.hexagonA:after {
  //border-topは三角形の縦幅
  border-top: $hex-border solid $color-hex-default;
  top: 100%;
  width: 0;
}
.hexagonA:before {
  border-bottom: $hex-border solid $color-hex-default;
  bottom: 100%;
}

うまいこと四角と三角を組み合わせてる？
以下の記事のコップを作るところ辺りを参考に

参考：[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita

六角形の配置決め

# hexagonA-container {
  display: grid;
  grid-template-columns: $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width $hex-width;
  grid-auto-rows: $hex-height + $hex-border;
  grid-gap: $hex-between $hex-between;
  padding-bottom: $hex-border;
}

ここと

.hexagonA:nth-child(32n + 17), 
.hexagonA:nth-child(32n + 18),
.hexagonA:nth-child(32n + 19),
.hexagonA:nth-child(32n + 20),
.hexagonA:nth-child(32n + 21), 
.hexagonA:nth-child(32n + 22),
.hexagonA:nth-child(32n + 23),
.hexagonA:nth-child(32n + 24),
.hexagonA:nth-child(32n + 25), 
.hexagonA:nth-child(32n + 26),
.hexagonA:nth-child(32n + 27),
.hexagonA:nth-child(32n + 28),
.hexagonA:nth-child(32n + 29), 
.hexagonA:nth-child(32n + 30),
.hexagonA:nth-child(32n + 31),
.hexagonA:nth-child(32n + 32) {
  margin-left: $hex-width / 2 + $hex-between / 2;
}

ここ

参考：CSS Grid Layout を極める！ - Qiita
参考：MDN web docs :nth-child()

この辺を参考にしながら，強引に配置
もっとうまい方法がある気がしてる．
教えてください．

六角形を配置

<div id="hexagonA-container">
  <div v-for = "i in 150" v-bind:key="i.id" class = "hexagonA">
    <span>{{ i }}</span>
  </div>
</div>

Vueっぽいことしてるの，ここだけな気がする
公式リファレンスをどうぞ

参考：Vue.js リストレンダリング

感想

特に何かに使うわけでもないですが，作ってみました．
もっと効率のいい方法がありそう……
アドバイス等あればぜひ！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up