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

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

画像の左上にテキストを配置するには、CSSの top プロパティと left プロパティを使用します。親要素に position: relative; を指定し、テキスト側に position: absolute; を設定することで、画像上の任意の位置にテキストを自由に重ねて表示できます。

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

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         .box {
            position: relative;
         }
         img {
            width: 100%;
            height: auto;
            opacity: 0.6;
         }
         .direction {
            position: absolute;
            top: 10px;
            left: 19px;
            font-size: 13px;
         }
      </style>
   </head>
   <body>
      <h1>見出し1</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>

ポイント解説

  • position: relative; … 親要素(.box)に指定することで、子要素を絶対配置する際の基準点になります。
  • position: absolute; … テキスト要素(.direction)を画像に対して絶対的に配置します。
  • top / left … 画像の左上からの距離を指定します。数値を変更すれば、右上や中央など好きな位置へ調整できます。
  • opacity … 画像を半透明(0.6)にすることで、重ねたテキストが読みやすくなります。

この手法は、バナー画像へのキャプション表示や、写真の上にラベルを重ねるデザインなど、さまざまな場面で活用できます。

  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 {