• Home
  • Web制作
  • 【CSS】枠線の上に文字を重ねるテクニックを徹底解説！position: absolute を活用しよう

【CSS】枠線の上に文字を重ねるテクニックを徹底解説！position: absolute を活用しよう

schedule
Tags: CSS

枠線の上に文字を重ねる方法｜CSSのposition: absoluteでスタイリッシュな表現を！

Webサイトのデザインにおいて、少しの工夫が大きな違いを生むことがあります。例えば、枠線の上に文字を重ねるという表現も、CSSを効果的に利用することで、スタイリッシュで印象的なデザインを実現できます。

この記事では、CSSの position: absolute プロパティを活用し、枠線の上に文字を重ねるテクニックをわかりやすく解説いたします。基本的な使い方から応用例、そしてデザインの幅を広げるポイントまで、具体的なコード例を交えながらご紹介します。

あわせて読みたい
【CSS】position:absolute;を使いこなしてサイトを自由にデザインしよう！

1. position: absolute で要素を自由自在に配置する

CSSの position プロパティは、要素の配置を設定するために使用します。その中でも absolute は、要素を文書の流れから完全に切り離し、親要素を基準とした自由な位置に配置することを可能にします。

position: absolute を指定した要素は、 top, right, bottom, left の各プロパティを使って位置を調整します。これらのプロパティには、pxや%などの単位で数値を指定します。

.sample-box {
  position: relative; /* 子要素の基準にするため、相対配置にする */
  border: 1px solid #000;
  padding: 1em 0.5em 0.5em 0.5em;
  margin: 1em;
}

.sample-text {
  position: absolute;
  top: 0;
  left: 0;

  font-size: 1em;
  padding: 0 1em;
  margin: 0;
  transform: translateY(-50%) translateX(1em);
  background-color: white;
}

<div class="sample-box">
  <span class="sample-text">重ねる文字</span>
  <span>テキスト</span>
</div>
重ねる文字 テキスト

上記の例では、 box クラスを持つ要素を親要素とし、その中に text クラスを持つ要素を配置しています。text クラスには position: absolute を指定し、枠線上に配置しています。

ポイント

  • position: absolute を指定した要素は、文書の流れから外れるため、他の要素に影響を与えません。
  • 親要素に position: static (デフォルト値)以外の値が設定されていない場合、 position: absolute で指定した要素は、ブラウザウィンドウを基準とした位置に配置されます。

2. 枠線の上に文字を重ねるための具体的な手順

それでは、具体的に枠線の上に文字を重ねる方法を見ていきましょう。

  1. HTMLで要素を準備する

    まず、HTMLで枠線となる要素と、その上に重ねたい文字の要素を作成します。ここでは、 div 要素を例に挙げます。

    <div class="sample-box">
  <span class="sample-text">重ねる文字</span>
  <span>テキスト</span>
</div>

  2. CSSで枠線を設定する

    次に、CSSを使って枠線となる要素にスタイルを適用します。ここでは、 border プロパティを使って枠線を設定します。

    .sample-box {
  border: 1px solid #000;
  padding: 1em 0.5em 0.5em 0.5em;
}

  3. CSSで文字のスタイルと配置を設定する

    最後に、重ねる文字のスタイルと配置を設定します。 position: absolute を使い、枠線となる要素を基準に位置を調整します。

    .sample-text {
  position: absolute;
  top: 0;
  left: 0;   

  font-size: 1em;
  padding: 0 1em;
  margin: 0;
  transform: translateY(-50%) translateX(1em);
  background-color: white;
}

重要なポイント

  • transform: translateY(-50%) translateX(1em); は、要素を枠線に重ねるためのテクニックです。
  • 背景色を指定することで、文字の下だけ枠線が見えなくなります。
あわせて読みたい
CSSのtransformを使いこなす！要素を自由自在に操る方法を徹底解説！

3. 応用：枠線の特定の場所に文字を配置する

枠線の上に文字を重ねるだけでなく、特定の場所に配置したい場合は、 top, right, bottom, left の値を調整します。

例えば、枠線の中央に文字を配置する場合は、以下のように設定します。

.sample2-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  /* ... その他のスタイル */
}
重ねる文字 テキスト

まとめ｜position: absolute を活用してデザインの可能性を広げよう

この記事では、CSSの position: absolute プロパティを使って枠線の上に文字を重ねる方法を解説しました。

position: absolute は、要素を自由に配置できるため、今回ご紹介したテクニック以外にも、様々な表現に活用できます。ぜひ、色々なパターンを試して、Webデザインの表現力を高めてみてください。

関連記事