Opera9でいつでもCSS Naked

Posted by せれ on 4 月 14, 2007

つい先日、CSS Naked DayというWebのイベントがあったそうです。

詳しくはコチラ。

CSS Naked Day（本家；英語）

ハダカのワタシを見て!! - CSS Naked Day | caramel*vanilla

今更ですがCSS Naked Day2007参加サイトをまとめてみた | caramel*vanilla
（日本語サイト実施状況がまとめられています）

4月5日の「CSS Naked Day」に協賛して弊社サイトを裸にしました : アークウェブ ビジネスブログ
より引用。

ウェブページのデザイナーに対する尊敬を示し、今週の木曜日、ブログのスタイルシートを無効にしよう。検索エンジンがブログを訪れる際に見ている世界を示そう。多くの視聴障害者（検索エンジン）がブログで「見ている」景色を読者にも見せてあげよう。CSSはウェブページのデザイナーにテキストの裸のページを利用し、芸術的な作品に変える力を与えている。そういうわけで、CSSを一日だけ取り払い、彼らの芸術性に敬意を示そうではないか。4月5日のCSSネイキッド・デイに協賛し、自分のブログが服の下も美しいということを世界にアピールしよう。

このサイトは、WordPress用テーマ配布サイトで公開されたテーマをただ適用しているだけで、個人の努力も工夫も創意もまったくないので、畏れ多くて一見学者としてみていただけなのですが、先日Opera9.2にした時に、関連した項目を発見したので、メモ。

Opera ヘルプ: 開発者用ツール

Opera には、Web 開発者を支援するためのツールがいくつか含まれています。

開発者用コンソールは、開発中またはデバッグ中に Web ページの分析やインタラクティブな変更を行うためのツールです。

開発者用コンソールを開くと、分析対象の Web ページの最上部に小さなウィンドウが表示され、DOM、JS、CSS、HTTP および About という 5 つのタブが表示されます。

開発者用コンソールについての詳細は、Dev.Opera に記載されています。

で、Dev.Opera なんですが、ぜーんぶ英語ですので、英語ペラペラの方は問題ないんでしょうが、
このページをFirefox＋Japanize拡張で開くとほぼすべて翻訳された状態で表示されます。
※加筆：Opera＋Japanize UserJSの方法でも翻訳されたページが表示されました。詳しくはココとココをご参照ください。 Japanize凄すぎ！！

Dev.Opera ＝ Tools - Opera Developer Community

では実際の導入手順。

(1)Opera9以上で、メインメニュー＞ツール＞詳細ツール＞開発者用ツールをクリック
すると、上記Tools - Opera Developer Community ページが開く。
（このページのリンクを開いてもOK）

(2)ページ中の「Developer Console」のリンクをOperaのツールバーにドラッグします。
確認メッセージが表示されるのでOKをクリック。
フルセットはいらない。単体の機能のみ必要なら必要に応じて「DOM Console」、「CSS Editor」、「DOM Snapshot」を追加すればよい模様。

(3)CSS Nakedで表示させたいページを開きます。

(4)「Developer Console」の場合は今追加したツールバーのボタンをクリックすると、別ウィンドウが表示されます。中にいくつかタブがあるのでCSSタブをクリックします。
「CSS Editor」のみ導入した場合、タブはありません。（下記画像はDeveloper Console）

(5)Webページに適用されたCSSの一覧が表示されます。中に「Disable」ボタンがあるのでクリックすると、そのCSSが無効になり全部のCSSを無効にすれば、CSS Nakedな状態がいつでも表示できます。

実際には、CSS Nakedにするより、サイトの構造やCSSファイルの内容を確認して開発や検証に役立てるツールではありますが、なんせ素人なものですから、最近見かけたCSS Nakedネタに便乗させていただきました。（すでに乗り遅れてますがｗ）