CSS

CSS★画像の上に文字を重ねる

投稿日:

画像の上に文字を重ねる

配置した画像の上に文字を重ねたいとき、CSSだけでできちゃいます!

下になるアイテムに「position: relative;」= 相対位置を設定します。
次に上に重ねるアイテムに「position: absolute:」= 絶対位置を設定。

この親子コンビネーションをつくるところがミソ。

それができれば、後は、表示させる位置を指定します。
アイテムの左上端を原点として、上か下、左か右への移動距離を指定してやります。
単位は、px, %, em, rem等が使えます。

HTMLコード サンプル:

<div class=”sita”>
<img src=”/image.jpg”>
<p class=”ue”>上に重ねるアイテム</p>
</div>

 

CSSサンプル:

.sita { /*親div*/
  position: relative; /*相対配置*/
  width: 500px;
  height: 300px;
}

.sita img {
  width: 100%;
}

.ue{
  position: absolute; /*絶対配置*/
  top: 30%;
  left: 20%;
}

囲んだ要素の高さがなくなる!

子要素がabsoluteの時には、親要素の高さが死んでしまうので、親要素に「height」を指定して、高さを保ちます。

可変サイズで使う場合にも、囲んだdivなどにposition:absoluteを当てると画像の伸縮がうまくいかなくなる。
これは高さを指定しないから起こるのだけれど、高さを指定するなら可変にならないじゃん!
こまったなぁ。。。と思っていたら、解決策をみつけました。

divに:beforeでpaddingを与えることで
擬似的に高さを与えています。

padding-topの値を変えることで比率を変えることもできます。

.innerwidthheightは100%に指定することでratio-1_1の高さを拾います。

 

参照:https://qiita.com/nknkt/items/065b30bbdc1f6508a6f7

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。





-CSS

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

CSSでテーブルの背景色を交互に変える方法

今さらですが… CSSだけで表の背景色を交互に変える方法の覚え書き。 ※IE8以下のブラウザには対応していません。 でも、マイクロソフトはIE8のサポートを終了したので、これからはどんどん使えそうです …

CSS★h1やh2に特定のクラスを付ける

サイトを構築していて、特定のh2だけにクラスを指定して、見た目を変えたいときにどのように設定すればいいのか、わからなかったので調べてみた。 誤: .article h2 .title 正: .arti …

CSS★画像を右寄せにする

このページのもくじ 画像を右寄せにする方法右寄せにする手順 画像を右寄せにする方法 デフォルトは左寄せになっています。   右寄せにする手順 (1)画像をブロック要素として囲む。    ブロ …

CSS★奇数・偶数・n番目の要素を指定するセレクタ

リストの表示で、奇数の li 要素にだけ効くCSS設定をしたかったので、調べてみた。 奇数番目の要素にスタイルを適用する

参照サイト: …

CSS★全ての要素にBorder-boxを適用する

仕上がりイメージからレイアウトをコーディングするとき、マージンやボーダーなど横幅の計算がややこしくて手こずっていました(涙) そんな悩みを解消してくれるありがた〜いセレクタ「box-sising」! …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。