読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

CSSでハニカム構造的な配置を実現する

はい。CSSでハニカム構造的な配置を実現し、要素の大きさが変わったときもいい感じに調整してみました。

言語化してもわかりにくいですね。
そもそもハニカム構造とはなにものなのか?まずはそこから説明しましょう。



ハニカム構造とは

ハニカム構造(ハニカムこうぞう、英語:honeycomb structure)とは、正六角形または正六角柱を隙間なく並べた構造である。ハニカムとは英語で「ミツバチの櫛(=蜂の巣)」という意味であり、多くの蜂の巣がこのような形をしていることから名付けられた。
広義には、正六角柱に限らず立体図形を隙間なく並べたもの(3次元空間充填)をハニカムと呼ぶ。
板状の素材に孔を開ければ、強度をあまり損なわずに必要な材料を減らすことができる。孔の大きさや数をどんどん増やせば、最終的には棒材による構造が残る。同様に、塊状の素材に孔を開ければ、板材による構造が残る。これらがハニカムである。

ハニカム構造 - Wikipedia より引用


いかがでしょう。Wikipediaをコピペ引用しただけですが。
わかったようなわからないようなかもしれません。

結局のところDEMOをみていただくのが一番早いとおもいます。


DEMO

See the Pen HONEYCOMB STRUCTURE by kimmy (@kimmy) on CodePen.


こんな感じです。ボールをクリックすると若干大きくなりますが、なんとなくハニカムを維持しています(厳密には正六角形を維持できてません)。



動作原理

ポイントは、

  1. サイズの異なる要素を縦位置でセンタリング
  2. 複数の要素を横位置でセンタリング
  3. 高さの決まっている要素を縦位置でセンタリング

の3点を同時に行っていることです。
3番のみ、JSで制御していますが、1と2はinline-block要素をつかって実現しました。

SCSS
* {
  user-select: none;
}

body {
  background: #00695C;
}

.wrapper {
  text-align: center;
}

.stage {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
}

.line {
  width: 100%;
  text-align: center; // 中のinline要素をセンタリング
}

.ball {
  display: inline-block;
  border-radius: 50%;
  margin: 5px;
  width: 80px; height: 80px;
  background: #FFAB00;
  vertical-align: middle; // 己の縦位置センタリング
  transition: all .15s ease-in-out;
  box-shadow: 0 0 5px rgba(0, 0, 0, .4);
  cursor: pointer;
    
  &.on {
    margin: 10px;
    width: 120px; height: 120px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  }
}

こんなかんじですね。
どこかで誰かの役に立てば幸いです。