CSSだけで斜めの線を作る！before/after疑似要素を使ったおしゃれデザイン術

Posted on by

Webサイトやバナーで「斜めのライン」を入れると、それだけでデザインがグッと引き締まった印象になります。でも、画像を使わずに斜線を表現する方法がわからない…という方も多いのではないでしょうか？

この記事では、CSSの疑似要素 ::before や ::after を使って、画像を使わずに斜めの線を作る方法を詳しく解説します。コピペで使えるサンプルコードもご紹介しますので、ぜひデザインのアクセントに活用してください。

CSSで斜めの線を作る方法とは？

CSSだけで斜めの線（いわゆる「斜線」）を作る方法はいくつかありますが、
もっとも手軽で柔軟性があるのが、::beforeや::after疑似要素 + transform: rotate() を使う方法です。

この方法のメリットは以下のとおりです

  • 画像を使わないので軽量
  • サイズや角度をCSSだけで調整可能
  • アニメーションなどの追加も簡単

::before / ::after 疑似要素って何？

CSSでは、特定の要素の前後に「仮想的な要素」を挿入することができます。
それが ::before と ::after 疑似要素です。

これらはHTMLに書かれていないのに、あたかも存在しているかのように見えるボックスで、
主にデコレーションや補助的なレイアウトに使われます。

.element::after {
  content: "";
  display: block;
  /* ここにデザインを記述 */
}

content: ""; を忘れると表示されないので注意してください！

実践：斜めの線を描く基本コード

まずは、要素の中にシンプルな斜線を入れるサンプルを見てみましょう。

HTML

<div class="diagonal-line"></div>

CSS

.diagonal-line {
  position: relative;
  width: 200px;
  height: 200px;
  background: #f0f0f0;
  margin: 40px;
  border: 1px solid #ccc;
}

.diagonal-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px; /* 線の太さ */
  height: 100%;
  background-color: red;
  transform: rotate(45deg);
  transform-origin: top left;
}

このコードでは、.diagonal-line の中に、::after で作った縦長の線を斜めに回転させています。
これだけでシンプルな斜線の完成です！

角度や長さを自由に調整する方法

上記の例では、rotate(45deg) として斜め右上方向に線を伸ばしていますが、
任意の角度に変更することが可能です。

例：-30度に傾けて線の長さを変える

.diagonal-line::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 150px;
  height: 2px;
  background: blue;
  transform: rotate(-30deg);
  transform-origin: left center;
}

transform-origin は回転の基点。ここを調整することで、見せ方が大きく変わります。

デザイン応用例：ボックスに斜線を重ねる

次は、ボックスの角に斜めのラインを装飾として入れるテクニックです。
バナーやカードデザインでよく使われる方法です。

HTML

<div class="card">
  <p>おしゃれなカードデザイン</p>
</div>

CSS

.card {
  position: relative;
  width: 250px;
  height: 150px;
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 2px;
  background: #3498db;
  transform: rotate(45deg);
  transform-origin: top left;
}

このように、要素の角に斜線を入れるだけでもグッとスタイリッシュな印象になります。

よくある疑問Q&A

Q. ::before と ::after はどう使い分ければいい？

A. どちらを使っても構いませんが、「前に入れる装飾」なら ::before、「後に入れる装飾」なら
::after と考えるとわかりやすいです。装飾が重なる場合は順番も考慮してください。

Q. 線が表示されない原因は？

A. 以下のどれかを見直しましょう

  • content: "" を書いていない
  • position: absolute が未設定
  • 親要素に position: relative をつけていない
  • transform の角度が間違っている

Q. 角度をアニメーションさせることはできますか？

A. はい、可能です。以下のようにCSSアニメーションで回転させることができます。

@keyframes rotateLine {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(45deg); }
}

.diagonal-line::after {
  animation: rotateLine 1s ease-in-out forwards;
}

まとめ：CSSで斜めの線を簡単にデザインしよう！

斜めの線をデザインに取り入れることで、
ちょっとした変化でも見た目に大きなインパクトを与えることができます。

今回ご紹介したように、CSSの ::before や ::after 疑似要素を使えば、
HTMLをいじらなくてもデザインの幅を広げられます。

最後にワンポイント

  • transform + rotate() で斜線は作れる！
  • 疑似要素は軽量で柔軟！
  • 親要素に position: relative を忘れずに！

ぜひ、あなたのWebデザインにもCSS斜線テクニックを取り入れてみてくださいね！