niwadesign

ホームページ制作のネタ発信

html iPhone Safari

スマホサイト(iPhone)のソースコード(htmlソース)確認方法

投稿日:

スマホサイトを制作する時に、たまに実機でjsの挙動などソースコード(htmlソース)を確認したい時があります。
そんな時、役に立つ小技をご紹介。

Bookmarklet(ブックマークレット)を使った方法

1.iPhoneのSafariを起動。

2.Snoopyのサイトにアクセス http://snoopy.allmarkedup.com/

3.「2. Copy all of the code in the following textarea to the clipboard: 」のjavacsriptをコピー

snoopy

4.どのサイトでもいいので新規でサイトをブックマーク(その際わかりやすくするためにタイトルを変更)

ブックマーク
※タイトルをソースコードに変更

5.4番で登録したブックマークを編集(URLが入っているとことに先程コピーしたjavascriptをペースト)

ソースを貼り付け

以上で準備が完了しました。

次にhtmlのソースコードを見たいサイトにアクセスし、ブックマークから先程保存したブックマークをタップすると、下の画面のようなボックスが表示され、ソースコードを確認することができます。

ソースコード

次回はMacのSafariを使った方法をご紹介。

-html, iPhone, Safari
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

Dreamweaverでよく使うショートカット

普段ボクがコーディングする上でよく使うショートカットの紹介 ⌘(コマンド)+1〜6 h1〜h6 ⌘(コマンド)+Shift+P pタグ ⌘(コマンド)+B strongタグ ⌘(コマンド)+alt+T …

タグの機能

相対パスで記述されたURLのベース(基準)をhead内で指定すると画像やリンク先のパスがベース(基準)で指定されたURLを基準に表示されます。 今日初めて知りました。 <head> &lt …

iPhone Safariのsubmitボタンのデザインを変更する方法

通常CSSでbackgroundやborder-radiusをかけることによってスタイルを定義することができますが、 iPhoneSafariの場合は最初にリセットする必要があります。 #hdSear …

Chromeのディベロッパーツールを別ウィンドウにする方法

最近PCを買い替えていつものようにディベロッパーツールを使おうと開いたら、ブラウザから分離できない。。。 調べてみたら、下右に移動させるアイコンを長押しすると別ウィンドウのアイコンが表示される。 わか …

Mac SafariでのSSL証明書確認方法

ブラウザ右上にある小さな鍵マークをクリック。 小さすぎて分かりにくい。。。 Mac SafariでのSSL証明書確認方法 Mac SafariでのSSL証明書確認方法 ちなみに、 EV SSL証明書の …