タイトル通りです。 <div></div> まず、共通のスタイルを定義します。 div { position: relative; width: 150px; height: 60px; background: #ddd; } 方法1（Border使用） おそらくこれが一番考えやすいと思います。 div { border-left: 5px solid green; } div要素に対…

方法①三角形を入れる <div class="hexagon"></div> .hexagon { position: relative; width: 100px; height: 57.74px; background-color: #333; margin: 28.87px 0; } .hexagon::before, .hexagon::after { content: ""; position: absolute; width: 0; border-left: 50px solid transpar…

グラデーションは、一定の方向に徐々に色が変わる効果を指します。今回はCSSグラデーションの基本的な使い方を紹介します。 CSSグラデーションの基本 CSSグラデーションを使用するには、要素の背景にグラデーション関数を指定します。 主に三つの種類があり…

CSSで要素の高さや幅を指定する際はpxや%といった単位を使うのが一般的ですが、本文はビューポートの単位を紹介します。 ビューポート単位 まず、ビューポート単位とは、ビューポート（Viewport）というブラウザの表示領域のサイズに基づいた相対単位です。 …

CSS3では、フォントサイズの指定に「rem」と「em」という単位が使えます。 これらの単位は、どちらも相対的な値であり、親要素のフォントサイズに対する相対値で指定されます。以下、remとemの違いと使い分け方について解説します。 remとは？ remとは「root…