Yahoo! UI Library: Fonts CSS を使うのなら、Opera には気を付けて！
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
CSSの擬似クラス「:hover」で作るちょっと変わったメニュー - Trans
IE7の大きな進歩の1つといえば、a要素以外にも:hover擬似クラスが指定できるようになったこと。では、これを使ってどんなWebデザインができるのかについて3つの事例を調べてみました。 CSS hover effect | Veerle's blogより。 サンプルはKansas City Homes for Sale | Prudential Kansas City Real Estateの真ん中あたりのタブです。タブ内にマウスを持っていくと背景色が変わると思います。 これを作るためには、次の2つの画像を用います。 コードはこんな感じです。解説はCSSのコメントと一緒に書いておきました。ちなみに、事例の3つとも画像置換を使っていますが、その説明は省略しています。 <h2>4 different ways to find your Kansas City Homes for Sale</
TRANS - * { magin: 0;}だけでは物足りない！zoom: 1;を使おうよ！
IE6からIE7が今後本格的にマーケットシェアを取って行くことを考えると、IE7の仕様やバグを考えた上でのマークアップが欠かせないとは思います。でも、僕らはまだIE7がどんなものかが分からない。そのため、とりあえず* { zoom: 1;}を指定しておくことが安全策なのかもしれません。 IE7のZoom機能で、見事にこける。 先日、うちの本体のサイトを更新し終わった際に、スタッフから「あれ、しゃらくのサイトずれてるよ」と指摘されました。更新箇所が多く、CSSも多少いじくったので、どこか消してしまったのかもしれません。そこで、自分のブラウザで確認するも、どうも問題が再現できない。そのスタッフのブラウザを見ると、こんな感じになっていました。 僕のFirefoxで見てみても問題ないし、そのスタッフが使っているIE7でも問題なし。「うーん」と悩んでみるものの、意外と答えは簡単なところにありました。
Seth Godin「すごいWebサイトを作る方法」（日本語訳） - Trans
著者: Seth Godin件名: How to create a great website日付: 2007年10月11日URL: http://sethgodin.typepad.com/seths_blog/2007/10/how-to-create-1.html訳者: Arata Kojima How to create a great website あなたが逃れられない原則はこれだ。 委員会なんかは首にしてしまえ。歴史上、3人以上で作られたすごいWebサイトというのは存在しない。1つもない。厄介なことになるだけだ。 インタラクションを変えろ。すごいWebサイトをすごいと言わしめるのは、簡単そうな感じと同時に、新しいことだ。これは、そのWebサイトがあなたに新しいこと、新しいインタラクション、新しい関係性をもたらすことを意味する。その一方で、すぐにどうやって使えばいいのかも分かる
「IEハックなんて全部捨てちまえ！」英語圏の反応をまとめてみました。 - Trans
IEハックなんて全部捨てちまえ！に対する意見は結構まちまちで、僕も色々と勉強させてもらいました。では、元ネタの英語圏の反応はどうだったのでしょうか。それを簡単にまとめてみました。 現在の投票の結果 「Trash All IE Hacks」で募集している投票の結果は、現在（2007年8月11日14時ごろ）で、 Yes、全部捨てちまえ！…1,488件（86%） No、僕はIE6のバグフィックスをする時間があるよ…253件（15%） となっています。そもそも、設問の仕方が悪いような気もしますが、それは横に置いておきます。 英語圏の元記事に対するコメント 日本語圏の意見はIEハックなんて全部捨てちまえ！の記事に対するコメント、SBMのコメント、TBなどをご覧になってください。では、英語のコメントから興味深いもの、日本語圏ではあまり見られなかったものだけを下記にまとめておきます。 あと2年も待てば、
IEハックなんて全部捨てちまえ！ - Trans
件名の通り。といっても、英語ブログの訳文です。原文は「Trash All IE Hacks」より。間違いもあるかもしれませんが、訳文の許可をもらったので日本語訳しておきます。以下から訳文。 みんながIE6を嫌っていることをそろそろ認めようよ。僕たちのCSSのデバッグの約80％の時間がIE6のために費やされている。みんな知っていると思うけど、IE6は時代遅れだし、ひどいCSSのレンダリングエンジンを持っている。けれど、ほとんどの平均的なインターネットユーザはそのことをいまだに理解していない。だから、僕たちはそれに時間をかけないといけないし、様々なIEハックを使って、バグを埋めないといけない。そう、何かをやる時間を使ってね。 共通のIEハック 1.CSSコンディショナルコメント 特定のIEのバージョン（不適切なCSSレンダリングをする）で僕たちのサイトを動かすためには、CSSコンディショナルコ
TRANS [hatena] - RSSリーダー Firefoxを使って、英語の記事をサクサク読む9つの方法
このブログではちょくちょく英語の記事を元ネタに書いたりしているので、「英語できるんだ」なんてことを思われているみたいです。けれど、僕は留学経験もないし、両親がハーフなんていうオチもありません。でも、RSSリーダーやFirefoxをうまく使いこなせば、そんな僕でも「それなりには」英語の記事を早く読めるようになります。 livedoor Reader + Greasemonkeyで情報の取捨選択を行う ノンネイティブである僕が英語の記事を読むには、日本語の記事を読むよりも時間がかかります。そのため、読むべき記事は厳密に取捨選択する必要があります。1日中RSSリーダーを読んでいるだけではマズイのです（そもそも本職ではないし）。 そのために、LDR + グリモンを使います。グリモンは最速インターフェース研究会 :: livedoor Readerにdel.icio.usのブックマーク数を表示するG
![TRANS [hatena] - RSSリーダー Firefoxを使って、英語の記事をサクサク読む9つの方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae5f6834be9c8c44575fefdd0a8f407f55a40419/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523209%2F1460995420)
TRANS - WordPressで企業サイトを作る際によく使うプラグイン
2009年10月30日（追記）：プラグインを見直し、こちらで公開しています。 2008年8月9日（追記）：この記事はちょっと古いです。最近よく使っているプラグインはWordPressをCMSとして使うときに必ず使うプラグイン6選-Re:Creator’s Kansaiに書いています。 WordPressで企業サイトを作る際に、僕がよく使うプラグインを書き出しておきます。簡単な説明は僕が付け加えたもの、もっと詳しい説明はほかの方が説明してくれている日本語のブログなどにリンクを貼っておきます。それでは、以下から。 追記（2007年7月11日）1点付け加え忘れていました。以下のプラグインを1つのWPに入れた場合などは、いくつかうまく起動しないことがあると思います。そのへんの使用には注意してください。 大体毎回使うプラグイン Customizable Post Listings WPのテンプレート
TRANS - WordPressで企業サイトを作る際に押さえておくべき10個のこと
少し前に、WordPressで企業サイトを作る際によく使うプラグインという記事を書きましたが、プラグインを入れたらそれで完成、という訳にはいきません。そこで、プラグインとは別に、企業サイトを構築する際に押さえておくべき10個のことを書き出しておきますので、参考にして下さい。 そのコンテンツにはページなのか、記事なのか、それともHTMLなのか。 WPには、「ページ」というブログの時系列には影響されない個別のコンテンツを作るための機能があります。まず、はじめに考えておくべきことはWP自体をどの階層にインストールしておくのか、ということです。 同時に、あるコンテンツを作る際にそれを「ページ」で作るのか、それともブログベースの「記事」で作るのか、それともWPとは別に単なるHTMLファイルとして作るのか、そのあたりを考えておく必要があります。僕がよく使う方法は、「お知らせ」や「新着ニュース」などは「
YUI Fonts CSSのline-height: 1.22em;の謎を解く！ - Trans
先日から、ずっと頭に引っ掛かっていたYUIのFonts CSSのbody * { line-height: 1.22em;}という指定。はてなの人力検索でも質問してみたのですが、結局分からずじまいで、仕方がなく、自分でマークアップしてテストしてみました。どうやら、id:b-windさんがおっしゃるように、この「*」全称セレクタがキーになるようです。 まず、おさらい。 そもそも、なぜこのline-heightに疑問を感じたのかは、このエントリー。Lucky bag::blog: line-height の値には単位なしが良いとされる理由。はてブの数からしても読んだ人多いんじゃないでしょうか。まず、このコードについて、こちらでもテスト用に作ってみました。Lucky bagさんとほとんど同じコードです。 YUI Fonts CSSのline-hight: 1.22em;は何なのか？その1。 li
【解決編】YUI Fonts CSSをモダンブラウザで最適化する。 - Trans
先日、YUI Fonts CSSでフォントサイズを指定した際に、Operaにおいてはフォントが小さく表示されるので、em指定するとか、Operaのみハックするとかして解決する、そんなことを書きました。でも、ようやく各モダンブラウザでYUI Fonts CSSを使いながら、的確なフォントサイズで表示する方法が分かりましたので、書いておきます。パーセンテージの指定を数パーセントずらすことによって、モダンブラウザでほぼ同じフォントサイズを表示できるようです。 まず、前回書いた記事で問題だと考えていたのは、 em指定の場合は、IE6などのブラウザで解釈が異なる（ブラウザの文字サイズの拡大機能を使った際に、拡大される割合がかなり違う）ということ。祖先要素にパーセント指定するという解決策はあるものの、階層が深くなってしまうと、あまり現実的ではない。 Operaのみに対応するハックのコードを埋め込んでお
TRANS - alt=""を越えて。
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
letter-spacingをマークアップする際の注意点 - Trans
body要素にletter-spacingを入れる際の注意点が分かったので、自分の備忘録としても書いておきます。 今までは、 /*\*/ letter-spacing: 0.1em; /**/というふうにbody要素に書いており、MacIEの「letter-spacingを指定した要素内の表示が崩れる」というバグをホーリーハックで防いでいました。 基本的にはこれさえ守っておけば、うまく表示されるはずなのですが、最近作ったブログではコードによっては、うまく表示されませんでした。改行しているはずの箇所が、全く改行されていない。それもWinIE6のみ。てっきり、MacIEさえ気をつけておけばOKというわけではなくて、WinIEにも配慮しなければならないよう。 では、何が問題だったのかと言いますと、br要素による改行なんですね。WinIEには「letter-spacingを指定した要素内で連続した
2xupで実装されているエラスティックレイアウトを調べてみた。 - Trans
2xupさんのところで実装されているエラステックレイアウト（Elastic Layout）、もしくはエラステックデザイン、はたまたエラスティックレイアウトというのが気になってしょうがない。今年、アックゼロヨンでグランプリを受賞したみずほ証券でも、似たようなレイアウトが施されている。というわけで、またもや調べてみた。 と、調べてみたはいいものの、うまい具合に実装方法について解説されているサイトが見つからなかった。要は、widthやpadding、marginなどにem指定をして、フォントサイズを変更しても、それに応じてレイアウト幅が変更されるレイアウトのことを言うらしい。A List Apart: Articles: Elastic Designで発表されたのがどうも初めてのようだ。ちなみに、作者が作ったサンプルサイトもある。 でも、456 Berea Streetでよい感じに、自分のサイト
ページ内リンクはどう実装すべきかについて考えてみた。
ナビゲーションスキップは主に音声ブラウザ向けに、グローバルナビゲーションなどをスキップするために実装されるものだが、前々からずっとナビゲーションスキップをどのように書けば最適なのか、についてはずっと疑問に思ってきた。というわけで、調べてみた。 前提：まずは最適なHTML（XHTML）を書くこと。 これが大前提。音声ブラウザによっては、heading要素（h1とかh2）を順にスクロールすることができるから。というわけで、XHTML＋CSSによるWeb標準での実装は大前提。というより、これをしっかりと書いておけば、ナビゲーションスキップを埋め込まなくても、音声ブラウザにとってはテーブルレイアウトに比べて、かなり便利になるようだ。 検討事項その1：そもそもナビゲーションスキップは見えるようにすべきか否か。 ナビゲーションスキップを見えるようにするべきか、しないべきかについて、まず考えておく必要が
posiotion: absolute;で絶対配置に固定したli属性は、IE6もしくはIE7において、display: block;が効かない？ - Trans
既に、どこかで公表されているバグなのかもしれないけれど、自分がハマリにハマリ、今日一日をこれだけのために使ったと言っても過言ではないので。 こんなコードを書いていた。まず、HTML。 <div id="navi"> <ul> <li><a href="#">ああああ</a></li> <li><a href="#">いいいい</a></li> <li><a href="#">うううう</a></li> </ul> </div>簡単なulとliで書いたナビゲーション用のコード。次はCSS。 #navi { position: absolute; width: 240px; left: 21px; top: 411px; margin: 0; padding: 0; } #navi ul { list-style-type: none; margin: 0; padding: 0; } #na
slides.js
Web標準の人たちがS5を使っているのを見て、自分も使ってみたいと思い、色々と実験。ただ、日本語ドキュメントがほとんど見つからなかったので、備忘録としてもメモしておく。参考にどうぞ。 そもそも、S5って何だ？ 単純に言うと、インターネット上でマイクロソフトのパワーポイントを表現するようなもの。例えば、2xupさんとかがプレゼンの資料として公開している。でも、「それだけなら、パワーポイントをダウンロードするなり、PDF化すればいいんじゃないの？」と思われるかもしれないが、S5はXHTML＋CSSのWeb標準で実装されたパワーポイントのツールのようなものなので、検索エンジンにも引っ掛かるし、アクセシビリティにも対応できる。このへんが便利かなと思っている。 S5を使うために必要な技術 まず、HTMLなり、XHTMLが読み書きできること。デザインを自由自在に変えたいのなら、CSSも必要。S5自体は
Google Page Creatorのテンプレートがすごすぎる件 - Trans
ちょっと昔の話題になってしまうが、そういやGoogle Page Creatorなんてものがリリースされて、すぐに使ってみようと思っていたのだが、なかなか登録できてなくて、ほったらかしにしていた。 で、それを使ってみた。 正直、吐き出すソースが一流すぎる。HTML自体は、4.01のTransitionalながら、CSSのhacksまでがほぼ完全に適用されている。ソースは、例えば、 /* * IE5/Win-specific CSS -ensures #container wraps all content on window resize */ @media tty { i{content:"\";/*" "*/}} * html #container { height: 1%; } /*";} }/* */ /* Styling for editable elements. Eventu
TRANS [hatena] - 印刷用CSSをまとめてみた。
以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度
![TRANS [hatena] - 印刷用CSSをまとめてみた。](https://cdn-ak-scissors.b.st-hatena.com/image/square/860579fb9ea6fc896c86331cc2f3af60ddeb6ef1/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523499%2F1448268251)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUIが2.3.0にアップデートされ、CSS Baseが仲間入りしたみたいです。 - Trans
