IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
水平・垂直に配置した画像やコンテンツを気持ちよくスクロールさせることと次に表示するアイテムのロジックにこだわったjQueryのプラグインを紹介します。 IE6にも対応してるのがびっくりです！ 特徴は気持ちのいいスクロールだけでなく、ナビゲーションのロジックも直観的で、次に表示するべきアイテムを自動的に先頭に配置します。クリックでアクティブにしたアイテムも常に保持します。 操作は上部のバー、FRAME上でホイール、パネルのクリック、下部のナビゲーションがあり、また下部のボタンでは前・次、最初・最後・中央などの操作もできます。 ナビゲーションでの操作は次に表示するアイテムを先頭に配置します。 デモでは、水平方向のスクロールだけでなく、垂直方向、無限スクロールもあります。
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radius、box-shadow、border-image等が使えるようになります。 サイト上のすぐに動くデモを動かしてみると、そのクオリティもなかなかのものだと言うことが分かります。 実装も簡単みたいで、PIE.htc をサーバに設置後、behavior に url(/PIE.htc) として設定するだけみたいです。 behavior: url(/PIE.htc); これは楽で便利です。 対応していな
よくあるCSSの使い方ですが、画像をサムネイル表示するときにJSとかPHPとか書くのがウザイのでCSSでやるパターンのやつのメモです。 要は、CSSで画像のWidthとHeightを制御してやるわけですが、 今回はデカイ画像をサムネイル表示させるので、max-widthとmax-heightで制御してやります。 こんな感じ <style type="text/css"> .image-resize { max-width: 200px; max-height: 200px; } </style> <img src="images/test-image.jpg" class="image-resize" />これで、200pxより大きければ、200pxにしてくれる。もちろん比率はそのまま。 しかし、IE6ではmax-widthとmax-heightに対応していないので、だいぶ前に書いたエント
IE6で透過pngを表示させるためのJavaScriptについて、IE6で背景画像に透過pngを指定してリピートさせるという記事でiepngfixを紹介したのですが、あれ重いですよね。 IE6で透過pngを表示させるためとはいえ、重い。 ということを思っていたら、ITキヲスクさんのIE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」という記事にDD_BelatedPNG.jsというとてもよさげなスクリプトが紹介されていたので、試してみました。 ダウンロードページ DD_belatedPNG.jsのデモページ DD_BelatedPNG.jsとその他のJSの違い 今までいくつかIE6で透過pngを表示するためのスクリプトはありましたが、それはAlphaImageLoaderフィルターを使って表示させていましたが、 AlphaImageLoaderを使うの
HTMLの構造（ソース）を、サイトを通じて考えるときに、 できるだけ同じ構造にしておくと、 修正や更新の時にも、わかりやすくスムースに作業ができるので、 ナイスなのですが、レイアウトの状態によっては、 どうしても、構造を変えなくてはならないケースが出てきます。 例えば、 トップページのタイトル画像だけ、めいっぱい大きくして目立たせたいけれど、 HTMLの構造はサイト全体で同じにしたい。 というケースがあるとして、 レイアウト領域が横幅最大950px、 左側に横幅230pxのサイドバー、 右側は横幅700pxのコンテンツスペース、 とします。 さらに、 ページのタイトル画像をコンテンツスペースに入れる HTMLの構造にした場合、 トップページのみ、 タイトル画像を横幅950pxいっぱいに広げようと思っても、 通常では、左右分割で使う、 float: left; と、float: right;
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
IE6のCSSやJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。
uuCSSBoost.js は uuAltCSS.js に名前が変更になりましたが、一部の説明が記事を書いた当時の古い名前のままになっています。最新版では、uuCSSBoost.revalidate() は廃止され uuAltCSS() を呼び出すように変更になっています。 コードの解説を追記しました。 「最新の規格を実装したブラウザが登場しても、IE6 のせいで諦めるしかないのか」 「CSS3セレクタを古いブラウザでも使いたい!」 といった現場の声にお応えして、ほぼ全てのブラウザで CSS3 セレクタを利用したページデザインが可能になるJavaScript ライブラリを作ってみました。 特徴 軽いよ いろんなブラウザで動くよ(Firefox2+, Opera9.2x+, Safari3+, IE6+, Google Chrome1+) 95%〜98%ぐらいのシェアをカバーできるんじゃない
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。 どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。 もちろんソースにそんなものは含まれていません。 JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。 で、とりあえずググってみて見つかったのは下記2つの記事。 »コメント文が出力に影響！？ »IE6のバカヤロウ (room ant) これらを読んで、とりあえず「float
Unit Interactiveのエントリーから、透過PNG画像をIE6で表示する、超軽量(2KB)の設置も簡単なスクリプトを紹介します。
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 サンプ
DiaryTechnology CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 CSSでmin-heightをブラウザに関係なく使いたい。 そんなあなたにおすすめなのが、『Easiest cross-browser CSS min-height』。CSSでmin-heightをクロスブラウザにする最も簡単な方法だ。 There are still enough folks using IE6, unfortunately, and it doesn’t support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
タイトルが長い… サイトやブログの価値を調べる10の指標とツール｜前向きストラテジー 10番目のでこのブログを調べると泣きたくなるくらい安いけど、ボクは頑張ろうと思った今日この頃、皆様暑さにバテていないでしょうか？ボクはしっかりバテてダレてます。あんまり仕事してま…（加藤さまに給与減らされるので自重しました） さて、そんな訳で本題ですが、下記みたいなレイアウトの時のお話です。 一番書きたかったフロートボッ（略）みたいなの サンプルとダウンロード サンプルページ ダウンロード 今回の本題は「ほげほげ」って書いてあるところのボックスに関してだけ書くつもりが遊んでいるウチに気になった事があったのでそちらも書こうと思っております。 何はともあれ、この「ほげほげボックス」ですが、main areaは10pxのpaddingが指定されてて、その中にこんな感じでぴったりなボックスがぽこぽこ並ぶときって、
2007年01月25日 スタンドアローンでIE3～IE7をまとめていれれるツール『Multiple_IE』 最近仕事でIE7が普及しているせいか、IE6を入れているマシンが 少なくなった。一度IE７をいれるとなかなかIE６に戻すことができず IE6で確認したのか？と問われると困ってしまう そこでスタンドアローン（単独アプリ）で気軽にIEを いれれるという優れものアプリがあるので紹介する。 ■スタンドアローンのIE3～IE7を公開するサイト ■Install multiple versions of IE on your PC | TredoSoft ■スタンドアローンのIE3～IE6 はっきりいってIEの３なんかは全く仕様用途はないのだが、 まれに仕事でブラウザチェックするときIE６などはチェック する場合があるので、こいつをいれると便利。 ■IE6, IE5.5, IE5,
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
