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

シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。

JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。

サイトのキャプチャ

Hexi-Flexi Grid
Hexi-Flexi Grid -GitHub

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: 外部ファイル

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

Step 2: HTML

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

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

カスタマイズ

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

sponsors

top of page

©2018 coliss