情報やデータなどを分かりやすく視覚的に表現するインフォグラフィック。
サイトでグラフやカードなどなど視覚的に分かりやすくしたい部分で用いられることが多いかと思います。
そこで今回は、簡単でCSSで作れる分かりやすいインフォグラフィックをご紹介します。
コーポレートサイトの会社のビジョンや会社概要、ポートフォリオサイトの自身のスキルなどを表示する際などなど色々なシーンで使えそう！
目次
レスポンシブ対円型のインフォグラフィックCSS
See the Pen
Responsive infographic with CSS variables, flexbox and clip-path by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応タイムライン型インフォグラフィックCSS
See the Pen
Responsive infographic/ CSS variables, grid, clipping and masking by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応バッジ型インフォグラフィックCSS
See the Pen
Responsive infographic/ CSS variables, calc(), grid layout (no Edge support) by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS
See the Pen
Responsive infographic with CSS variables, calc() and flexbox (no Edge support) by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS2
See the Pen
Responsive infographic/ CSS variables, grid layout (no Edge support) by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS3
See the Pen
Responsive infographic/ CSS variables, grid layout by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS4
See the Pen
Responsive infographic/ CSS variables, grid layout by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS5
See the Pen
Responsive infographic/ CSS variables, grid by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS6
See the Pen
Infographic with CSS grid and variables by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS7
See the Pen
Responsive infographic with CSS variables by Ana Tudor (@thebabydino)
on CodePen.
レスポンシブ対応カード型インフォグラフィックCSS8
See the Pen
Responsive infographic with CSS variables and flexbox tricks by Ana Tudor (@thebabydino)
on CodePen.
