2017年12月24日(日)
CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」
Hexi-Flexi-Grid
Hexi-Flexi-Gridはハニカム構造のレイアウトを組めるCSSグリッドシステムです。JavaScriptは使われておらず、CSS Gridベース、六角形はclip-pathが使われています。こういうのに社員の写真を入れてスタッフ紹介ページに作る、みたいなのたまに見かけますね。ただ、対応ブラウザが限られるのでその辺はご注意ください。特にclip-pathはIEもEdgeも非対応です。Can I Use css-clip-path?
コードは長くなりますが六角形ならSVGでも可能ですので用途に合わせて使うとよさそうですね。
Hexi-Flexi-Grid
- Post by かちびと.net
- PR:WPデザインギャラリー
- flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」
<...
0
13
4
27
author:
かちびと.net
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログ
‹ PREV
Webデザインに役立つ！使えるハイクオリティなフリーアイコンまとめ「30 Free Icons Sets to Use on Websites and Apps」
NEXT ›
IT×自動車産業。もはやITは全ての産業に欠かせない！？
Ads
WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『CSS Gridを使って六角形のオブジェクトを並べたハニカムなレイアウトを組めるスタイルシート・「Hexi-Flexi-Grid」』についてまとめています。
この記事は特にjavascript・SVG・写真について書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
Ads
