フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【コピペOK】HTMLとCSSで作る図形：サンプルコード集 RELEASE / 2022.7.29 UPDATE / 2023.11.18 css HTML テクニック 図形WEBサイトを作成していると様々な形状の要素を作成することになりますよね。画像として作成してしまえば簡単ですWEBサイトを作成する際には、様々な形状の要素をデザインすることが求められます。これらの要素を画像として取り扱う方法もありますが、その場合にはいくつかのデメリットが存在します。例えば、色や形状の変更を行う際には、追加の時間と労力が必要となります。さらに、画像としてのファイルサイズが大きくなるため、多用するとページの表示速度に悪影響を及ぼす可能性があります。
そういった理由から、HTMLとCSSで再現可能な要素に関しては、できるだけHTMLとCSSのみを使用して作成する方針を取りたいと考えています。
今回の記事では、HTMLとCSSだけで作成できる図形についてご紹介します。サンプルソースにHTMLの記載がない場合、下記の基本的なHTML構造を前提としています。
<div class="box"></div>この記事の目次を表示
- 1 正方形
- 2 長方形
- 2.1 縦長
- 2.2 横長
- 3 台形
- 4 平行四辺形
- 5 円
- 5.1 正円
- 5.2 楕円
- 5.3 半円（上向き）
- 5.4 半円（右向き）
- 5.5 半円（下向き）
- 5.6 半円（左向き）
- 6 三角形
- 6.1 三角形（上向き）
- 6.2 三角形（ 右向き ）
- 6.3 三角形（下向き）
- 6.4 三角形（左向き）
正方形
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 150px; background: #dc5a45; }長方形
縦長See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 300px; background: #dc5a45; } 横長See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 300px; height: 150px; background: #dc5a45; }台形
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 100px; height: 0; border-bottom: 100px solid #dc5a45; border-left: 50px solid transparent; border-right: 50px solid transparent; }平行四辺形
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 100px; background: #dc5a45; transform: skewX(-45deg); margin: auto; }円
正円See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 150px; background: #dc5a45; border-radius: 50%; } 楕円See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 250px; height: 150px; background: #dc5a45; border-radius: 50%; } 半円（上向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 75px; background: #dc5a45; border-radius: 150px 150px 0 0; } 半円（右向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 75px; height: 150px; background: #dc5a45; border-radius: 0 150px 150px 0; } 半円（下向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 150px; height: 75px; background: #dc5a45; border-radius: 0 0 150px 150px; } 半円（左向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 75px; height: 150px; background: #dc5a45; border-radius: 150px 0 0 150px; }三角形
三角形（上向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width:0; height:0; border-bottom:100px solid #dc5a45; border-left:100px solid transparent; border-right:100px solid transparent; } 三角形（ 右向き ）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 0; height:0; border-left: 100px solid #dc5a45; border-top: 100px solid transparent; border-bottom: 100px solid transparent; } 三角形（下向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 0; height:0; border-top: 100px solid #dc5a45; border-left: 100px solid transparent; border-right: 100px solid transparent; } 三角形（左向き）See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
.box{ width: 0; height:0; border-right: 100px solid #dc5a45; border-top: 100px solid transparent; border-bottom: 100px solid transparent; }関連記事一覧
【テクニック】CSSで半円・縁取り・弧を作る方法CSSは様々な形を作ることが出来ます。正円はもちろん、半円、縁取りの半円、半円の弧の部分などデザイナーが作るデザインに合 […]
【テクニック】CSSで蛍光ペン風のマーカーを作る方法WWEBサイト作成時に情報を強調するための方法は多岐にわたります。訪問者の注意を引きつけ、情報伝達を効果的にするための手 […]
【CSS】borderプロパティで枠線を引く方法WEBサイトで枠線を付けるborderプロパティ。borderプロパティには線の太さ、種類、色を指定することが出来ます。 […]
【テクニック】CSSでもっと見るボタンを実装する方法様々なWEBサイトを見ていると「もっと見るボタン」という機能をよく見かけます。このボタンは、最初から全文を表示してしまう […]
【プラグイン不要】自作ポップアップを作成する方法WEBサイトを作成しているとページを表示したい時や特定の要素をクリックした際、ポップアップで内容を表示することがよくあり […]
【WordPress】グーテンベルク色設定で 選択肢を変更する方法WordPress5.0から登場したグーテンベルク。凄く便利なエディタですが、少しカスタマイズをすることでさらに便利で使 […]
【バリデーション】フォームの必須チェックを実装する方法Web制作において、フォームのバリデーションは非常に重要です。ユーザーからの入力を適切に受け取るため、またユーザーに正し […]
【jQuery】slickスライダーのページャーをメーターにカスタマイズする方法WEBサイトでスライドショーを作成する際、よく使用するスライダープラグインのslick。デフォルトのオプション機能にペー […]
【JavaScript】現在時刻を表示する方法今回の記事ではJavaScriptを使用して現在時刻をリアルタイムに表示し続ける時計の作り方を解説したいと思います。 こ […]
【バリデーション】郵便番号｜フォームの入力形式チェックを実装する方法日本の郵便番号は、特定のフォーマットに基づいています。ウェブページやアプリケーションで、郵便番号の入力チェックを行う際、 […]
【テクニック】ヘッダー固定の時、ページ内移動をヘッダー分ずらす方法ページ内の特定の位置へページ移動したり、直接該当部分へページ遷移したりすることがよくあります。通常であれば、特に何か難し […]
【テクニック】複数行対応：CSSだけで実装する3点リーダーWEBサイトを作成しているとお知らせや施工事例などのページを作成することも多々あります。記事全文はそれぞれの詳細ページで […]