CSSで文字列を半分だけ中央揃えにする方法

2024-04-02

JavaScript、HTML、CSS を使用して文字の半分に CSS を適用する方法

このチュートリアルでは、JavaScript、HTML、CSS を使用して、文字列の半分に CSS スタイルを適用する方法を解説します。

デモ

以下のデモでは、文字列 "Hello World!" の最初の半分に太字のスタイルを適用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字の半分に CSS を適用する</title>
  <style>
    .half-bold {
      display: inline-block;
      width: 50%;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>
    <span class="half-bold">Hello</span> World!
  </p>
</body>
</html>

このデモでは、以下のような方法で文字列の半分に太字のスタイルを適用しています。

span 要素を使用して、文字列 "Hello World!" を分割します。
最初の span 要素に half-bold クラスを割り当てます。
half-bold クラスには、display: inline-block と width: 50% の CSS プロパティを適用します。
font-weight: bold プロパティを使用して、最初の span 要素内の文字を太字にします。

文字列の半分に CSS を適用するには、他にもいくつかの方法があります。

CSS マスクを使用する

CSS マスクを使用して、文字列の特定の部分のみを表示することができます。

疑似要素を使用する

::before または ::after 疑似要素を使用して、文字列の前にまたは後に別の文字列を追加し、その文字列に異なる CSS スタイルを適用することができます。

JavaScript を使用する

JavaScript を使用して、文字列を分割し、それぞれの部分に異なる CSS スタイルを適用することができます。

JavaScript、HTML、CSS を使用して、文字列の半分に CSS スタイルを適用することは可能です。いくつかの方法があるので、状況に合わせて最適な方法を選択してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>文字の半分に CSS を適用する</title>
  <style>
    .half-bold {
      display: inline-block;
      width: 50%;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>Hello World!</h1>
  <p>
    <span class="half-bold">Hello</span> World!
  </p>
</body>
</html>

// JavaScript を使用して文字列の半分に CSS を適用する

const text = "Hello World!";

// 文字列を分割する
const firstHalf = text.substring(0, text.length / 2);
const secondHalf = text.substring(text.length / 2);

// 最初の半分に太字のスタイルを適用する
const boldElement = document.createElement("span");
boldElement.classList.add("half-bold");
boldElement.textContent = firstHalf;

// HTML に要素を追加する
document.body.appendChild(boldElement);

// 2 番目の半分を追加する
document.body.appendChild(document.createTextNode(secondHalf));

CSS

.half-bold {
  display: inline-block;
  width: 50%;
  font-weight: bold;
}

実行結果

このコードを実行すると、以下のようになります。

<h1>Hello World!</h1>
<p>
  <strong>Hello</strong> World!
</p>

この例では、JavaScript を使用して文字列を分割し、最初の半分に half-bold クラスを割り当てています。 half-bold クラスには、display: inline-block と width: 50% の CSS プロパティが適用されています。

文字列の半分に CSS を適用するその他の方法

CSS マスクを使用して、文字列の特定の部分のみを表示することができます。以下は、linear-gradient を使用して文字列の半分をマスクする例です。

<p>
  <span style="mask-image: linear-gradient(to right, transparent 50%, black 50%);">
    Hello World!
  </span>
</p>

この例では、文字列の最初の半分は透明で、最後の半分は黒になります。

<p>
  Hello World!
</p>

<style>
p::before {
  content: "Hello";
  font-weight: bold;
}
</style>

この例では、文字列 "Hello World!" の前に "Hello" という文字列が追加され、太字になります。

JavaScript を使用して、文字列を分割し、それぞれの部分に異なる CSS スタイルを適用することができます。以下は、JavaScript を使用して文字列の半分に太字のスタイルを適用する例です。

const text = "Hello World!";

// 文字列を分割する
const firstHalf = text.substring(0, text.length / 2);
const secondHalf = text.substring(text.length / 2);

// 最初の半分に太字のスタイルを適用する
const boldElement = document.createElement("span");
boldElement.textContent = firstHalf;
boldElement.style.fontWeight = "bold";

// HTML に要素を追加する
document.body.appendChild(boldElement);

// 2 番目の半分を追加する
document.body.appendChild(document.createTextNode(secondHalf));