webサイトを構成する要素の中で、最も重要な要素のひとつに「ナビゲーションメニュー」があります。 グローバルナビゲーション、フッターナビゲーションなど、サイト利用者が目的としているコンテンツにスムーズに案内するためのメニュー機能です。 今回のエントリーでは、この「ナビゲーションメニュー」について、昨年よく目にしたデザイン手法があるので、その事例を紹介したいと思います。 情報を1ページにまとめる＋固定したナビゲーションメニュー 昨年いろいろなwebサイトを見ていてよく目にした手法が、この手法です。 どういうことかというと、 一般的によく見かけるwebサイトでは、ナビゲーションメニューをクリックすると、該当するコンテンツのページに移動します。（下図A） それに対し、上述の手法を使用しているwebサイトでは、同じページに情報を集約し、縦（もしくは横）に長いページになっています。 加えて、ナビゲー

A new micro clearfix hack デモページ [ad#ad-2] 「clearfix」はフロートした要素が親要素からはみ出してしまうのを回避するもので、当サイトでもいくつか紹介してきました。 今回紹介するのは、スタイルシートの量を更に減らし（class名も短く）した「micro clearfix」です。 この新しいclearfixの対応ブラウザは、下記の通りです。 Firefox 2+ Safari 2+ Chrome Opera 9.27+ IE 6+, IE Mac IE6 にも対応しているのは嬉しいところです。

-当サイトについて- ☆当サイトはリンクフリーです。 ☆生成したタグをお使いの方は当サイトへリンクをしていただけると嬉しいです。 （ですが、強制ではありません。） 管理人｜免責 プライバシーポリシー

onclickを用いないポップアップjsを見つけました。 最近classやidでjavascriptを実行させるtipsが流行っていますねー。結構使いやすくてすぐ飛びついちゃいます。ソースはいたってシンプル。 ■サンプル 詳細なサンプル 簡易なサンプル↓ popup windowを開く ■</header>手前に入れます。 <script type="text/javascript" src="popup.js"></script> ■ソース（リンクの書き方） <a href="popup.html" class="popup">popup windowを開く</a> ■メリット リンク先をhrefに入れているので、javascriptOffの場合は普通にリンク。 ポップアップでなく新しい窓/タブで開くを選択することも可能。 cssで.popupに別窓アイコンの装飾をするこ

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

Internet Explorer 7 は、 8 月にも beta3 がリリースされるかも知れないんだけど、今現在、IE7 beta2 を含むモダンブラウザに有効そうだと思われる CSS ハックを自分用にまとめておく。以前に IE 7 用の CSS ハックを紹介したことがあったけど、今回の Easy CSS hacks for IE7 - Nano See, Nano Do で紹介されていたハックは、比較的シンプルかも知れない。想定ブラウザは下記のとおり。 バージョン 6 以下の IE IE7 それ以外のモダンブラウザ（Safari、Opera、Firefox） ブラウザごとのハック 全てのサンプルは body 要素を指定の対象としている。 バージョン 6 以下の IE にのみ適用 * html body サンプルページ バージョン 7 の IE にのみ適用 *+html body サンプ

サイトを移転しました。新しいアドレスはhttp://css-eblog.com/になります。 ブックマークしてくれている方は、新しく登録しなおしてください。 この記事の新しいURL 入れ子のプルダウンメニューを作る パーマリンク コメント(6) トラックバック(0)

Workarounds for CSS browser issues.

CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに

ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ

clearfixでfloatを解除 2007-03-07 1 0 XHTML/CSS clear, CSS 枠や背景が消えたり，途中で切れたりしたことはありませんか。 floatした要素（ボックス）を含む親要素（ボックス）のborderやbackgroundが途中で切れてしまうことがあります。 左の例では，右側のメニューが終わったあたりで，左右にあるラインも切れています。 floatした要素の高さは親要素の高さに反映されない 分かりやすいようにXHTMLとCSSの例を書いてみましょう。 <div id="wrapper"> <div id="content"> <p>content</p> </div> <div id="menu"> <p>menu</p> </div> </div> #wrapper { width: 200px; border: solid 3px #999999;

 Sample！ この文書は、Lucky bag::blog の 「印刷用 CSS で背景画像を印刷させる方法」のサンプルです。印刷用 CSS を用意し、その中で h1#head に対して下記の指定をすることで、背景画像も印刷時に出力されるようにしています。 h1#head { color: #fff; display: list-item; list-style-image: url(head_bg.png); list-style-position: inside; letter-spacing: -1000em; font-size: 1pt; } 印刷プレビューで確認すると、指定している背景画像が表示されている。

なんか意外と需要があるみたいなので。 で、8種類ほどのCSSハックを試してみたのですが試した中で見る限りは、Safariと全く同じ適用状況でした。 下記の各ボックスで、背景画像が適用されているものはCSSが通っている、背景が黒のままのものはCSSが通っていません。