jqueryを使ったフローティングメニューの作り方【簡易版】

-
カテゴリー:
javascript 

先日時間がない中で、「ワァーーーッ」ってなりながら使ったフローティングメニューのコードなんですが、忘れないようにメモ残しときます。

 

HTMLやCSSはサンプルで、実際のお仕事で使ったコードではないのですが、
以下、CSS

以下、HTML

で、jqueryが読み込まれていることが前提なのですが、以下javascriptのコードです。

 

上記の記述で、#sideがスクロールに合わせて移動します。

var limit_posはフッターなどの崩れ防止用です。

こちらがサンプルページ

 

 

商品画像を上下中央寄せにした時のCSSテクニック

-
カテゴリー:
CSS 

商品一覧ページなどで、商品のサムネイル画像が一定のサイズじゃない場合に、上下左右中央寄せするCSSテクニックのご紹介です。
※縦横のサイズに上限あり。

divで構成している場合、左右の中央寄せは簡易的にできるんですが、上下中央寄せはひと工夫必要になります。
tableで回避するなんてこともできるんですが、相当不細工なHTMLになるため、できればdiv構成にしたいそんな時は以下の手法を使います。

まず、HTML(クラス名は適当です)

 

続いて、CSS

左右中央寄せであれば、少ないコードの記述で対応できるのですが、上下の中央寄せが加わるとけっこうコードが面倒になるんですよね(汗

PS3がほしい・・・

-
カテゴリー:
雑記 

PS3がほしい・・・いや、Wii Uでもいい!
と、なんでこんなことを言っているかと言うと、あるサイトのアクセス解析で、

image

個人的に運用してるサイトなんですが、PS3からのアクセスが4番目に多かった。
意外と無視できないレベルなんじゃなかろか。

で、ちょっと気になったんで、ザッと調べてみたらどうもPS3は独自ブラウザを搭載してるっぽい。
・・・・ウチのサイトは大丈夫なのだろうか?

ちなみにWii Uは、搭載してるブラウザはNetFront Browser NX(webkit)らしい。

実際、コーディングガイドライン持ち込みの依頼の中には、対応デバイスにPS3やWii Uを含めてるWeb制作会社様も多かったりするんですよね。
「こ、これ、PS3にも対応するんですか?」と、聞くと、「ん~~~~~~~、なかったらいいです」って、返事が返ってくる事がほとんどなんですが、やっぱり気になる。

デバイスの多様化にどこまで対応するのか?といった所なのかもしれないんですが、ゲーム機からのアクセス増えることはあっても、減ることは無いような気がする(勘)
ここは思い切って、PS3、もしくはWii Uで実機検証できるような体制を作っておくべきではなかろうか。

こういう場合、ゲーム機って経費で落ちるんだろうか。。。。