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

CSSを使って画像の上にテキストブロックを配置する方法

Web制作では、画像の上にタイトルやキャプションなどのテキストを重ねて表示したい場面が多くあります。CSSのpositionプロパティを活用すれば、画像の任意の位置にテキストブロックを簡単に配置できます。

実装のポイント

仕組みはとてもシンプルです。画像を囲む親要素（コンテナ）に position: relative; を指定し、重ねたいテキストブロック側に position: absolute; を設定します。さらに bottom や right などのオフセットを調整することで、画像の右下や左上など、好きな位置に自由に配置できます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.imageContainer {
    display: inline-block;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}
.captionBlock {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgb(14, 0, 94);
    color: rgb(255, 255, 255);
    padding-left: 20px;
    padding-right: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Image Text Block Example</h1>
<div class="imageContainer">
<img src="https://i.picsum.photos/id/59/500/500.jpg" alt="Nature" style="width:100%;">
<div class="captionBlock">
<h3>Scenary</h3>
<h4>Fence on the ground</h4>
</div>
</div>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、画像の右下に濃い青色の背景を持つテキストブロックが重なって表示され、「Scenary」「Fence on the ground」という見出しが確認できます。

CSSを使って画像の上にテキストブロックを配置する方法

  1. CSSのtext-align＆text-justifyプロパティを使ってテキストを揃える方法

    CSSのtext-justifyプロパティは、要素に適用される均等割り付け（ジャスティフィケーション）の方式を指定するために使用します。一方、text-alignプロパティは、要素内のテキストの水平方向の配置（左寄せ・中央揃え・右寄せ・両端揃えなど）を設定します。 なお、text-justifyプロパティは、text-align: justify;が指定されている場合にのみ有効になります。 text-justifyプロパティの主な値 auto：ブラウザが自動的に適切な均等割り付け方法を選択します（初期値）。 none：均等割り付けを無効にします。 inter-word：単語と単語の間隔を調整

  2. C++とOpenCVを使って画像にテキストを描画する方法【putText関数の使い方】

    OpenCVでは、putText()関数を使うことで、画像の上にテキストを描画できます。この関数は<imgproc.hpp>ヘッダー内で定義されています。画像にテキストを描画するには、まず画像を読み込むための行列（Mat）を宣言する必要があります。本記事のサンプルでは、既存の画像ファイルを読み込む代わりに、白一色で塗りつぶした空の行列を作成し、その上にテキストを描画します。テキストを表示する際は、以下の要素を指定する必要があります。テキストの描画開始位置（座標）フォントの種類フォントの色フォントの太さ（線の太さ）putText()関数の基本構文putText(image, Text