選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」 2006年11月09日- Highlight active input This script is easy to configure. All you have to do is to define how the active input should be highlighted. This is done by CSS. Then you have to call a function at the bottom of your page to initialize the script. 選択中のINPUT要素をハイライトしてくれるJavascriptライブラリ「Highlight active input」。 実装方法は簡単で、次の通り。 1. CSSの

「CSSで段組したらFirefoxで背景が出ねーよっ」て話をよく聞くので色々試してみました。 コンテンツメニュー 元になるHTML 特に何も考えずfloatを使った場合 外のボックスに幅を与えてみる 一般的な解決方法 その他の解決方法 overflowを使う 最終回答 番外編 更新履歴 このドキュメントについて 元になるHTML <div id="container"> <div class="leftBox">内容</div> <div class="rightBox">内容</div> </div> 例1(ブログ) class="leftBox"のボックスの内容は「サイドバー」。class="rightBox"の内容は「記事部分」。 例2(ウェブサイト) class="leftBox"のボックスの内容は「ローカルナビゲーション」。class="rightBox"の内容は「情報」。 例3

Internet Explorer 7日本語正式版 Internet Explorer 7(IE7)の日本語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで本稿では、IE7 beta2のCSS実装検証を元に、IE7日本語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお

提示：该网站的域名（）已过期 查询whois信息 ，网站不能正常访问，域名续费后可恢复。 The domain has expired and cannot be accessed. It can be restored after renewal. 为避免域名被删除或被他人注册，请联系您的域名服务商尽快完成续费： 1. 若您是西部数码会员，请登西部数码官网，进入：管理中心->域名管理->已经到期，找到该域名，完成域名续费； 2. 若您的域名服务由西部数码代理商提供，请您联系您的代理商咨询续费事宜。

ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」 2006年12月27日- Particletree Dynamic Resolution Dependent Layouts ウィンドウサイズに応じてレイアウトを調整するJavaScriptライブラリ「Dynamiclayout.js」。 読み込んでおくだけで、750px以下、750px以上/950px以下、950px以上の３つのウィンドウサイズに応じて自動でCSSを切り替えることが出来ます。 JavaScriptの知識が一切なくとも、利用者の端末に合わせて、最適なUIを選択することができ、なかなか面白い＆便利。 アイデア次第で凄く優れたWEBサイトになりそうな感じですね。 (750px 以下) (750px以上/950px以下) (950px以上) 関連エントリ AjaxでSS

今日はとても面白い1日だった。いや別に仕事とかプライベートとかじゃなく、ガリガリ CSS 書いてて楽しかった。 なんとなく「できるかなー」と思ってグリグリ2時間くらい費やした甲斐があった。でもあとで調べたらいい感じの記事があって、「こっち参照でいいんじゃない？」とも思ったが、せっかくなので残しておく。 と言うわけでまたここからで申し訳ないんですが、パンくずリストがベストとは限らない | WWW WATCH を見て「link 要素を可視化させちゃえば（ちょっとだけ）解決できるんじゃない？」と思ってやってみた。 XHTML の記述を例えばこんな感じに。 <link rel="start" href="index.html" title="最初のページへ" /> <link rel="next" href="next/index.html" title="次のページへ" /> <link r

This domain may be for sale!

先日、友達の依頼で XHTML+CSS のコーディングをしていたところ、position:absolute を指定したボックスが Win版IE6 でのみ表示されないという現象に出くわしました。あちこち調べてみたところ、かなり厄介な IE のバグのようで、消えるときの条件がいろいろあることがわかったので、整理してみたいと思います。 まず最初に見つけたのが、以下のサイト。 » IEで position:absolute した要素が消えるバグ こちらで紹介されているのは、float と clear にはさまれた position:absolute が消えてしまう現象とその対策。でも、私がはまったケースでは、position:abloslute の前には float がありません。紹介されているように clear を追加してみても当然ダメ。う～ん、なぜだ・・・ 日本語のリソースを調べてみても解決策

bodyにfont-size:62.5%を指定すると･･･ 20 pro tips - .net magazineというページを拝見して。 「7. Set fonts using ems」の部分を拝見して初めて知ったネタなんだが、bodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなる、ということらしい。 実は今までemを使った単位指定はあまり使った経験がない。その理由としてはなんか馴染めない･･･って部分だったのだが、これなら自分でも分かりやすいし使いやすくなる。まさに上記ページでおっしゃるとおり『Both the designer and user are happy.』デザイナーとユーザの両方がハッピーです。 ネタ

IE7のフォント絡みでこんな話があった Twitter経由でこんなCSSのフォントサイズに関するバグを教えて頂きました。（バグと呼ぶのか、仕様と呼ぶのかは分かりませんが）発端はfloralさんのこの発言。 IE7で検証した？http://redline.hippy.jp/lab/css/bodyfontsize625.php 以前このブログで書いたこの記事。 >>RedLine Magazine : bodyにfont-size:62.5%を指定すると･･･ 内容はbodyに対してfont-size: 62.5%を予め指定しておくと、フォントサイズをemで指定する際、12ピクセル相当なら1.2em、16ピクセルにしたいなら1.6emという風にemを使ったフォントサイズ指定が分かりやすくなるよというものでした。 そしてその記事に対して前述の通り、floralさんのポストからIE7だとなにやら

CSSで半透明ボックス そろそろCSS3のプロパティで各ブラウザに先行実装されてるものを使ってみようかということで、今回は「opacity」を使って半透明ボックスでもやってみようかと。 いつものごとく実験ページ >>Redline Magazine　半透明ボックスサンプル ↑葉っぱの画像が背景画像でその上の黄緑（#9c0）のボックスが半透明になってるボックスです。 CSSソースはこんな感じ。 div.alphabox{ width:400px; height:600px; background:#9c0; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; } 「filter:alpha(opacity=30);」部分がIE用の指定。 値は0～100。ここでは透明度30%という事でopacity=30を指定している。 ただ、こち

CSS切替スクリプト 当サイトでは長らくいちゆうさんが作成されたスクリプトを利用していましたが、先月中頃から北村さん作のスクリプトへ変更しています。私が動作を期待する環境において、ほぼ狙い通りの機能を実現できており、たいへん満足しています。CSS切替スクリプトに興味のある方は、ぜひご検討ください。 紹介ページは Wiki を利用しているので、ご利用の際には利用サイトの一覧に追加されてはいかがでしょうか。 参考 とことん標準に拘ったCSS切り替えスクリプト（その1） とことん標準に拘ったCSS切り替えスクリプト（その2） とことん標準に拘ったCSS切り替えスクリプト（その3） とことん標準に拘ったCSS切り替えスクリプト（その4） とことん標準に拘ったCSS切り替えスクリプト（その5） Information Old：ol 要素の各リスト項目を参照するには New：ウェディング問題を考える会

Komodomedia blog, webdesign, illustration & newsk00l javascript We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency do not show the

Columnas 100% altas Columnas 100% altasのエントリーでは、下記のデモのように高さの異なるdivで組んだカラムの高さを揃えるスタイルシートを紹介しています。 sample:高さがばらばらのdiv sample:高さが揃ったdiv スタイルシートは、各divに対して「padding-bottom」と「margin-bottom」に同じ数値をプラス値とマイナス値で指定を行い高さを揃え、それらのdiv要素を包んだdivで「overflow:hidden;」を指定します。 詳しくは、最小限にしたサンプルを作成したので参照ください。 高さの異なるカラムを揃えるスタイルシートのサンプル 下記の「32768px」って、何か特別な意味があるのでしょうか。

A List Apart - For People Who Make Websites HTMLとCSSは規格通りに使うとすれば縦横無尽にさまざまな記述ができる。しかし規格上サポートされているからといって、馬鹿正直にそうした機能を使うのは避けたい。シンプルな記述であとから読んでも理解しやすい、他人が読んでも理解しやすいHTMLやCSSを書けるようになることが理想だ。しかし誰しも最初は素人だ。エキスパートがまとめたドキュメントを参考にして、そうしたテクニックであり勘どころを学んでしまいたい。 フロントエンドデベロッパであるAlex Bischoff氏は5日(米国時間)、A List ApartにおいてKeeping Your Elements' Kids in Line with Offspringという名のもと、CSSやHTMLの記述方法について細かい技巧をまとめて発表した。同ドキュメント