もうCSSハックは必要なし!? ブラウザ毎にCSSを切り替える「cssuseragent」 | Web活メモ帳
CSSでページをデザインする際に、ブラウザ毎のレイアウトの違いって本当に嫌ですよね。 CSSハックで対応する方も多いかと思いますが、本日紹介する「cssuseragent」を使うとclassの作り方を少し工夫するだけでより柔軟に対応できるようになります。 詳しくは以下 設定方法はJavaScriptを一つ読み込むだけになります。 <script src="cssua.min.js" type="text/javascript"></script> このライブラリを使うと、ページのhtml属性に動的にclass属性を追加するようになります。 例えばですが、IE6でアクセスした場合には ua-ie-6というclass名が追加されるようになります。 <html class="ua-ie-6"> <head>…</head> <body>…</body> </html> iPhoneの場合はua-
クロスブラウザ対応、スクロールに追従するパネルの3つの実装方法
JavaScriptやCSSを使用して、スクロールした際にパネルを追従させるチュートリアルをCSS-Tricksから紹介します。 Scroll/Follow Sidebar, Multiple Techniques demo チュートリアルでは、JavaScriptで実装したアニメーション版、CSSで実装した版２つの計３種類が紹介されています。 サイドバーのリストをクリックすると、追従のパターンを変更できます。 実装はシンプルで、div要素でコンテンツとサイドバーを配置し、サイドバーには「position: fixed;」を指定します。 CSS <textarea name="code" class="css" cols="60" rows="5"> #page-wrap { width: 600px; margin: 15px auto; position: relative; } #s
画像やページをLightBox風に表示できるThickbox:phpspot開発日誌
Thickbox - One box to rule them all. Thickboxを使えば簡単に画像やHTMLファイルの中身をLightBox風にカッコよくページ内表示できます。 画像の場合 必要なCSSファイルとJavaScriptファイルをインクルードした上で、次のように画像タグを<a>タグで囲います。 <a>タグには class="thickbox" を指定し、title属性に画像の説明文を入れます。 <a href="images/image2.jpg" title="画像と一緒に表示させたい文字列" class="thickbox"><img src="images/image2_t.jpg" alt="Image 2"/></a> たったこれだけで、次のようにLightBox風に画像を開くことが出来ます。 titleで指定した説明文が画像の下に入ってます。 次にHTML
[JS]これ最強かものツールチップスクリプト -BeautyTips
シンプルなツールチップも簡単に実装できるだけなく、デザインのカスタマイズが可能で、対応トリガーも豊富なツールチップのスクリプト「BeautyTips」を紹介します。 BeautyTips demo BeautyTipsは機能が豊富というだけでなく、テキストや画像、AJAXコンテンツの表示、ツールチップの表示位置の自動補正など基本性能もしっかりと抑えられており、フォームエレメントへの表示、ツールチップ元の変更なども可能です。 ツールチップはcanvasで描かれており、画像は必要ありません。 対応ブラウザはIE6.x+, Fx3.x, Op8+, Safari3.xとのことで、canvas非対応ブラウザにはExplorerCanvasが使用されています。また、IE6のz-indexへの対応にbgiframe、ホバー処理にhoverIntentが使用されています。 ※Chrome 1, Fx2で
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/03/form-design-2.html
http://www.designwalker.com/2009/01/table.html
