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/

2006年5月9日にInternet Explorer 7のベータ第2版が公開されて日本語版もあるそうなのでインストールしてみました。
以前インストールした時より何か使い心地が良くなっているような気がする…って、そこら辺の話題はあちこちで説明されてると思うので、やっぱりCSSの話。

以前のIE beta2の時に起こっていた"CSS擬似要素(hoverやvisited)が効かない"という問題は解決しているようです。
特に目立ったCSSバグも無いように見えるんですけど、いかがなもんでしょうか?

相変わらずAcid2 Testでファンキーなレンダリングしてくれるわけですが、Firefoxとかとの差ってそんなにあるんすか…?

2006年後半(Microsoft曰く)には正式に登場するわけですが、結局IE6用のCSS対策もしないといけないわけですよ。未だにIE5.0対策しないといけないみたいに。(このサイトはもう古いブラウザたちは見放してます。ごめんなさいね。)
更にIE7はXP、Vista用しか用意されないみたいなのでMEとかの人はずっとIE6なわけです。悩ましい。

IE6(後方互換モード)がCSSバカかといえば、そんなことは無くて割と言うこと聴いてくれるんでそれほど苦じゃないと思いますけど(ハックさえ使えば)。

しばらくすれば、ポロポロとCSSバグが見つかっていくんでしょうけど偉い人が対処法を見つけてくれると思います。本当は自分が見つけて「From Japan !!!」とか言って鬼の首を取りたいと思っている今日この頃だったりします。

• Internet Explorer 7(日本語)
• IE7 ベータ２ 日本語版リリース - ウィンドウズ開発統括部
• MS、IE7のベータ第2版を公開--製品版は2006年後半にも公開予定 - CNET Japan

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

• 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のロボットでも文書の構造を正しく理解させることができるということですし。

ふと思ったのですけども、GoogleのキャッシュのページにCSS食べさせてもいいのかしら?

ソースを覗いたらtableゴリゴリなわけですが、例えばCSSに属性セレクタ使って以下のような記述をすれば好きなことできるような…(Googleの挿入しているテーブルにアクセスするっていう意味です)

display: noneとか使って、あたかも自分のところのコンテンツに見せるとか…
実際、自分のところのコンテンツだし…。

:afterとかの擬似要素やcontent使って全く別のコンテンツ作るとか…

属性セレクタが使えるブラウザは限定されますけど。GUIにCSS使っているFirefoxとかは属性セレクタが余裕で使えるわけで。

CSSやりつくした人は遊んでみてはいかがでしょう?何かコンテストとかやったら面白いかもしれませんね(他人事)。

以前の記事『IE7 Beta2を入れてみた』でCSSで指定したリンクの挙動がおかしいという記事を書きました。

少し調べていくと、どうやら原因は@importだったことが分かりました。

• この現象は2006年5月9日リリースされたIE7 Betaでは起こりません
  関連：IE7 Beta2 日本語版 を入れてみた

以下のページを参照してみてください。

• 直接CSSを読み込ませた場合
• @importでCSSを読み込ませた場合
• @importでCSSを読み込ませた場合 +α

ついでにCSS Rebootが見事に同じ症状を起こしています。少し安心。(CSSのリンク方法が変わったようです…)

続きを読む : IE7 Beta2でリンク周りの挙動がおかしい原因

ブラウザIE7のベータ版が一般公開されたそうなので早速インストールしてみた。
目的は一つ。CSSの実装状況を知りたかったこと。
まだベータ版ということなので完成系じゃないのは分かっているわけですが、自分のサイトがどのように表示されるか把握しておきたいわけです。

詳しくは

• MS、IE 7のベータ版を一般公開 - CNET Japan
• Internet Explorer 7

続きを読む : IE7 Beta2を入れてみた

2ちゃんねるのブログ板の「デザイン(構造も)がかっこいいblog」にうちのブログが晒されているようなので、誤解の無いように書いておきます。

晒されていることには、大変恐縮しております。晒しは自薦じゃないです。すみません。
毎日(たぶんPart1のころから)スレ覗いているんで自薦する勇気はないです。まだ自薦するには程遠いと思っていたので、今の状態で出てしまったのは非常に申し訳ない。思いっきりタグ書き間違えているところあったし…。

あと、一緒に晒されている1450km thREaDさんは自分が作ったものじゃないです。たぶんサイトをlintにかけてもらえると分かりやすいと思います。自分のlint & strict厨っぷりが分かりますので。

「ありがち」なのは悩みの種です。どうしてもブログの枠を抜け出せない状態です。もっと、海外のサイトみたいに斬新なデザインにしたいんですけど、いかんせん能が無いので…。

なにはともあれ、よろしくお願いします。

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

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

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

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

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

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

とりあえず、こちらをご覧ください。

• Fsiki Update Memo

Update Memoって実はカテゴリー分けしてあるんですけど、どうも分かりづらいわけです。
だったら、Javascript使ってクリックしたらクリックしたカテゴリだけ表示できるようにすればいいわけですよ。単純にclass名判別による表示・非表示。
ついでに、LogJETのRSS読み込んでサイドバーに吐き出すスクリプトも実装してみた。

続きを読む : XMLとJavascript わけわからん

昔から当たり前のように使われてきた"|"。
1行の文章(リスト)を区切るために使われてきたわけですが、例えば

ダイナマイト | 四国 | Comments(2) | Trackbacks(3)

のような感じ。
しかしこれって、よくよく考えるとHTMLで"見た目"を制御してるって感じるのですよ。
"見た目"はCSSって考えているんで、というより自分のサイトをXHTML1.0 Strictで作っているんで、ただ単にW3Cのチェックに引っかから無ければ良いというのが納得いかないわけですよ。

続きを読む : HTMLで"|"を入れるのは どうなのさ

ブログのカスタマイズとかサイトを作る時にCSS(Cascading Style Sheets)を使います。どこのブログサービスでも見た目を自分の思い通りに変えようと思うと、CSSをいじる必要が出てきます。最近CSS、CSSとよく聞くのもブログが爆発的に流行っているのが理由の一つだと思うんですけど、このCSS、打つのが面倒くさい。書き方をレクチャーしているサイトや本はたくさんありますけど、結局書くのは自分ですから。

そこで、便利なソフトを一つ。Bradbury Softwareが提供しているTopStyleはCSSを書くのをアシストするソフトです。詳しくはBradbury Softwareの解説を参考にしてください。思いっきり英語ですけど…。フリーウェアのTopStyle LiteとシェアウェアのTopStyle Pro があります。自分はLiteを使っているのですが、機能的にも満足しています。ただし英語がよく分からない場合ソフトを日本語化する必要があります。日本語化パッチはVectorのページからダウンロードできます。

私が特に気に入っている機能はCSSに記述していく時、一文字目を打つと以下に続く文字列がピックアップされるところ。例えば、「b」と打つと「background ,background-color , … , border , … 」と表示されて、それを選ぶとその文字列が打ち込まれます。携帯の予測変換みたいなものです。さらに、打ったプロパティに対する値もピックアップして表示されます。例えばプロパティが「border-style」なら値として「none , hidden , dotted , dased , …」という具合にプロパッティに相応しい値がピックアップされます。こんな値があったのか、なんて勉強になることもしばしば。

vertical-alignか?vartical-alignか?という綴りを忘れた時など便利ですし、何より長い文字列を打たなくて済む、そして間違いが無い。CSSの適用結果を同じ編集ウィンドウ内で確認できるのも便利な機能です。また、ブラウザのCSSの対応状況に応じてCSSを書くことも可能みたいです。

いい仕事してるねー。

CSS関連で面白い企画。CSS Reboot - May 1st 2005。内容は全部英語です。英語は得意ではないですがぼんやり翻訳すると…

概要

"The May 1st Reboot"とは5月1日にウェブデザイナー達が一斉に自分のサイトのデザインを変更するという企画だ。が、問題はこの企画にエントリーするサイトが非常にFlashを重用していることだ。確かに、Flashは地位を持っている。しかしながら、どこにCSSやウェブ標準があるのか。…以下省略

要するに、ウェブデザイナーたちがFlash使わずにCSSを使ってアクセシブルなサイトを五月一日に一斉にデザインしなおす。という企画みたいです。(日本語下手な上に翻訳なんてとても出来ません…orz)

とりあえず、紹介されているサイトがすばらしい。一見普通のサイトのようですが、CSSを巧みに使ってページがデザインされています。CSSをoffにしてページを見ると、テキストのみのページになります。つまり、HTMLは情報だけでCSSによってページがデザインされているということです。そのメリットは、テキストブラウザでも必要な情報をちゃんと伝えることができたり、CSSにリンクさせるだけで複数のページのデザインが一括で変更できたり、などなど。

何はともあれ、紹介されているサイトは美しくサイト作りの参考になります。
まだまだウェブの世界は広いです。

CSSを使ったサイト。

• 香川県
• 江東区
• OCN

ブログのスキン編集やサイト作りの参考までに。

味気ない本文をほんの少し改造する方法。
以下の記述をCSSに加えることによって本文最初の文字が大きくなり、あたかも欧米雑誌のようになります。記事の始まりが分かりやすくなるなどメリットありかと…。

/* MacIE5 除く \*/
要素i名 or class名:first-letter {
font-size:24pt;
line-height:120%;
float:left;
padding: 0 5px 0 5px;
}
/* end */

忘れてならないのは”/* MacIE5 除く \*/”の部分と終わりの”/* end */”です。
この擬似要素:first-letterを使うと要素内の最初の文字をあれこれいじれるわけですが、Mac版IE5では2バイト文字(日本語)が文字化けを起こします。

そこでコメントの閉じ*/の直前に"\"を入れるバックスラッシュハック(バックスラッシュエスケープ)という技を使い、Mac版IEでこの指定が働かないようにします。

そうすることでMac版IEでは普通の表示(文字装飾無し)になります。お忘れなく。詳しくはGoogleで。
値は必要に応じて微意調整するように…。

Mac版IEではコメントの閉じ*/の直前にバックスラッシュが出てくると次のコメントが出てくるまでの間の記述を読み飛ばすという癖を利用したものです。

参考になったかしら?

文頭に画像入れるとき工夫がいるみたいです。

以上メモ書き。