CSSでいろいろな図形を作ろう

はじめに

Web制作を行う中で、デザインの中に円や図形が含まれているということがしばしばあります。

他の記事でも解説したように、簡単な図形は基本的にはマークアップでの実装がおすすめです。

メリットとしては、

画像に比べて、容量が軽くなりやすい

拡大した時に画質が荒くならない

色や形の変更が容易

変形のアニメーションを起こすことができる

と言ったものがあります。

ハンバーガーメニューの解説の際は、

• 色や形の変更が容易
• 変形のアニメーションを起こすことができる

というメリットが強くいきましたが、今回は

• 画像に比べて、容量が軽くなりやすい
• 拡大した時に画質が荒くならない

というメリットが強く効いてきます。

また、装飾としての使い回しを想定した場合は、色や大きさが異なる場合はCSSを少し書き換えたものを用意すればいいので、CSS設計でいうところの「拡張のしやすさ」にも繋がってくる部分があります。

ということで、早速、作っていきましょう。

円を作る

Web制作の装飾として、円はよく出てきます。アイコンを囲う形で使われたり、自由の大きさ・色の箇条書きの点を作りたい時に使われたりします。

通常の円

See the Pen 図形を作る - 円 by ZeroPlus (@zeroplus-programming) on CodePen.

※正円がつぶれている場合は倍率「0.5x」を選択するとつぶれてない状態を確認できます。

円を作るのに必要なコードは以下の通りです。

ソースコード

<div class="circle"> 正円 </div>

.circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
}

仕組みとして「180pxの正方形の角を丸める」という形で正円を作っています。なので、角を丸めるプロパティであるborder-radiusを使用しています。

また、長方形に対してborder-radius: 50%;を使用すると、楕円を作ることもできます。

ドット状の背景

図形を作るとは少し違いますが、Web制作での円は装飾だけでなく、背景や影のような装飾で、ドット状の背景を使用することがあります。

パターン１

See the Pen ドット状の背景 by ZeroPlus (@zeroplus-programming) on CodePen.

パターン２

See the Pen ドット状の背景02 by ZeroPlus (@zeroplus-programming) on CodePen.

詳しい仕組みはここでは解説しませんが、radial-gradient()という関数を使うと、ドット状の背景を作ることができます。

実装するときは、ここからコピペして値をカスタマイズすると良いでしょう。

以上が、円の作り方です。

三角形を作る

次は三角形の作り方を紹介していきます。

borderの仕様を理解する

今回のやり方として、borderプロパティを使用していきます。その仕組みを理解するため、まずはborderプロパティの基本的な仕様をみていきます。

See the Pen 図形を作る - 三角形_borderの仕様 by ZeroPlus (@zeroplus-programming) on CodePen.

border-topの色だけを黒色にしたもので、border-widthごとの変化を見ていきます。そして、border-widthが一辺の長さの半分になった時に、borderだけで埋めることができます。

その時の形として、一辺のborderの領域がちょうど三角形の形になっていますね。

この仕様を利用して、三角形を作っていきます。

三角形①

See the Pen 図形を作る - 三角形 by ZeroPlus (@zeroplus-programming) on CodePen.

ソースコード

<div class="triangle"></div>

.triangle {
  border-width: 30px;
  border-style: solid;
  border-color: transparent transparent transparent orange;
}

ソースコード

<div class="triangle"></div>

.triangle {
  border-width: 30px 60px;
  border-style: solid;
  border-color: transparent transparent orange orange;
  width: 0;
}

平行四辺形を作る

次は、平行四辺形の作り方を紹介します。

See the Pen 図形を作る - 平行四辺形 by ZeroPlus (@zeroplus-programming) on CodePen.

ソースコード

<div class="parallelogram"></div>

.parallelogram {
  width: 240px;
  height: 160px;
  transform: skew(15deg);
}

仕組みとして「四角形を傾斜させる」という形で平行四辺形を作っています。

また、「傾斜させる」というのをtransform: skew();というものを使って実装しています。

skewに関しての詳しい説明はこちらを参考にしてください。

CSSのtransformプロパティで要素を変形させよう

ひし形を作る

ひし形は、平行四辺形の応用で作れます。

※横にスクロールすると図形が全て確認できます。

See the Pen 図形を作る - ひし形 by ZeroPlus (@zeroplus-programming) on CodePen.

ソースコード

<div class="rhombus"></div>

.rhombus {
  width: 150px;
  height: 150px;
  transform: rotate(-45deg) skew(20deg, 20deg);
}

作り方として、

1. 正方形を作ります
2. skew()で縦と横の両方向に傾斜をかけます
3. 回転させます

そうすると、ひし形を作ることができます。

以上が、平行四辺形とひし形の作り方です。

まとめ

今回はさまざまな図形の作り方を紹介してきました。

ただし、今回は作り方を覚えて行ってほしいのではありません。

• 「簡単な図形はマークアップで作れる」
• 「作り方はこのページにまとまっている」

ということを頭の中に置いておいてほしいです

図形単体で使うこともあれば、擬似要素を使ったボタンのアニメーションや斜めの多いデザインの装飾に使うなどの応用もあります。

その時に、このページや、他の参考サイトを見ながらでも作れるようになればOKです。

\ 学んだことをSNSでシェアしよう /

facebook

X

LINE

ハテブ

Pocket

URL
copy

コピー