sample5(レスポンシブ)の制作

nav,header,wrapperの重なり関係!!!

Z-indexを全く使わず、htmlで記述する順番をheader→wrapper→navにしたら、その順に重なることが分かった!!!

nav内のulとliを中央寄せ。

text-align: center;を親要素のnavに指定するとulだけでなく子要素liにも効く。

liの左右のスキマどうする!?

liにdisplay: inline-block;を指定すると間に「改行すき間」ができる。その解消のため、親要素ulにfont-size: 0;。

liの3・6番目の右border消す

nav li:nth-child(3n)にborder-right: none;を指定。

難問:navをfixedでも上marginの分15pxスクロールしてしまう変な現象

navがfixedにしてもmarginの分15pxスクロールしてしまう現象
→navの上marginを-15pxに指定
→navがその分下に下がる
→その分position: fixed;をtop: 15px;と指定

スマホではhover効かないから・・・。

tab キーを押すとリンクごとにフォーカスがあたっていく。
:hoverと:focusを同じにするのも一方法。

リンクを枠内に効かせる

aにdisplay: block;を記述するだけ?

モーダルウインドウColorbox設置

Colorboxで指定のURLをオーバーレイ表示するサンプル2参照して設置

head内に、ColorboxのCSSを読み込む記述一行、jQueryとColorboxのスクリプトを読み込む記述三行、Colorboxの適用対象の指定とオプションの記述一行の計5行を記述。

htmlの当該箇所に、display:noneとinline_contentを記述。

→しかしdiv style="display:none"でなく、div id="display-none"にして、display:noneはこのhtmlのcssに記述するように変更した。

重要:モーダルウインドウにcss効かせたいときは、要素名として#colorboxを使う。デベロッパーツールで発見!!

重要:モーダルウインドウの幅や高さについては上の5行のうち一番下のスクリプトで指定できた!

#mainの中央寄せ(pc画面)

#mainをどうしても中央寄せできなかった。最後に原因に気づいた。position: absolute; top: 100%;にしていたためだ。position: relative;に変えて解決。absolute;で左右位置指定なしでは左に寄ってしまう。

headerの画像(背景的な)が下のmainに侵入!

またheaderにoverflow: hidden;を記入しないとheaderの高さを制限しても、画像が下のmain側に侵入していた。