〒604-8086 京都市中京区御幸町通り三条上がる丸屋町338プランタンハヤシビル3F
(御幸町姉小路南西角ビル3F)

  • ONLINE SHOP

POGO KV用

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

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


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


方法:BOXをウインドウ半分右の位置にまず動かし、BOX幅(実際は画像幅)の半分左に戻す方法
このページの場合、
・KVのBOX(#wide)に下記設定、
 left:50%;
 margin-left:-675px; ←BOX幅(実際は画像幅)1350pxの半分
・bodyに「overflow-x: hidden」(横スクロールバーを出さない)
・「POGO」はKVのBOX(#wide)にwidth設定必要
 (「POGO」は、画像サイズが親のBOXに合わせ自動拡大・縮小されるため)



(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(画像)を中央表示させるため、ネガティブマージン調整等(上記A)を再度し中央表示
・ウィンドウ縮小時にのみ、横スクロールバーを出す

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



「POGO」のみの設定
※POGOは、画像サイズが親のBOXに合わせ自動拡大・縮小され、KVのボックスの高さが変化するため、デザインによっては調整必要アリ


調整方法

1)KVの上に重ねるレイヤーは、「absolute」で位置調整
このページの場合、
・「.header_contents」のBOXを「absolute」で重ねている

2)どうしてもかぶってしまうレイヤーを下にずらす
このページの場合、ウィンドウ縮小時に、ナビメニュー「.mainMenu」がKVの文字とかぶってしまうため、
・@media (max-width: 1024px)とし、その中に、
 ナビメニュー「.mainMenu」の位置をKV下に移動(ウィンドウ縮小時にのみ適用)
※この調整をしない表示がどうなるか(メニューがかぶる)は、「POGO」未調整バージョンデモ参照
・デザイン次第で必要アリ・ナシ



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


z-indexとposition:absolute;をSET使用。



exsample