• イメージ
  • イメージ
  • イメージ
  • イメージ
  • イメージ
  • イメージ
  • イメージ
  • イメージ

> ENGLISH

観賞用レッドビーシュリンプのオンラインショップ

  • ONLINE SHOP

SKITTER KV用

(A)KV画像を常に中央表示

※CSSの(A)参照 ※「POGO」とほとんど同じ


目的:BOX(画像)を常に真ん中に表示(ウィンドウ幅が縮小されても常に、BOX中央が画面中央を取る)


方法:BOXをウインドウ半分右の位置にまず動かし、BOX幅(実際は画像幅)の半分左に戻す表示方法
このページの場合、
・KVのBOX(#wide)に下記設定、
 left:50%;
 margin-left:-675px; ←BOX幅(実際は画像幅)1350pxの半分
・bodyに「overflow-x: hidden」(横スクロールバーを出さない)
・「SKITTER」はKVのBOX(#wide)にwidth設定不要(画像切り出しの際、画像幅=実表示幅にすること)



(B)ウインドウ縮小時の「頭でっかちKV対応」KV左右削り(コンテンツ幅で表示)

※CSSの(B)参照


目的:ウィンドウ幅を縮めた際(PC・スマホ共)KVのBOXをコンテンツ幅(左右削って中央表示)にする


方法:ウィンドウサイズが1024px以下の際、KVのBOX幅を強制的にコンテンツ幅に変更する
(PCでもスマホでも、どちらでも適用される)
このページの場合、
・コンテンツに幅設定(#wrapperにwidth:950px)
・@media (max-width: 1024px)とし、その中に、
 KVのBOX(#wide)にwidth設定(950px)
 BOX(画像)を中央表示させるため、KVのBOX(#wide)と画像("#slider")に、ネガティブマージン調整等(上記A)をし中央表示
・ウィンドウ縮小時にのみ、横スクロールバーを出す

※基本的に、htmlでviewport設定はしない
 → ただし、スマホ表示時の左右にできる隙間を取りたい場合は、htmlでviewport設定(コンテンツ幅)
 meta name="viewport" content="width=950"



(C)KVのレイヤーの上に、別レイヤー前面表示


z-indexとposition:relative;をSET使用。例として、「relative」で設置。(「absolute」でも)



(D)スプライト画像でロールオーバー

※CSSの(D)参照


ナビメニュー部分をスプライト画像使用



exsample