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

CSSを使って画像の左下にテキストを配置する方法

CSSを使って画像の左下にテキストを配置する方法

画像の上にテキストを重ねて表示したいケースは、Web制作でよくあります。テキストを画像の左下に配置するには、CSSの bottom プロパティと left プロパティを組み合わせて使用します。

基本的な仕組み

ポイントは次の2つです。

  • 親要素に position: relative; を指定し、位置調整の基準を作る。
  • テキスト要素に position: absolute; を指定し、bottom と left で左下の位置を決める。

また、img に対して width: 100% と height: auto を設定すると、画面幅に合わせて画像が伸縮するレスポンシブ対応になります。opacity を使って画像を少し透過させると、テキストが読み取りやすくなります。

コード例

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

<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        position: relative;
      }
      img {
        width: 100%;
        height: auto;
        opacity: 0.6;
      }
      .direction {
        position: absolute;
        bottom: 10px;
        left: 19px;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <h1>見出し</h1>
    <p>下の画像は左下にテキストが配置されています:</p>
    <div class = "box">
      <img src = "https://www.tutorialspoint.com/python/images/python_data_science.jpg" alt="チュートリアル" width="800" height="400">
      <div class = "direction">左下のコーナー</div>
    </div>
  </body>
</html>

実装のポイント

  • bottom: 10px; ... テキストを画像の下端から10px上に配置します。数値を大きくすると、より内側に移動します。
  • left: 19px; ... テキストを画像の左端から19px右に配置します。
  • font-size: 13px; ... テキストサイズを小さめにすることで、画像を邪魔しないキャプションのような表示になります。

この手法を応用すれば、top や right プロパティを使って右上・中央など、好きな位置に自由にテキストを配置できるようになります。

  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 {