CSSで画像の右下にテキストを配置する方法
画像の右下にテキストを配置するには、CSSの bottom プロパティと right プロパティを使用します。ポイントは、画像とテキストを囲む親要素に position: relative; を設定し、テキスト側に position: absolute; を指定することです。これにより、画像上の任意の位置にテキストを自由に重ねて表示できます。
実装の手順
- 画像とテキストをまとめるコンテナ（div）を作成し、
position: relative;を指定します。 - テキスト用の要素に
position: absolute;を設定します。 bottomとrightの値を調整して、右下の表示位置を決めます。
コード例
以下のコードを実行すると、画像の右下にテキストが配置された状態を確認できます。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: relative;
}
img {
width: 100%;
height: auto;
opacity: 0.6;
}
.direction {
position: absolute;
bottom: 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 要素：
width: 100%;とheight: auto;でレスポンシブ対応しつつ、opacity: 0.6;で画像を半透明にしてテキストを読みやすくしています。 - .direction クラス：
position: absolute;に加え、bottom: 10px;とright: 19px;を指定することで、画像の右下からそれぞれ10px・19px内側の位置にテキストが配置されます。
なお、左下に配置したい場合は left プロパティに、右上に配置したい場合は top プロパティに置き換えるだけで、同じ仕組みで任意の角にテキストを配置できます。
-
CSSでテキストボタンのスタイルを設定する方法をわかりやすく解説
テキストボタンとは、背景色を持たずに文字色だけで視覚的な印象を与えるボタンのスタイルです。Google マテリアルデザインなどでも採用されている洗練されたデザインで、CSSを使えば簡単に実装できます。テキストボタンのスタイリングのポイントテキストボタンを作る基本は、border: none; でボタンの枠線とデフォルトの背景を消し、color プロパティで文字色を指定することです。さらに :hover 疑似クラスを組み合わせると、マウスオーバー時に薄いグレーの背景を表示でき、クリックできる要素であることが直感的に伝わります。以下のコードでは、Success・Info・Warning・Dange
-
CSSで光るテキスト（グロー効果）を作成する方法
CSSで光るテキスト（グロー効果）を作成するには、text-shadowプロパティと@keyframesによるアニメーションを組み合わせます。複数の影を重ねて光の輪を表現し、それをアニメーションで明滅させることで、文字が脈動するように輝く演出が可能です。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {