開発メニューを表示させる
safariのデフォルトでは「開発」メニューは非表示になっているので、まず表示させます
「環境設定」の「詳細」タブで「メニューバーに"開発"メニューを表示」にチェックを入れると表示されます
Webインスペクタの表示
開発メニューからズラリと並んだ項目の"Webインスペクタを表示"をクリック
するとこんな感じで開きます
このブログのトップページで撮ったんですが、前の記事が映り込んでチョットややこしいですが右側がWebインスペクタです。
表示は下側にも、又は独立させることもできますが、今回はコレが使いやすいのでこうしときます。
メニューを検証
この前メニューを弄ってどうにか形になってホッとしていたものの、 iPhone で見たら
なんとも間が抜けている！
又、あの特殊文字コードと対決か..となる前にインスペクタで見てみることに
その空白の箇所を特定して表示させてみる
①の「要素選択を開始」を押して②の空白の箇所の上をクリック！
今クリックした箇所がブルーで表示されました
その下を見てみると、<br> という改行タグが入っている
これ多分メニューを弄った時に見易いように改行しながら進めたので、こんなタグが入ってしまったものと推測。
取り敢えず消してみる
br タグをクリックして delete キー、もしくは
右クリックから「削除」→「ノード」でも可、
そして空白がなくなったことを確認
続けて青で囲んだ箇所も同じように消して、無事空白がなくなりました
バックの色を変えてみる
ついでにバックグランドのカラーを変更してみます。
又①を押して「body」の箇所をクリック
右の「スタイル」タブの「background」で色指定しても良いし丸で囲んだところをクリックすると色見本が出てくるので気に入った色を選ぶこともできます。
画像のURLをコピーする方法
画像のURLを探すのにもこのインスペクタが活用できます。
「リソース」から「イメージ」フォルダを選ぶと
この様に一覧表示されるので、任意の画像をクリックするとプレビューされます
右クリックの「リンクをコピー」で画像のURLがコピーできます
後、開発メニューからキャッシュの削除もできます
気軽に検証できて、すぐに反映を見ることが出来るので便利ですね
0 comments