CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート
Post on:2017年12月13日
sponsors
シンプルな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の使い方
Step 1: 外部ファイル
当スタイルシートを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <link rel="stylesheet" href="style.css"> </head> |
Step 2: HTML
親コンテナにユニークなid「#myHexGrid」を指定し、ラッパーに「.hexContainer」、すべてのアイテムに「.hex」を与えます。下記の場合では、6つの六角形が実装されます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
基本的な実装は、これで完了です。
カスタマイズ
スタイルはSCSSファイルで、カスタマイズできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
#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; // ... } |
sponsors
