【保存版】CSS Shapesのサンプルコード集：円形コンテンツ、波型装飾、三角形メニューなど

従来のWebデザインでは、矩形（ボックス型）レイアウトが主流でした。しかし、近年登場したCSS Shapesモジュールによって、Webページ上に円形、三角形、さらには複雑な多角形など、自由な形状を駆使したレイアウトが可能になりました。これが「<shape>」を用いた形状デザインです。

本記事では、CSS Shapesの魅力と、その基本的な使い方について、初心者にも分かりやすく解説していきます。

CSS Shapesとは？

CSS Shapesは、CSSプロパティによって要素の形状を定義し、コンテンツをその形状に沿って配置・変形させるモジュールです。まるでキャンバスに自由に絵を描くように、独創的なレイアウトを表現することができます。

主な機能

形状の変形: 回転、拡大縮小、歪曲などの変形を適用できます。
形状の組み合わせ: 複数の形状を組み合わせて、複雑な形状を作成できます。
画像形状: 画像を形状として利用できます。画像の透明度に基づいて形状を形成することも可能です。
基本図形: circle、ellipse、polygon、inset などの基本図形を定義できます。

メリット

レスポンシブデザインに対応: 形状はメディアクエリによって調整できるので、様々なデバイスに最適なレイアウトを提供できます。
視覚的な訴求力向上: ユニークな形状は、見る人の目を引き、印象的なデザインに仕上げることができます。
デザインの可能性が広がる: 従来のボックス型レイアウトにとらわれず、自由なレイアウトを構築できます。

デモ

以下のデモサイトでは、CSS Shapesを用いた様々なデザイン例を実際に確認できます。

基本的な使い方

形状を定義する: shape-outside プロパティを使用して、要素の形状を定義します。
コンテンツを配置する: 要素内にコンテンツを配置します。コンテンツは形状に合わせて配置・変形されます。

例：円形にコンテンツを配置

#circle {
  shape-outside: circle(50%); /* 半径50%の円形 */
  width: 200px;
  height: 200px;
  background-color: #f00;
}

#circle p {
  color: #fff;
  text-align: center;
}

この例では、#circle 要素が円形に定義され、その中に配置された段落 (p) 要素が中央揃えで表示されます。

応用例

ダイナミックなアニメーション
波型の装飾
円形メニュー
画像を三角形に切り抜いて表示

CSS Shapesは比較的新しいモジュールであり、すべてのブラウザで完全な互換性がありません。現時点では、主要なブラウザで利用可能ですが、一部古いブラウザでは動作しない可能性があります。

CSS Shapesは、Webデザインに新たな可能性をもたらす強力なツールです。基本的な使い方をマスターすれば、独創的なレイアウトを簡単に実現することができます。ぜひ、CSS Shapesを活用して、ワンランク上のWebデザインに挑戦してみてください。

円形コンテンツ

円形コンテンツは、CSS Shapesの中でも最も基本的なデザインパターンの一つです。プロフィール画像やアイコンなどを円形に配置することで、親しみやすい印象を与えることができます。

#circle {
  shape-outside: circle(50%); /* 半径50%の円形 */
  width: 200px;
  height: 200px;
  background-color: #f00;
}

#circle img {
  width: 100%;
  height: auto;
  border-radius: 50%; /* 画像も丸くくり抜く */
}

波型装飾

波型装飾は、ヘッダーやフッターなどにさりげなく取り入れることで、デザインに動きを出すことができます。

#wave {
  shape-outside: polygon(50% 0%, 75% 50%, 25% 50%, 0% 100%);
  width: 100%;
  height: 100px;
  background-color: #00f;
}

三角形メニュー

三角形メニューは、ナビゲーションメニューなどに利用することで、ユニークな印象を与えることができます。

#triangle-menu {
  shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);
  width: 200px;
  height: 100px;
  background-color: #0f0;
}

#triangle-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#triangle-menu li {
  display: block;
  text-align: center;
  padding: 20px;
}

画像切り抜き

画像を切り抜いて、特定の形に表示することができます。人物画像などをハート型に切り抜けば、オリジナリティあふれるデザインになります。

#image-mask {
  shape-outside: url('./image.png') repeat(1); /* 画像を形状として利用 */
  width: 200px;
  height: 200px;
}

#image-mask img {
  width: 100%;
  height: auto;
}

ダイナミックなアニメーション

CSS Shapesとアニメーションを組み合わせることで、より複雑でダイナミックな動きを表現することができます。

#rotating-circle {
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  background-color: #f0f;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

上記以外にも、CSS Shapesを用いたデザインパターンは無限にあります。ぜひ色々なアイデアを試してみて、あなただけの個性的なデザインを創造してください。

使用環境: どのような環境で「<shape>」を使用したいですか？Webサイト、モバイルアプリ、デスクトップアプリなど、使用環境によって適切な代替方法は異なります。
実現したい形状: どのような形状を実現したいですか？円形、三角形、四角形など、具体的な形状によって適切な代替方法は異なります。
代替したい目的: なぜ「<shape>」を代替したいのでしょうか？デザイン上の理由、機能的な理由、互換性の問題など、目的によって適切な代替方法は異なります。

画像: 画像を使用して形状を表現することもできます。ただし、画像のサイズは固定となり、レスポンシブデザインに対応できない場合があります。
Canvas: Canvas APIを使用すると、JavaScriptで動的に複雑な形状を描画することができます。
CSS: CSS Shapesモジュールを使用すると、CSSだけで円形、三角形、多角形などの形状を表現できます。
SVG: Scalable Vector Graphics (SVG)は、ベクター画像形式であり、様々な形状を表現できます。また、比較的軽量で、様々なデバイスで表示することができます。