CSS + XHTML Category Index

CSSを無効化するブックマークレットを更に改造してみました。

• CSS無効化・改 (クリックするとこのページのスタイルが無効になります)

右クリックからお気に入りに登録してください。
今回のブックマークレットはCSSの無効、有効を切り替えることができます。

続きを読む : CSSを無効化するブックマークレット・改

あえてマイナスにベクトルを向けたブックマークレットです。

• CSS無効化 (クリックするとこのページのスタイルが無効になります)

より快適なCSS無効化ブックマークレットを公開しました。

• 詳細 : CSSを無効化するブックマークレット・改

ユーザーにリッチな体験を提供するCSSではありますが、使い方を誤ると可読性を著しく落とすのも事実です。例えば文字が小さすぎて読めないとか、文字色と背景色が近すぎて目がチカチカするとか、レイアウトが崩れてテキストが隠れているとか。

ユーザースタイルシートやGreasemonkeyなどを使ってある程度はカバーできますが、検索で訪れたサイト等ではどんなスタイルが待ち受けているか分かりません。特にレイアウト崩れは避けづらいです。

というわけで、ブックマークレットを使ってピンポイントでスタイルを無効にしてしまおうという魂胆です。
いちおうlink要素から参照している外部スタイルシートとhead要素内のstyle要素内の記述を無効化できます。インラインで書かれたスタイルは無効化できません(可能なんですが全要素に対して処理することになるので重くなると思って対応させていません)

といいつつ、link要素に関しては含まれるであろう文字列「css」「CSS」「text/css」を判断して処理しているので、PHPとかでCSS吐き出している場合(type属性がなくてスタイルシートのファイル名に拡張子がない場合)などでは無効化できません。

拙いブックマークレットですが、気が向いたら使ってやってください。(右クリックからお気に入りに登録してください)

対応ブラウザは割と新し目のブラウザです。むしろ古いブラウザ(NN4やIE4)用の方が需要があるんだろうなーとは思います。

その他のブックマークレット

サイト管理者、lint厨、W3C信者etc向けブックマークレット

CSSを無効化するブックマークレット・改

/*Goodbye MacIE\*/
@import "○○.css";
/**/

と書きたくなる衝動。
特に"MacIEのためだけ"にdivを追加しなければならない時。

というわけで、色々調べたり、実際にCSS書いたりしていたら半日かかった…。
参考までにどうぞ(というよりほとんど自分用)。

• CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件

何か、これダメじゃないか?とか気になる箇所があったら指摘してください。

そろそろIE7のCSSの癖も覚えていかないと…
とりあえずネットスケープの古ーいやつはここからいける。(公式だが怒られそうなので"h"抜き)

• ttp://ftp.netscape.com/pub/

暇だったので作ってみた。(右クリックからブックマークに登録してください)

• Another HTML-lintブックマークレット
• W3C HTML文法チェック ブックマークレット
• W3C CSS文法チェック ブックマークレット

「おおっ」と思ったサイトをクリック一発でチェックにかけることができます。
自分のサイトをチェックする時にも便利かもです。
いくら構文気にしてブログ作っても記事投稿してたら知らないうちにミスってることがよくあるので。

って、JavaScriptをほんの少しかじったら作れるような簡単なスクリプトですので、たぶん既出なブックマークレットです。何を今更な…。

そもそも、インフォアクシアのツール使って調べていたんですけど、プロセス(Firefoxなら右クリックからチェック可能)が面倒だったので…。

W3CのCSS Validatorの応答がものすごく重い…。

その他のブックマークレット

CSSを無効化するブックマークレット

CSSを無効化するブックマークレット・改

巷で話題のLightbox JSを導入。しかも v2.0。

続きを読む : Lightbox JS v2.0 導入しつつ改造

ちょっと過去の記事で、今とは異なる箇所を修正するのにHTML的には何を書いたら良いのだろうと調べたのでメモ。

ぱっと頭に思いついたのが<strike>要素だったのですが、打ち消し線を引くだけのタグで非推奨だそうな。じゃあ何使うんだよと腹立たしく思っていました。見た目の制御って事で非推奨だとして、音声的、文書的には意味が無い<span>とかで囲ってCSSに text-decoration: line-throughでも使えと言うのか？と思っていました。

で、五分ほど調べたらすぐに答えは出た。
<del>要素ってのがあるんですね。しかも、<ins>要素ってのまであった。無知というのは恐ろしいものです。

<del>

その箇所が削除されたことを表す。
このような感じで表示される

<ins>

その箇所がHTML文書に追加されたことを表す。属性にdatetimeを与えて追加した日付を記入することができる。具体的には

<ins datetime="2006-03-22T22:40:00+09:00">なんとかかんとか</ins>

といった具合、<del>も同じく日時を指定できる。
実際の表示はこんな感じ?

また両タグともcite属性を用いて、変更の理由が記述されたHTMLのURLを示すことができる。

このような感じ?

こういう風に見てみると、HTMLって本当によくできてるなーと感心してしまいます。タグひとつひとつにちゃんと意味があって、しかもそれはPCのWebブラウザだけでなく、様々な環境でも文書として成り立つようにできているんですね。
正しくHTMLを書けば、Googleのロボットでも文書の構造を正しく理解させることができるということですし。

CSSを使ってJavascriptのロールオーバーイメージを実現する方法は既に一般的になって、あちこちのサイトでも見られるようになりました。
ところが、問題点をいくつか見つけたので書いておきます。
自分のサイトの粗が出る「諸刃の刃」のような記事になりそうで本当は書きたくなかったんですが…

続きを読む : text-indent: -xxxxemの弊害

このサイトはHTMLのルール上、新しいウインドウを開いてはいけないのですよ(いや、別に自分で決めたわけじゃなくて…)。XHTML strictの決まりごとです。

ルールを無視して、target="_blank"をアンカータグ<a>に放り込めば問題なく新しいウインドウで開くことができるんです。でもアクセシビリティ上よくないのですよ。
最近知ったのですが、ページ読み上げソフトなどを使用している場合、新しいウインドウが開いてもユーザーは分からないそうです。要するに、戻るボタンなどが効かなくなり混乱するので良くない、というわけです。少なくともアンカータグ<a>にtitle属性で新しいウインドウが開く旨を記述する必要があるそうです。

その話については少し置いておいて…

続きを読む : 新しいウインドウを開くべき？