新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

スマホサイト(スマートフォンサイト)のソース(HTML)を見る方法

   

  • このエントリーをはてなブックマークに追加

最近ではPCサイト並に重要視されるようになってきたスマートフォンサイトですが、PCサイトのように思うように作れないのが難点。
PCサイトの場合は今のサイトのソースを見ながらHTMLやCSSを編集していくことができますが、スマホの場合はそれができないんですよねぇ。

と、つい最近まで思ってました。

が、スマホでも簡単にソースを確認することができたんです。
以下、その手順。

標準モードと互換モードについて:HTMLタグ辞典 - HTMLタグボード

スポンサーリンク
 

PCでソースをみるときはブラウザのメニューから「表示」→「ソース」を選択したり(IE)、
右クリックで「ページのソースを表示」を選んだり(Chrome)すると思います。
「Google Chrome」を使っている人はそのときにブラウザのアドレスバーを見てみて下さい。
そこにヒントが隠されています。

たとえば、「Yahoo! JAPAN」のトップページが表示されている時のアドレスバーは「http://www.yahoo.co.jp/」ですね。
これのソースをみるとアドレスバーが「view-source:http://www.yahoo.co.jp/」と変わっているのがわかると思います。

要はそれ!

つまり、スマホの場合でもURLの前に「view-source:」と入れればいいということになります。
それでは実際やってみましょう。

  1.  まずはソースを見たいサイトにいってアドレスバーを確認します。スマホサイトのソース表示01
  2. アドレスバーの前に「view-source:」と書き足して(ここがちょっと面倒)エンター(→)をタップ。
    スマホサイトのソース表示02
    こんなかんじでスマホ版のHTMLのソースを見ることができます。

実は、スマホの表示確認だけであればPC版の「Google Chrome」のF12を使ったエミュレーター表示で可能なんです。
(もっとも実機を使っちゃうのが一番いいのでしょうけれど)
がしかし、ソースを表示するとPC版のソースになってしまって、スマホ上のソースは確認できない。

このやり方だと、スマホ用に整形されたHTMLが確認できるので、スマホ版のCSSの設定等をすることが容易にできるんです。

で、入力が面倒な人はこいつをブックマークレットに設定しておくと便利です。
↓こちらに作っておきました。
□ このページのソースをみる

スマホのブックマークにブックマークレットを登録する手順はまた別の記事で解説します。
まずはタップしてみてください。
このページのソースが表示されるはずです。

 - Webデザイン, デザイン, 覚え書き , , ,

アドセンス広告メイン

Message

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

  関連記事

no image
リンクファーム(検索ディレクトリ)の威力

以前、ここでリンクファームらしきサイトを紹介しましたが、 ページランクが当時たし …

上野始発限定「高崎線」&「宇都宮線」時刻表

熊谷(以北)に住んでいる通勤族、通学族にものにとって、電車で座席に座れる、座れな …

docomoスマホのSPモードメールは初期設定ではWi-Fi経由で送信できない

docomo(ドコモ)のスマホを買って10日以上、こんなことになっているなんて気 …

livedoor Blog(ライブドアブログ)のスマートフォン(スマホ)対応レイアウトで広告収入を得る方法

時代はスマホですね。 当ブログもおそらくスマホによるPVが増えてきているんじゃな …

これぞHTML5!「藤岡弘、」ファンサイトのクオリティが凄すぎる

過去には仮面ライダーなどでも活躍していた俳優、藤岡弘、(旧芸名「藤岡弘」)さんの …

no image
Mac⇔Win間でIllustrator8のデータをやり取り

Mac⇔Win間でIllustratorのデータをやり取りしなければならなくなっ …

no image
Googleにインデックスさせないリンクの入れ方

Googleなんでさほど問題はないとは思うんだけど、 Yomi-Searchベー …

携帯サイト(ケータイサイト)の作り方Part2

携帯サイト作成に関するすばらしい記事を見つけました。 □モバゲーのような携帯サイ …

僕が感じた緊急地震速報の媒体に寄る速さ比較

このところ、緊急地震速報を聞かない日は無いんじゃないかと思うくらい日々、緊急地震 …

いまどきの履歴書サイズは「B4二つ折り」ではなく「A4」

訳あって、履歴書などを書いているのですが、最近ではどの企業も職務経歴書も添付する …