はてなブックマーク

さきの２つのエントリーと関連して。 略語に振り回される今日この頃 abbr の title 値を CSS でポップアップ abbr を使わずに直書きするのが最善？ ANOTHER PIECES（id:xcezx さん）の「abbr 要素 その2」というエントリーで、次のようなご指摘をいただきました。（id:xcezx さん、ありがとうございます。個人的にこういう前向きな批判や議論は大歓迎です！） 「CSSを処理しないテキストブラウザや音声読み上げブラウザでは、やはり略語のフルスペルは表示されないよね。」というのがユーザビリティ的な観点から、満点をあげられない理由。 ユーザビリティを考えるなら、小賢しいテクニックなど使わずに、"XHTML (eXtensible HyperText Markup Language)" とかした方がよっぽどいい気がする。 結論からいえば、この指摘は大変ごもっと

折角、caramel*vanila の lomo さんが、前のエントリー（略語に振り回される今日この頃）にフォローアップして下さったこともあるので、僕の方でもちょっとだけ＋αをつけてみます。 略語に対してつける <abbr> 要素には、その原語なり原表記なりを title 属性の値に記述するのが普通です。モダンブラウザのデフォルト設定なら、<abbr> で括られた個所にマウスを乗せると、title 属性の値がツールチップの形で表示されます。 でも、ツールチップでは文字が小さくて見にくいですし、またマウスを乗せない限りは、何の略語であるのかが、結局わからないままです。そこで、その title 属性値（つまり原語）を CSS だけを使ってWebページ上に表示してみましょう。 原語（title 属性値）を括弧で括って略語の後に表示 :after 擬似要素を使うので、この方法だと残念ながら IE（

今日は、ちょっと逃避で、大分前の書きかけ（未公開）エントリーを引っ張り出してきてみました。ちょっとここ数日、落ち着かなくて..。 最近、つくづくよく思うのは、"Web 標準コーダーのための XHTML / CSS リファレンス" みたいな感じの、携帯に便利でコンパクトなリファレンスブックが欲しいなということです。今でもたくさんの HTML / CSS リファレンスは出版されているわけですが、イマイチしっくり来るモノがないというのが実感です。ぶっちゃけ、既製品には、ユーザビリティ的に色々と顔をしかめたくなる点が多くて..。従来品との相違点でいえば、大体、次の５つのポイントに集約できるかと思います。 非推奨要素・属性・属性値は排除したい 読み方、原語を明記してほしい 規格と実装は区別して！ 非対応ブラウザ側を表示する 非対応ブラウザ対策の提示 非推奨要素・属性・属性値の排除 XHTML リファ

Firefox 2.0 の正式リリースは、どうやら日本時間で 10/25（水）の朝になりそうです。というわけで、日本語版に限っていえば、IE 7 よりも Firefox 2 の方が先になる模様。 ここ最近、関連イベントがあちこちで行われていましたけど、結局、どれも行けずじまいで、ちょっと残念でした。ただ、先日の CSS Nite vol.13 については、配布資料やスライドの一部が公開されているので、早速、チェック。このうち、Mozilla Japan の中野雅之さんのスライドの中に「あなたの顧客を危険な設定に誘導してはいけません！」とあったのが印象的でした。CSS Nite LP, Disk 1 の瀧田さんの時もそうでしたが、エンドユーザーにリスクを負わせないという方針が、しっかりあって好感が持てますよね。 というわけで、リリースされたら、なるべく早い段階で、新しいバージョンへのアップグ

今日は表組み CSS について、備忘録かねがね情報共有用です。まじめに書くと長くなるので、一般的な説明はかなり省いてます。もしここで紹介している事柄に興味が湧いたけど、細かいところがよく分からないという方がいらっしゃいましたら、どうぞ遠慮なく聞いてください。逆にもっと良い方法をご存知の方がいらっしゃったら、是非ご教示くださいませ。 CSS TABLE GALLERY　http://icant.co.uk/csstablegallery/ 最近見つけたページで、色んな人が作成した表組み（テーブル）デザインのサンプル CSS（スタイルシート）を集めたサイトです。ただし、スタイル名をクリックすると即座にそのスタイル（というか CSSファイル）が適用されて外観が変わります（表組みの HTML 自体は固定で、本当に CSS が切り替わってるだけです）。気に入ったスタイルがあれば、Download を

とりあえず、昨日（「続 JavaScript ソースが HTML から消える日」）の続きです。 あとで、対応ブラウザと対応セレクタ、ライセンスの一覧をアップしますが、とりあえずは現時点で把握している選択肢だけでも挙げておきます。 と昨日いいましたけど、ちょっと検証までやってる時間がないので、現時点で把握している範囲内の情報だけでもアップしておきます。（参考リンクもあらためて探し直してきたらボロボロ出てきたので整理しないと..。）また追々情報を追加していくつもりですけど、情報リーク大歓迎です。 対照表へ こういう情報って配信形態として Blog よりも Wiki の方が向いてるよなぁ..とかいうジレンマも自覚しつつ..。(- -;) それと、一応、この振る舞いの完全分離 —特に getElementsById の枠を超える部分のマイナスの面にも言及しておくべきでしょうね。 Shibuya.j

今日は、prototype.js（クロスブラウザで Ajax をサポートする JavaScript フレームワーク）を利用して、さまざまイフェクトを提供する Script.aculo.us こと scriptaculous.js から。Ruby on Rails にも同梱されている、今をときめく JavaScript ライブラリなので、ご存知の方も多いのでは？ scriptaculous.js のカンペ - Scriptaculous Cheat Sheet 画像に反射効果を出すリフレクタ効果 - script.aculo.us Reflector scriptaculous.js のカンペ scriptaculous.js でイフェクトを設定するための基本的な書式（basic syntax）をまとめた PDF 形式のカンペ（cheet sheet）が Slash7 の Amy Hoy に

変数名の命名規則 (zonelog) Neko？プログラミング言語？？（メモ：ブラウザのデフォルトCSS） (javaプログラマ日誌) HTML　イズ　ふりーだんｍ！！ (想始創愛) h1をはじめ、見出し要素に関する議論が盛んになっている件 (STOPN 'LISTEN) 【sIFR】…でletter-spacingを効かせる方法。 (BLOG dot USK dot CC) [Web]Re: Re: XHTML+CSS (r)evolution, 3rdの内容は信ずるに値するか? (TRANS) CSS Nite LP, Disk 3 (hemiolia.com) 一歩先のWeb標準 ♯2 (withD（ウィズディー）) 一歩先のWeb標準 ♯1 (withD（ウィズディー）) CSS Nite shuffleが終了しました。 (CSS Nite公式ブログ)

先日、"Nifty Corners Cube" という、ボックスの外枠に角丸効果を出すための JavaScript ライブラリを知りました。「え？今頃知ったの？」って方はともかく、「何でいまさら角丸効果を JavaScript で出す必要なんかあるの？！そんなの、CSS でできるじゃない？」と怪訝に思われる方もいるでしょうが、まずはこの niftycube.js の特徴をご覧あれ。 主要機能 文書構造上、無意味なブロック要素（div など）を HTML 上に記述することなく、単一の div 要素に対してでも角丸効果を出すことができる。 （以前に紹介した behaviour.js のように）角丸効果を適用する場所を CSS セレクタで指定できる。 CSS の背景色や背景画像などを niftycube.js が自動的に検出してくれるため、JavaScript の記述量が非常に短い。（JavaS

<h1> の見出しを画像にされてる方は大勢いらっしゃることかと思います。（僕は普段はしてませんけど。）でも、この見出し画像ってどのように管理されてますか？直接 HTML に埋め込んでますか？それとも外部 CSS ファイルに一括して記述されてますか？どちらの方法を採っても、メンテナンスしにくいですよね。 今日は h1 の見出し画像を、独立した見出し画像管理用 CSS ファイル（h1.css）で管理する方法についてのメモです。 見出し画像管理用として独立したファイルを設ける（h1.css） メイン CSS ファイルの先頭に @import を使って h1.css を取込む h1 の id 名はサイト全体の中で一意（unique）にする id 名は HTMLファイル名と同一の名前にする ディレクトリも "-"（ハイフン）で区切って id 中に記述 見出し用画像の名前も HTML ファイル名と同一