読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

ユーザーCSSでiframeを簡単に判別!ウェブサイトの表示が遅い原因を特定しやすいよ

web制作 ソフトウェア CSS Chrome

ユーザーCSSでiframeにoutline

ウェブサイトをぱっと見ただけでは、各要素がiframeかどうか分からない。ユーザースタイルシートでiframeを装飾すれば一目瞭然。他人のサイト閲覧時にも便利。

概要:ウェブ制作者向け

ごめん、ウェブ制作者以外には意味不明な言葉がばんばん出てくる。

iframeにCSSでoutlineを表示すると、iframeの判別がしやすいよ、って内容。

iframeをブロックしても一目瞭然

まずは具体例。iframeをブラウザ拡張機能などでブロックすると通常は何も表示されない。下図内のはてなブックマークやその右のグレー点線枠がユーザーCSSで後付されたもの。ブロック後でもわかりやすい。

上図に関しては次のページで詳述している。

低スペックPCでGoogle Chromeを高速化!重い原因を解消する改善方法 - はぴらき合理化幻想

グレー点線枠がないとブロックしたiframe(インラインフレーム)があったのかどうかが分かりづらい。

ユーザースタイルシートを設定

Google Chromeなら拡張機能の「Stylebot」を使うと便利。基本的な使い方は次のページで確認できる。

ユーザースタイルシートを編集できるChrome拡張機能stylebotの使い方 - はぴらき合理化幻想

今回は、どのサイトのiframeでも装飾されるようにGlobal StylesheetにCSSを追加する。拡張機能一覧でStylebotのオプションをクリック。

chrome://extensions/

chrome拡張機能stylebotオプション

Stylesをクリックし、Edit Global Stylesheetをクリック。

chrome拡張機能stylebotオプション2

筆者と同じ装飾でよければ、次のコードをコピペしSaveで完了。

iframe {
    outline: dotted 3px #bbb;
}

chrome拡張機能stylebotオプション3

当ブログを筆者のchromeで表示したのが下図。ページ上部のナビと広告にiframeが使われているのが一目瞭然。広告が入れ子のiframeなのも分かる。PCでご覧ならクリックで拡大可能。

Google AdSense停止から復活再開にはラベル「広告」か「スポンサーリンク」 - はぴらき合理化幻想

iframeをユーザーCSSで装飾するメリット

  • iframe(インラインフレーム)を簡単に判別できる。
  • あらかじめiframeと分かっていれば、要素の検証の際に「なぜこんなところにbodyタグが?」というように戸惑わない。
  • ページ内で表示が遅いものが何かわからないときに、原因はiframeかなと推測できる。

まとめ

ちょっとした工夫でよりよい制作環境を築けるね(^^)

ブログ記事作成を効率化!サムネイル画像付きのリンクを2クリックで作成 - はぴらき合理化幻想

amazon売れ筋を激安時に買うなら、過去の値段を自動でグラフ化して検討しよう - はぴらき合理化幻想

Amazon.co.jp: HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

Amazon.co.jp: ローラーブレード インライン コンポジットフレーム メンズ

てすとてすと