2015年04月24日

ガンコンMSスキル検索&オークション機能についてのお知らせ

ご好評を頂いております「ガンコンMSスキル検索」と「オークション価格推移表」についてですが、私が多忙であることなどからガンコンを引退することにしました。
つきましては、このプログラム等を引き継いでくださる方を募集します。

できれば、MySQL&PHP環境をお持ちでWebの知識があるかたで、データ一式を引き継いでいただくのが望ましいですが、誰も候補者がいない場合、更新だけやるよって奇特なかたでもいいです。
引き継ぎの形式はご相談に応じます。
複数応募がある場合は、こちらの条件にあったかたで一番早い方に決めさせていただきます。
長らく楽しませてもらったガンコンを他の方にも楽しんでもらえたらなぁと思います。
ご希望の方は、コメントに書き込みをお願い致します。
posted by BigMoonEz at 12:02 | Comment(4) | TrackBack(0) | ゲーム | このブログの読者になる | 更新情報をチェックする

2015年04月23日

固定ヘッダでposition:fixedとabsoluteでabsoluteが上にきちゃって困った・・・の対応策

たぶん、固定ヘッダにしてみたけど、中のabsoluteに指定しているパーツが固定ヘッダの上にきてしまって、思った通りの動作にならない。。。納期も足りないのにWebに解決策が載ってない!困った〜・・・
と、いう感じでこのページをご覧になってませんか?
あ、違いますか。すいません。
昨日の私がそんな感じでしたので。。。

固定ヘッダの設定は最後にして、とりあえずお客さんに全体を見てもらわなければ!
と思ってコーディングしたのに、最後に設定した固定ヘッダがトラブルの原因で納期ピーンチ!になりました。

固定ヘッダとは?
固定ヘッダは、最近流行りのスクロールしても上下にいつも同じメニューが表示されているもので、CSSの設定としては
position:fixed;
で該当エリアを設定します。
これは、jQueryで設定する場合でも、何ピクセル下ったら該当エリアをposition:fixed;にするというスクリプトを書いているので、CSS的には結局同じなんですよね。

固定ヘッダの問題点
固定ヘッダにはいろいろ問題があります。
今まで引っかかったのとしては、
・アンカー指定時に、固定ヘッダ分位置がずれてしまう。
・Youtube動画を貼り付けるとヘッダの上にきてしまう。
などなど。
アンカー指定時に固定ヘッダ分ずれてしまう問題は、JSで解決すると外部リンクからの参照時に動作しないという問題もあります。
まぁそれぞれ他のサイトで言及されていますので、ここでは別の問題
・absoluteで指定したパーツがヘッダの上にきてしまう
を取り上げたいと思います。

問題点
position:absoluteで指定したものがfixedの上にくるというだけで、「固定ヘッダの問題」というわけではありませんのでお間違えなく。
z-index指定してもダメ〜
このあたりはCSSの問題で、解説されているサイトもいくつかあります。
<参考>
要素の重なりについて本気出して考えてみた(z-indexとか何とかとか)

ですが、今知りたいのは、目の前の!納期が迫った今!あんまり手直ししなくても固定ヘッダの下にabsoluteがくる方法!を知りたいんですよね!
私も知りたいです(え
いや、正直万能の解決策はないようです。(あったら教えてください!)

解決案!
いくつかサイトを巡って、正直私もあまりpositionと親要素子要素とz-indexをきちんと理解したわけではないのですが、私なりの結論としては

(1) fixedとabsoluteの親要素、子要素の関係を見直し、それぞれ適切なpositionを指定する
(上部リンクのサイトなどを参考にしてください)
ちなみに、下に潜り込む要素全体のz-indexを-1に指定するとちゃんと潜り込むと思います。ただし、下の要素のリンクも効かなくなるという落とし穴。
ただ・・・固定ヘッダをイメージすると、どうしてもヘッダ部分と記事部分は良くて同層、間違っても固定ヘッダを親要素にはできないですよね。。。

(2) absoluteに指定しているパーツを他のpositionやdisplayに指定し直す
私はこれで納期を間に合わせました。
デザインにもよりますが、例えばfloatにして、ネガティブマージンなどで逃げる手はあると思います。
全体をabsoluteを使わない方針で行けば、固定ヘッダのみfixedで問題ないはず。

(3) 正直上2つしか思いつかなかったんですが、今思いついた代案として、できるかどうかわからないのですが、固定ヘッダをabsoluteに指定して、jQueryなどでスクロール量によって固定ヘッダのtopの座標を変えるってのはどうでしょう。昔はやったスクロールしてもついてくるサイドリストみたいな感じですかね。

そんなわけで、納期迫ってますよ!ほらほら急いで!
posted by BigMoonEz at 11:57 | Comment(0) | TrackBack(0) | CSS | このブログの読者になる | 更新情報をチェックする