Webデザイナーブログから学ぶホームページ制作

現代のウェブデザインにおいては、単に「見た目が美しい」だけでは不十分です。ユーザーが利用するデバイスや画面サイズ、解像度は多様化しており、それに対応できる柔軟性とスケーラビリティが求められるようになっています。特にモバイル端末の普及に伴い、デザインのレスポンシブ対応は必須の要件となっています。

このような背景から、SVG（Scalable Vector Graphics）の活用が注目されています。SVGは、その名のとおり「スケーラブル＝拡大・縮小しても劣化しない」特性を持つベクター形式の画像です。解像度に依存せず、高い描画精度を維持できるため、ロゴやアイコン、インフォグラフィックなど、さまざまな場面で利用されています。
SVGの魅力は、単に画像として美しく表示できるだけでなく、HTMLに直接埋め込んでコードとして管理できる点にもあります。これにより、CSSやJavaScriptと組み合わせて、色やサイズ、アニメーションといった視覚表現を柔軟に制御することができます。

また、SVGとCSSを連携させることで、デザインの美しさ、機能性、保守性のすべてを高いレベルで両立させることが可能となります。特に、グラフィックのサイズや見た目を「動的に制御する」必要がある場合、SVGの導入は極めて有効です。
今回は、CSS × SVGでレスポンシブな円形・円グラフの実践方法を解説します。

SVG（Scalable Vector Graphics）とは、XML（拡張可能なマークアップ言語）をベースとした2次元のベクター画像フォーマットのことです。名前の通り、「スケーラブル（拡大・縮小可能）」でありながら、画像が劣化しないという特長を持っています。
通常のJPEGやPNGといった「ラスター画像」は、ピクセルの集まりで構成されているため、拡大すると画像がぼやけたり、荒くなってしまいます。一方、SVGは線や形、色などの情報を数式的に定義するベクター形式のため、どれだけ拡大しても常に滑らかで鮮明な表示が可能です。

また、SVGは画像ファイルとしてだけでなく、HTML文書内に直接記述することも可能です。これにより、CSSやJavaScriptと組み合わせて色の変更・アニメーション・イベント連動などの高度な表現が可能になります。たとえば、アイコンの色をホバーで変えたり、ロゴをアニメーションで回転させたりといったことも、画像ファイルを作り直さずに実現できます。
さらに、SVGはファイルサイズが非常に軽量なうえに、テキストエディタでも編集できるという柔軟性があります。Webパフォーマンスの観点でもメリットがあり、レスポンシブデザインとの相性も抜群です。

SVG（Scalable Vector Graphics）は、Webページ上でベクター形式の図形を描画できるマークアップ言語です。一方、CSS（Cascading Style Sheets）は、HTMLやSVGなどの要素に視覚的なスタイルを定義するための言語です。これらを組み合わせることで、柔軟で再利用可能、かつ美しくスケーラブルなデザインが実現できます。
SVGはHTML文書内に「svg」タグとして直接埋め込むことができます。

<svg width="100" height="100">
  <circle class="my-circle" cx="50" cy="50" r="40" />
</svg>

SVGは、HTMLの要素と同様にCSSで装飾やアニメーションを加えることができます。
「style」属性を使って直接指定することもできますし、クラス名を付けて外部CSSファイルで管理することも可能です。SVG要素にCSSクラスを付けてスタイルを適用できるのは非常に強力です。

SVG（Scalable Vector Graphics）とCSS（Cascading Style Sheets）を組み合わせて使うことで、柔軟で拡張性の高いデザイン表現が可能になります。特にWeb制作においては、画像の見た目を保ちながら、軽量・レスポンシブ・インタラクティブといった現代的な要件に対応できる点で非常に有効です。

【具体的なメリット】
1.拡大・縮小しても画質が劣化しない
2.スタイルを柔軟に調整できる
3.インタラクティブな表現が可能
4.コードで管理できるので軽量・メンテナンスしやすい
5.アニメーションや視覚効果の実装が簡単
6.アクセシビリティにも配慮できる

SVGはベクター形式で構成されているため、画面サイズに応じていくら拡大・縮小しても画像がぼやけたり荒くなったりすることがありません。
CSSと組み合わせれば、「width: 100%」や「max-width」などで画面サイズに合わせたレスポンシブ対応が簡単に行えます。

SVGの各要素（円、線、多角形など）にクラスやIDを付ければ、CSSで自由に色・線幅・透過度・影・アニメーションなどを指定できます。
これにより、再利用可能で一貫性のあるデザインが実現できます。

CSSの「hover」や「@keyframes」を使えば、SVGのパーツごとにアニメーションやマウスオーバー効果を加えることができます。
JavaScriptを使わなくても、ユーザーの操作に応じた動的な表現を手軽に実装できるのは大きな利点です。

SVGはテキストベースで記述されるため、画像編集ソフトを使わずともテキストエディタで編集できます。画像として読み込むよりもファイルサイズが小さく、読み込みも高速です。
変更やバージョン管理がしやすい点でも、開発チームにとって扱いやすいフォーマットです。

SVGの図形に対して、CSSのトランジションやアニメーションを適用することで、滑らかで洗練された視覚効果を実現できます。
たとえば、円グラフを徐々に描画したり、ロゴにフェードイン・回転・拡大といった動きをつけることも可能です。

SVGはHTML内に直接埋め込めるため、「title」や「desc」要素を使って図の説明を記述することができます。
これにより、スクリーンリーダーなどでも意味を伝えることが可能になり、アクセシブルなWebサイトの構築に貢献します。

Webデザインにおいて、「円」や「円グラフ」は情報の視覚化や装飾の面で重要な要素です。特に近年では、あらゆるデバイスで見やすく表示する「レスポンシブ対応」が欠かせません。そこで活用されるのが、SVG（Scalable Vector Graphics）とCSS（スタイルシート）の組み合わせです。 SVGはベクター形式で描画されるため、どれだけ拡大・縮小しても画質が劣化しないという特長があります。さらにCSSを使えば、サイズ調整やアニメーション、色の変更などを柔軟にコントロールすることができ、動的でスケーラブルなデザインが可能になります。

【円形・円グラフの実践方法】
1.レスポンシブな塗りつぶし円形を配置する方法
2.ボーダーラインの円形を実施する方法
3.ボーダーラインの円グラフを実施する方法
4.ボーダーラインの円グラフに文字を入れて実施する方法

SVGとCSSを組み合わせることで、画面サイズに応じてスケーラブルに拡縮される塗りつぶしの円を作成できます。 viewBox属性とwidth: 100%でレスポンシブ対応し、circle要素のfillで色を指定します。

<div class="box1">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle class="circle" cx="50" cy="50" r="40" />
</svg>
</div>

.box1{
  width: 100%;
  max-width: 50%;
  margin:auto;
  aspect-ratio: 1 / 1;
}
.box1 svg {
  width: 100%;
  height: 100%;
}
.box1 .circle {
  fill: #fa41a1;
  transition: fill 0.3s ease;
}
.box1 .circle:hover {
  fill: #27ae60;
}

塗りつぶしをやめて、枠線だけの円（円形のボーダー）を表示したい場合は、fill=”none”とstroke属性を使います。 CSSで枠線の色や太さ、hover効果を制御できます。

<div class="box2">
<svg class="circle-svg" viewBox="0 0 100 100">
  <circle class="ring" cx="50" cy="50" r="40" />
</svg>
</div>

.box2{
  width: 100%;
  max-width: 50%;
  margin:auto;
  aspect-ratio: 1 / 1;
}
.box2 .circle-svg {
  height: auto;
}
.box2 .ring {
  fill: none;
  stroke: #fa41a1;
  stroke-width: 5;
  transition: stroke 0.3s ease;
}
.box2 .ring:hover {
  stroke: #27ae60;
}

円形のグラフ（ドーナツグラフ）は、データの比率や進捗を視覚的に伝えるのに効果的です。 SVG（Scalable Vector Graphics）とCSSを組み合わせることで、シンプルで柔軟性のあるボーダーのみの円形グラフを作ることができます。

<div class="box3">
<svg viewBox="0 0 100 100" class="chart">
  <!-- 背景の輪 -->
  <circle class="bg-ring" cx="50" cy="50" r="45" />
  <!-- データの輪（75%表示） -->
  <circle class="data-ring" cx="50" cy="50" r="45" />
</svg>
</div>

.box3{
  width: 100%;
  max-width: 50%;
  margin:auto;
  aspect-ratio: 1 / 1;
}
.box3 .chart {
  /* 円サイズ */
}
.box3 .bg-ring {
  fill: none;
  stroke: #eee;
  stroke-width: 10;
}
.box3 .data-ring {
  fill: none;
  stroke: #3498db;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 282.6;       /* 円周（2πr ≒ 2×3.14×45） */
  stroke-dashoffset: 70.65;      /* 25% 非表示 = 282.6 × (1 - 0.75) */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease;
}
.box3 .chart:hover .data-ring {
  stroke: #2980b9;
}

SVGの円形グラフに文字を入れる方法はいくつかありますが、最も一般的なのは、SVG内で 「text」要素を使って中央にテキストを配置する方法です。

<div class="box4">
<svg viewBox="0 0 100 100" class="chart">
  <!-- 背景の円 -->
  <circle class="bg-ring" cx="50" cy="50" r="45" />
  
  <!-- データの円（75%表示） -->
  <circle class="data-ring" cx="50" cy="50" r="45" />
  
  <!-- 中央のテキスト -->
  <text x="50" y="50" class="chart-label">75%</text>
</svg>
</div>

.box4{
  width: 100%;
  max-width: 50%;
  margin:auto;
  aspect-ratio: 1 / 1;
}
.box4 .chart {
  /* 円サイズ */
}
.box4 .bg-ring {
  fill: none;
  stroke: #eee;
  stroke-width: 10;
}
.box4 .data-ring {
  fill: none;
  stroke: #3498db;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 282.6;
  stroke-dashoffset: 70.65; /* 75%表示 */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
.box4 .chart-label {
  fill: #333;
  font-size: 16px;
  text-anchor: middle; /* 中央揃え */
  dominant-baseline: middle; /* 縦方向の中央揃え */
  font-weight: bold;
}

CSSとSVGを組み合わせて、円形のボーダーグラフを作成し、中央にテキストを配置する方法をご紹介しました。
円形グラフは、「circle」要素と「stroke-dasharray / stroke-dashoffset」を使って表示割合を調整し、「text」要素でラベルや数値を中央に表示できます。
グラフの見た目をカスタマイズしたり、ホバー時の変化を加えることで、より視覚的に魅力的な表現が可能になります。

これらのテクニックを活用して、データの可視化や進捗状況の表示など、洗練されたSVGグラフをWebサイトに柔軟に組み込んでみてください。