CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用して画像の中央にテキストを配置する方法

CSSで画像の中央にテキストを配置する方法

画像の上にテキストを重ねて中央に配置したい場合、CSSのtransformプロパティとpositionプロパティを組み合わせるのが最もシンプルで確実な方法です。親要素を基準に絶対配置したテキストを、translate()で自分自身の半分のサイズ分だけずらすことで、画面サイズに関係なく正確な中央揃えを実現できます。

ポイントとなるCSSの仕組み

  • position: relative; … 親要素（コンテナ）に指定し、テキストの配置基準を作ります。
  • position: absolute; … テキスト要素を親要素基準の絶対配置にします。
  • left: 50%; top: 50%; … テキストの左上隅を親要素の中央位置へ移動させます。
  • transform: translate(-50%, -50%); … テキスト自身の幅・高さの半分だけ位置を戻すことで、見た目上も完全な中央に揃えます。

コード例

以下のコードを実行すると、画像の中央にテキストが重ねて表示されます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
      }
      .center-text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 18px;
      }
      img {
        width: 100%;
        height: auto;
        opacity: 0.3;
      }
    </style>
  </head>
  <body>
    <h2>画像上のテキスト</h2>
    <p>画像の中央にテキストを配置します：</p>
    <div class="container">
      <img src="trolltunga.jpg" alt="ノルウェー" width="1000" height="300">
      <div class="center-text">Center</div>
    </div>
  </body>
</html>

コードの解説

この例では、.containerクラスの親要素の中に画像とテキストを配置しています。.center-textクラスを適用したテキストは、left: 50%とtop: 50%によって親要素の中央に移動し、さらにtransform: translate(-50%, -50%)によってテキスト自身のサイズ分だけ調整されるため、画像の正確な中心に表示されます。

また、画像にはwidth: 100%; height: auto;を指定してレスポンシブ対応にし、opacity: 0.3;で半透明にすることで、重ねたテキストが読みやすくなっています。背景画像の上にバナーテキストやキャプションを載せたい場合など、さまざまな場面で応用できるテクニックです。

  1. CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説

    テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange

  2. CSSで光るテキスト（グロー効果）を作成する方法

    CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {