Trans

NPOやソーシャルビジネスの創業・経営・マネジメント

Web標準

Yahoo! UI Library: Fonts CSSを使うのなら、Operaには気を付けて!

Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になって…

letter-spacingをマークアップする際の注意点

body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。 今までは、 /*\*/ letter-spacing: 0.1em; /**/というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグ…

日本語で日本語のCSS情報のみをGoogle Coopで検索する。

CSS Engine in Japan アイディアはEric's Archived Thoughts:CSS Searchより。これの日本語版がほしかったので、自分のブクマやRSSリーダーに入っているフィードを中心に作ってみた。 とにもかくにも、動けばよかったので、デザインなどは一切無視。単に調べ…

2xupで実装されているエラスティックレイアウトを調べてみた。

2xupさんのところで実装されているエラステックレイアウト(Elastic Layout)、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たような…

印刷用CSSをまとめてみた。

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#navi…

posiotion: absolute;で絶対配置に固定したli属性は、IE6もしくはIE7において、display: block;が効かない?

既に、どこかで公表されているバグなのかもしれないけれど、自分がハマリにハマリ、今日一日をこれだけのために使ったと言っても過言ではないので。 こんなコードを書いていた。まず、HTML。 <div id="navi"> <ul> <li><a href="#">ああああ</a></li> <li><a href="#">いいいい</a></li> <li><a href="#">うううう</a></li> </ul> </div>簡単なulとliで書いたナビゲーシ…

Web制作に役立つ拡張機能

以前から、Web Developer Toolbarはよく利用していたのだが、覚え書き@kazuhi.to: Re: 第7回 ページ構造を確認する方法のところで、面白いFirefoxの拡張機能を発見してしまった。 それが、X-RayとProfessor X。 使い方は、覚え書き@kazuhi.toさんのところを…

アクセシビリティを実践しないと、訴えられる?

興味深い判決だと思う。 NFB 対 Target社訴訟の判決 連邦地方裁判所の判事はWebサイトが視覚障害者にとってアクセシブル(利用可能)でない場合、小売業者は法に訴えられる可能性がある、という裁定を下しました。Target社はこの裁判の中で、自らのWebサイト…

兵庫県のホームページがリニューアルしました。

仕事柄、結構頻繁にアクセスしている兵庫県のホームページ。いつの間にか、リニューアルされているみたいで、Web標準的なサイトに生まれ変わっていた。 ソースを読んでみると、ざっくりtableで囲んだ後、各メニューなどはul、liで作りこむなど割合しっかりし…

JavaScriptなしで、CSSを切り替える。

phpsoptで紹介されていた記事。 http://phpspot.org/blog/archives/2006/08/javascriptcss.html 元ネタは、456 Berea Streetの人のやつ。ここのZoomLayoutのやり方をずっと知りたかったんだけど、やっと分かった。よかった。 ただ、phpspotの記事はその紹介…