画像を重ね合わせて表示するインラインスタイルシートの記述方法.png
画像を重ね合わせて表示させる、
インラインスタイルシートのテクニック!


このテクニックを使うと、絵や写真などの上にバッジのようなアイコン画像を重ねて表示することができます。
 

画像重ね合わせ表示イメージ


↓実際に使用したサイトです。
画像重ね合わせサンプル.jpg

>>from scope apartment / house towel ~「imabari towel」メイド イン ジャパンの心地よさ~


HTMLコード


<div style="position: relative;">
<img src="image-A.jpg" width="630" height="1200" alt="画像-A">
<div style="position: absolute; top: 200px; left: 30px;">
<img src="image-B.jpg" width="200" height="200" alt="画像-B">
</div>
</div>



  • positionプロパティ

「position」プロパティは、特定の要素を本来の表示位置から切り離し、自由な位置に表示することができる。

他の要素の表示には影響せず、画像の上に重なるような配置にすることもできる。

このpositionプロパティに「relative」を指定すると、本来表示される位置から相対的に指定距離だけ移動した位置に表示される。「absolute」を指定すると、positionプロパティが指定されている最も近いボックスから、指定距離だけ移動した位置に表示される。


  • top・bottom・left・rightプロパティ

「top・bottom・left・right」プロパティは、「どこに表示するのか?」を指定するためのもので、「top・bottom・left・right」のうち2つを使って指定する。

例えば、
・左上からの位置を指定したい場合:「top」と「left」
・右上からの位置を指定したい場合:「top」と「right」
・上から 15ピクセル、左から240ピクセルの位置を指定したい場合、
top: 15px; left: 240px;
と記述する。

冒頭の重ね合わせ表示イメージの例では、
・画像-Aは、外側のdiv要素のpositionプロパティに
position: relative;
と指定しており、距離指定がないため本来表示される位置へそのまま表示されます。

・画像-Bは、内側のdiv要素のpositionプロパティに
position: absolute; top: 200px; left: 30px;
と指定しているので、positionプロパティが指定された最も近いボックス(外側のdiv要素にある、画像-Aです)の左上から下へ200ピクセル、右へ30ピクセルづつ移動した場所に表示されます。

↓参考にさせていただいたサイトです。
>>画像上の自由な位置に文字を重ねる方法 [ホームページ作成] All About


あとがき


CSSを使ったレイアウトデザインをやってみましたが、思い通りに表示されると嬉しいものです。
さらにいろいろなCSSにチャレンジしてみたいと思います。

関連記事
>> インラインCSS記述で画像を回転表示させる方法

>> ブログの記事投稿画面から指定できる!コンテンツをセンタリングするインラインスタイルシートの記述方法


最後までお読みいただきましてありがとうございます。
にほんブログ村 IT技術ブログへ


スポンサード・リンク