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

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

アウトライン

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

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

ブロック構造

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

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

インライン構造

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

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

クラスとID

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

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

表(table)の構造

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

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

目次

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

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

おまけ ソースの検証

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

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

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

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

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

終わりに

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

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