スタイルシート: 2007年6月アーカイブ

コンテンツにナビゲーションを設置する際、コンテンツの端にタブ状のナビゲーションを表示できるようにしてくれるのが、side-bar.js。
タブをクリックするとスライドしながら、メニューが表示される。

ウインドウの横に隠れるサイドナビゲーションJavaScript （side-bar.js） - youmos

フッターの位置を（position:fixed）使わずに固定する方法。
コンテンツ量が多いときは、スクロールした一番下に表示する。
コンテンツ量が少なく、スクロールが発生しない場合は画面の下にフッタが表示される。
この方法を使えばコンテンツの量が少なくてもフッターの位置が固定できる。

フッタ高さ分だけマージンを確保
HTMLソースを見ればわかるが、ブランクの＜div class="push"＞とフッタ領域の高さが同じになっている。画面サイズを小さくしたときに、この部分でフッタの表示位置をうまく調整している。

注意点
フッタコンテンツがCSSで指定した高さよりも大きくなる場合はレイアウトが崩れてしまう。
この点に注意すれば、問題なく表示できます。

cssとhtmlを表示

CSSだけでイメージマップを作る有用サンプル。
画像の特定部分にカーソルを合わせると、説明を画像上に表示できるCSSとXHTMLサンプルが公開されていました。
CSS Image Maps - Flickr-like Technique?

JavaScript を一切使っておらず、CSSだけで実現されている。

phpspot開発日誌さんより引用