モバイル向けデザインをiPhoneでテストするなら、SafariのWebインスペクタが便利だよ

公開日: : 最終更新日:2013/08/15 ブログ運営

    

WordPressなどでモバイル向けデザインを作ってiPhoneの実機でテストする時に、SafariのWebインスペクタを使うと便利です。

スポンサード リンク

iPhone側で設定をおこなう

まずはiPhone側の設定を行いましょう。iPhoneの設定で、「Safari」→「詳細」の中にある「Webインスペクタ」をオンにします。

    

Mac側のSafariで設定を行う

次にMac側の設定を行います。Mac版Safariのメニューから「Safari」→「環境設定」をひらき、「詳細」の中にある「メニューバーに開発メニューを表示」にチェックを入れます。

    

Mac側のSafariで「Webインスペクタ」を表示する

MacとiPhoneをUSBケーブルで接続し、iPhone側のSafariでチェックしたいWebページを開いたら、Mac側のSafariのメニューから「開発」→「デバイス名」→「チェックしたいWebページ名」を選択します。

    

DOMツリーをチェックする

Mac側のSafariで「Webインスペクタ」ウィンドウが表示されるので、「ソースコード」をクリックして「DOMツリー」に切り替えてみましょう。

    

特定の要素をクリックすると、

    

iPhone側のSafariで、対応する箇所がハイライト表示されます。

    

書き換えた結果をリアルタイムに確認可能

Mac側のWebインスペクタで内容を書き換えると、

    

iPhone側のSafariへリアルタイムに反映されます。これは便利ですねー。

    

ネットワーク要求にかかっている時間をタイムラインで確認できる

また、各ファイルのネットワーク要求にかかっている時間などをタイムラインで確認することもできます。

    

アキオはこう思った。


    

この機能は、WordPressなどでモバイル向けテーマを作るときなんかに、強い味方となってくれます。ブログのテーマをカスタマイズ・リニューアルする時などに活用してみてください!

    

関連記事

blogger-apple-pie-night-20130529-191746.jpg

ブロガーズアップルパイナイトを開催します。あの方もゲスト参加!

Photo : The Food Pornographer      今月5月2

記事を読む

skitched-20130302-115753

[書評]ブロガーも必読。MEDIA MAKERS―社会が動く「影響力」の正体

     こんにちは。Kindle Paperwhiteで本を読みまくっているアキオ(

記事を読む

20140330-015600.jpg

他のブログなどからリンクが張られたことをチェックするには、Googleアナリティクスのトラックバックレポートが便利

     他のサイトやブログなどからリンクが貼られたことをチェックするには、Googl

記事を読む

20140218-150532.jpg

ブログでいかに人生が変わったか? ブロネクに出演した感想など

2月6日、ブロガーによる映像番組「ブロネク」に出演させて頂きました。 ブロネクに出演し

記事を読む

pro-blogger-20131215-154903.jpg

プロブロガーのアクセス・収入アップテクニックを知りたいなら、この本を読もう

     こんにちは。アキオ(@akio0911)です。 今日は、プロブロガー(

記事を読む

skitched-20130408-163001

渋谷のコワーキングスペースでポテトをつまみつつブログ書くイベントやります

ひさびさに渋谷のコワーキングスペース「Lightningspot」に行って、中の人である中川

記事を読む

20140205-213506.jpg

検索流入の激減などに備えよ!ブロガーズリスク分散勉強会を2月19日に開催します!

     検索流入の激減、アフィリエイト料率の引き下げ、使用しているブログサービスの仕

記事を読む

no image

トラフィックを増やして人気ブログになるための28種の方策

メディア・パブ: トラフィックを増やして人気ブログになるための28種の方策英国のWebデザイナーRi

記事を読む

20140111-103342.jpg

ブログ記事冒頭の挨拶リンクはどの程度クリックされているのか調べてみた

     こんにちは。ブログ「拡張現実ライフ」のアキオ(@akio0911)です。

記事を読む

20131220-160902.jpg

アキオ流!EvernoteとGoogleアナリティクスでブログを1日1改善!

     こんにちは。アキオ(@akio0911)です。 記事タイトルの通りなん

記事を読む

20140714-144729.jpg
サンフランシスコのピア39にあるチャウダーズでクラムチャウダーを食す!

アップルの開発者向けイベント「WWDC2014」に参加するため

slooProImg_20140714064146.jpg
ミスドのカルピスドーナツとカルピスポンデリングを食べてみた!

ミスドで期間限定のカルピスコラボ商品「カルピスドーナツ」と「カルピ

slooProImg_20140713230358.jpg
十三カレー計画で牛すじカレーネギのせを食す!(大阪・十三)

「iPhoneアプリ開発キャンプ@大阪」のランチで、十三カレー計画

slooProImg_20140712085918.jpg
大阪・難波の加寿屋 法善寺でかすうどんを食す。ランチタイムはおにぎり2個まで無料!

大阪・難波の加寿屋 法善寺 (かすうどん KASUYA)で、かす

20140625-114250.jpg
ライブドアブログで運営していた「あきお商店」を「卵は世界である」に改名しました

少し前からライブドアブログで「あきお商店」というブログをやって

→もっと見る

PAGE TOP ↑