CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴンレイアウトを簡単に実装できるスタイルシート

サイト構築 -CSS

Post on:2017年12月13日

Hexi-Flexi Gridの特徴

JavaScriptは必要なし、CSSのみで実装。
六角形のアイテムの高さ・幅、列・行は自由に設定。
セル、列、行のモジュラー形式。
背景画像を自動入力する機能をサポート。

サポートブラウザ

CSS Gridで実装するため、サポートブラウザは下記の通りです。

Firefox 56+
Chrome 61+
Safari 10.1+
iOS Safari 10.3+
Chrome for Android 62+
IE 11/Edge
※CSS GridはIE 11とEdgeでサポートされていますが、Hexi-Flexi GridではサポートされていないCSSクリップパスを使用しています。これを回避するには、六角形のSVG img要素をグリッドに配置します。

Hexi-Flexi Gridのデモ

デモでは、レスポンシブ対応の六角形のグリッドを楽しめます。

Hexi-Flexi Grid

Hexi-Flexi Gridの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>

<head>

...

</head>

Step 2: HTML

親コンテナにユニークなid「#myHexGrid」を指定し、ラッパーに「.hexContainer」、すべてのアイテムに「.hex」を与えます。下記の場合では、6つの六角形が実装されます。

<div id="myHexGrid">
  <div class="hexCrop">
    <div class="hexContainer">
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
      <div class="hex"></div>
    </div>
  </div>
</div>

</div>

基本的な実装は、これで完了です。

カスタマイズ

スタイルはSCSSファイルで、カスタマイズできます。

#myHexGrid {
  $gridWidth:   20em;
  $gridHeight:  auto;
  $columnCount: 3;
  $rowCount:    2;
  $hexCount:    auto;
  $hexLayout:   row;
  $gridOrient:  vertical;
  $crop:        none;
  $cropFactor:  1;
  $hexContent:  auto;
  $hexSize:     auto;
  $hexMargin:   0.5em;
  $hexShape:    hexagon;
  $hexColor:    #48a999;
  $breakpoints: none;
  $images:      none;

  // ...

}