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

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

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

画像の右上にテキストを重ねて表示したい場合、CSSの position プロパティと top・right プロパティを組み合わせることで簡単に実現できます。この記事では、具体的な実装例とともにその仕組みをわかりやすく解説します。

基本の考え方

テキストを画像の任意の位置に配置する際のポイントは、次の2つです。

  • 画像を囲む親要素(コンテナ)に position: relative; を指定する
  • 配置したいテキスト要素に position: absolute; を指定し、top と right で細かく位置を調整する

親要素を基準点として設定しておくことで、absolute(絶対配置)されたテキストは、その親要素の右上を基準に正確な位置へ配置されます。

実装例

以下のコードでは、画像の右上隅に「右上コーナー」というテキストを重ねて表示しています。実際にブラウザで実行して挙動を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .box {
            position: relative;
         }
         img {
            width: 100%;
            height: auto;
            opacity: 0.6;
         }
         .direction {
            position: absolute;
            top: 10px;
            right: 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>

コードの解説

  • .box：position: relative; を設定し、絶対配置の基準となるコンテナを作成します。
  • img：横幅を100%にしてレスポンシブ対応とし、高さは自動調整。また、opacity: 0.6; で画像を半透明にすることで、重ねたテキストが読み取りやすくなります。
  • .direction：position: absolute; で絶対配置に切り替え、top: 10px;・right: 19px; の指定により、親要素の上端から10px、右端から19pxの位置にテキストを配置しています。

応用のヒント

この手法は、画像にキャプションやラベル、バッジなどを重ねて表示したい場面で幅広く活用できます。top や right の値を変更すれば位置は自由に調整でき、bottom や left を使えば左下など他のコーナーにも同じ要領で配置できます。ぜひさまざまな値を試して、理想のレイアウトを実現してください。

  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 {