【CSS】デザインが寂しい時に使える、ちょっとした「あしらい」〜斜線〜

はじめに
- この記事の概要
- 対象読者
斜線を使う
おわりに

はじめに

この記事の概要

みなさん、こんにちは！
サイトのデザインをしたり、コーディングをしたりする際に、
「なんかデザインが寂しいなぁ」と思う時はありませんか？

ただ、大きくデザインを変更するのは大変だと思うので、
そんな時に使える斜線の「あしらい」をいくつかご紹介したいと思います！

コーディングも手軽にできるものだと思うので、
ぜひ参考にしていただけると嬉しいです！

対象読者

css初学者の方
デザインの引き出しを増やしたい方

斜線を使う

テキストを斜線で囲む

テキストを強調したい場合や、見出しを作成する際、
フォント自体を太く大きくしたり、色を変えたり、下線をつけたりが多いと思います。

こういった時に斜線を使うことで強調することも可能です。

参考のコードをお示しします。

<div class="container">
  <p class="small-text">Ashirai</p>
  <p class="nomal-text">テキストを</p>
  <p class="nomal-text">斜線で囲む</p>
</div>

.container {
  position: relative;
  text-align: center;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  width: 50%; /* テキストの幅に合わせて調整 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
  top: 0;
}

.container::before {
  left: 0;
  transform: translateY(-50%) rotate(45deg); /* 左上の斜線 */
}

.container::after {
  right: 0;
  transform: translateY(50%) rotate(-45deg); /* 右下の斜線 */
}

.nomal-text {
  font-size: 24px;
}

.small-text {
  font-size: 16px;
}

斜線の長さや角度によって印象がかなり変わるので、
デザインのテイストやご自身の好みで調整してください。
斜線の位置は個人的に離れすぎないほうが良いかと思います。

「」に斜線を追加する

見出しで「」を使うことも多いかと思いますが、
この際に、「」に斜線を追加することで、違った印象を持たせることもできます。

<div class="container">
  <div class="left-quote">「</div>
  <div class="text">テキストです</div>
  <div class="right-quote">」</div>
  <div class="slash left-slash"></div>
  <div class="slash right-slash"></div>
</div>

.container {
  display: inline-block;
  position: relative;
  font-size: 16px; /* テキストのフォントサイズに合わせる */
}

.left-quote, .right-quote {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #000; /* 引用符の色 */
}

.left-quote {
  left: 0;
}

.right-quote {
  right: 0;
}

.text {
  display: inline-block;
  padding: 0 10px; /* テキストと引用符の間隔 */
}

.slash {
  position: absolute;
  top: 50%;
  width: calc(50% - 5px); /* 「」の幅の半分から5px引いた値 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
}

.left-slash {
  left: 0;
  transform-origin: right;
  transform: translateY(-50%) rotate(-45deg); /* 左側の斜線 */
}

.right-slash {
  right: 0;
  transform-origin: left;
  transform: translateY(-50%) rotate(45deg); /* 右側の斜線 */
}

「」に斜線を追加する場合のポイントですが、
「」の太さの半分、長さは1.5倍くらいで作成することで良い感じになるかと思います。
また、斜線の位置は「の線と線の繋ぎ目から離れすぎにように注意してください。

区切りとして斜線をつける

数行にわたるテキストやセクションごとの区切りとして、
斜線をつけることでデザインが単調にならずに済みます。

<section class="section-divider">
  <div class="section-content">
    <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>
　　 <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>
    <p>ここに数行のテキストや画像などのコンテンツが入ります。</p>
  </div>
</section>

<section>

  <div class="section-content">
    <p>次のセクションの内容がここに入ります。</p>
  </div>
</section>

.section-divider {
  position: relative;
  margin: 50px 0; /* セクション間の余白 */
}

.section-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
  transform-origin: left;
  transform: rotate(-2deg); /* 斜線の角度 */
}

.section-content {
  padding: 20px; /* セクション内の余白 */
}

個人的には、あまり長すぎると不自然に感じるので、短めのほうが良いかと思います。

テキストを斜線で貫く

こちらは四角の中にいれたテキストを斜線で貫くことで、デザイン性を持たせます。

<div class="container">
  <div class="text">斜線で貫く</div>
  <div class="line-top"></div>
  <div class="line-bottom"></div>
</div>

.container {
  position: relative;
  width: 200px; /* 四角形の幅 */
  height: 200px; /* 四角形の高さ */
  margin: 50px auto; /* 中央配置 */
  border: 2px solid #000; /* 四角形の枠線 */
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.line-top, .line-bottom {
  position: absolute;
  width: 100%; /* 四角形の幅 */
  height: 1px; /* 斜線の太さ */
  background-color: #000; /* 斜線の色 */
}

.line-top {
  top: 0;
  transform-origin: left;
  transform: rotate(-45deg);
}

.line-bottom {
  bottom: 0;
  transform-origin: right;
  transform: rotate(45deg);
}

こちらのポイントですが、
斜線の太さは、四角の線の太さよりも細いほうが良いかと思います。
テキストも太いほうが斜線のさりげなさが演出されます。

STEPで斜線を使う

使用上の流れや特徴を示す際に、STEP表記をすることも多いかと思います。
その際に、ただ「STEP 01」とするよりも斜線を使うことでデザイン性を高めます。

<div class="container">
  <div class="step">STEP</div>
  <div class="line"></div>
  <div class="number">01</div>
  <p>ここにSTEP 01のコンテンツを追加します。</p>
</div>

.container {
  position: relative;
  width: 200px; /* コンテナの幅 */
  height: 200px; /* コンテナの高さ */
  border: 2px solid #000; /* 枠線の色 */
  text-align: center; /* テキストを中央に配置 */
}

.step {
  font-size: 10px; /* STEPのフォントサイズ */
}

.number {
  font-size: 40px; /* 数字のフォントサイズ */
}

.line {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* 斜線の幅 */
  height: 2px; /* 斜線の高さ */
  background-color: #000; /* 斜線の色 */
  transform-origin: 0% 0%;
  transform: rotate(-45deg); /* 斜線を45度回転させる */
}

こちらは、STEPのフォントサイズを数字の1/4くらいにすることをお勧めします。