Web制作にとっても役立つOperaの便利な使い方

通好みというか一部で熱狂的な人気があるOperaなのですが、実はこれデフォルト状態でWeb制作に使えるとても便利な機能がついているのをご存じでしょうか？

もしOperaをインストールしていて、単純に動作チェックにしか使っていないなら実にもったいないと思います。私自身Blogを改造するときにとても役に立ちましたし、それ以外でも気になるサイトを手軽にチェックするのに役に立ちます。しかも初期状態で機能として搭載されていますから、別途プラグインなどを入れる必要もありません。

ということで、今回はあまり知られていないかもしれないそんなOperaの便利な機能を紹介します。Opera何それ？という方も、気になったら一度インストールしてみてはいかがでしょうか。

※但し書きが無い限り、機能はすべてメニューの「表示」→「スタイル」からONにします。

アウトライン

各要素の枠線を表示させて、可視化することができます。divは赤、pは黒、定義リスト(dlやulなど)は青などと色分けされています。

CSSで色を付けたり線を付けたりしなくても、要素の大きさや並びがわかるようになるので便利です。　

ブロック構造

ブロック要素をページ重ねて表示させることができます。どこにどのブロック要素が使われているのか即座にチェックできますね。

空のdivなんかを探すのにも役に立つかもしれません。

インライン構造

上記のブロック要素と同じく、インライン要素をページに重ねて表示できます。

このBlogではcodeやins、delぐらいしか使われていませんけどね。

クラスとID

名前のとおり、設定しているクラス名とID名が重ねて表示されます。

画像では少々見にくいですが、クラスが黒、IDが青で表示されます。

表(table)の構造

テーブルの構造(タグ)をそのまま表示します。最近はテーブルレイアウトのサイトはそんなに見かけなくなりましたが、そういうページを解析したり修正したりするとき役に立つかもしれません。

別の機能として「表(table)要素を無効にする」でテーブルを取り払うことも可能です。

目次

各ページで使われている見出しタグ(h1～h6)を一目でチェックすることができます。

適切に見だしタグが使われているかが簡単に調べられますね。

おまけ ソースの検証

厳密にはOpera単体の機能ではありませんが、標準機能なので紹介しておきます。

(Windowsなら)「右クリック」→「ソースの検証」で現在開いているページがHTMLの文法的に妥当かどうか調べられます。(HTMLの文法チェック)

ソースの検証を選択して実行すると……

このように結果が表示されます

単純なケアレスミスも見つけられますから、積極的にチェックしてみるといいかもしれません。

終わりに

個人的に「よく使う」「便利な」機能を優先的に紹介しました。上記のスタイル表示はすべて同時に行うことができますので、アウトラインを表示しながらIDとクラスをチェックし、ブロック要素を調べるということも当然できます。(一部きちんと表示されないものもあり。)

メニュー自体には他にも機能がありますので、興味がある方は色々試してみてください。