画像の上のテキスト

Question

こちらのサイトで

このような写真があると思うのですが、写真の上に乗っている

緑の枠のテキストはどのようにしてあるのでしょうか

divタグの中に画像と緑の枠のテキストが入っていると思うのですが、どうやってやればいいのかわかりません。

Answer 1

前の質問を含めていいますが、まずCSSというものの基礎をやったほうがいいと思います。いろんな面から見れるようになるので、結果理解が深まり今回のことも質問なしで出来るようになりますよ。今回の件だけやっても基礎がないと使いこなせずまた質問になります。聞くほうも答えるほうも一個一個やってたら大変ですよ。

軽く探したらこんなものが
position:relativeとposition:absoluteで画像や文字を重ねてみよう

Comments

[ryo-dev]

CSSの存在を知っています。どんなことができのかもある程度知っています。参考書も読んでいます。
画像の上にテキストを表示する方法が紹介されていいなくて、検索でも限界を感じたので質問させてもらいました。

Answer 2

そもそも、Webページの見ばえ（デザイン要素）は、
「CSS」というスタイルシート（言語）で設定するのが原則です。
別にJavaScriptでもできますが、静的な表示はCSSが担当するのが基本です。

そして、ご質問の例のように、
画像を重ねる際は、上下左右の二次元の座標と、
「z-index」で奥行き方向の座標を設定します。

z-indexは書き方によって省略できますが、
画像を重ねる際には知識として知っていた方が潰しが利きます。

Comments

[ryo-dev]

CSSと言う存在もデザインはCSSで行うのが原則ということも知っています。
実際にCSSでも書いています。

純粋に画像の上にテキストをどう被せるかを質問したかっただけなのです。
「z-index」の存在を知れたのが今回大きかったです。
ありがとうございました。

Answer 3

やり方はいろいろあると思いますが、参考にしているサイトのような実現の仕方だとシンプルに以下のようなことを行っていると思います。

<div class="box"> <!-- 基準の箱 -->
  <img src="/img/hoge.jpg" width="100" height="100" alt="hoge">
  <p class="text">テキスト</p> <!-- 位置を固定する文字 -->
</div>

.box {
  position: relative; /* 子要素の位置の基準になる */
}
.text {
  position: absolute; /* 親要素のrelativeに対して位置を固定する */
  top: 0;
  left: 0;
  color: #fff;
  background: #000;
  z-index: 1; /* 重なり順を決める */
}

上記は position プロパティを使った親(.box)と子(.text)の位置固定をしています。

参考：position …… ボックスの配置方法（基準位置）を指定する

これで .text は親要素である .box に任意の位置固定されます。
(上記の場合、 top:0; と left:0; を指定してるので、上端と左端に固定されます)

何も position で位置を指定されていない img はそのまま .box の中に収まっているので、
.text と img は重なることになります。

そして、 position プロパティを当てられている要素には重なり順を指定できる z-index プロパティを当てることができます。

参考：z-index …… 重なりの順序を指定する

なので、 .text に z-index を指定してあげれば上に重ねることができると思います。

Comments

[ryo-dev]

詳しい回答ありがとうございました。
一番やりたいことに近く、分かりやすかったので、ベストアンサーに選ばさせてもらいました。

[5o5o_wagon]

もっとわかりやすくまとめられたかなと思いますが、参考になったみたいでよかったです！

[ryo-dev]

非常に助かりました。ありがとうございました。

Answer 4

divの範囲内に

.entry-category {
	position: absolute;
	top: 0;
	left: 0;
	color: #fff;
	font-size: 12px;
	padding: 5px 10px;
}

positon:absolute;
top:0;
left:0;
としてdivの左上に出るようにしている
開発ツールはfirefoxになるがstyleを見たいhtmlにマウスを持っていきstyleの左側チェックボックスを外すことでstyleを消すことができる

Comments

[ryo-dev]

.entry-categoryがdivのIDですか？

[date]

いいえspanのclassです

Answer 5

インスペクタでその要素をご覧になって、その要素に適用されている CSS のルールをご覧になってはいかがでしょうか。推測ですが、.entry-eyecatch に対するルールで実現されているのではないでしょうか。

インスペクタの使い方はこちらをご参照ください：https://developer.mozilla.org/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS

Comments

[ryo-dev]

検索ソフトに付いている開発者用ツールを使って見たのですが、わからなかったので質問しました。３つ目の画像が画像とテキストの部分のソースなんですが、CSSが見当たりませんでした。

Answer 6

gracias . yo igual he comprendido . buena explicacion