スマホサイト(スマートフォンサイト)のソース(HTML)を見る方法
1年以上前の記事です。内容が古い可能性があります。
最近ではPCサイト並に重要視されるようになってきたスマートフォンサイトですが、PCサイトのように思うように作れないのが難点。
PCサイトの場合は今のサイトのソースを見ながらHTMLやCSSを編集していくことができますが、スマホの場合はそれができないんですよねぇ。
と、つい最近まで思ってました。
が、スマホでも簡単にソースを確認することができたんです。
以下、その手順。
PCでソースをみるときはブラウザのメニューから「表示」→「ソース」を選択したり(IE)、
右クリックで「ページのソースを表示」を選んだり(Chrome)すると思います。
「Google Chrome」を使っている人はそのときにブラウザのアドレスバーを見てみて下さい。
そこにヒントが隠されています。
たとえば、「Yahoo! JAPAN」のトップページが表示されている時のアドレスバーは「http://www.yahoo.co.jp/」ですね。
これのソースをみるとアドレスバーが「view-source:http://www.yahoo.co.jp/」と変わっているのがわかると思います。
要はそれ!
つまり、スマホの場合でもURLの前に「view-source:」と入れればいいということになります。
それでは実際やってみましょう。
- まずはソースを見たいサイトにいってアドレスバーを確認します。
- アドレスバーの前に「view-source:」と書き足して(ここがちょっと面倒)エンター(→)をタップ。
こんなかんじでスマホ版のHTMLのソースを見ることができます。
実は、スマホの表示確認だけであればPC版の「Google Chrome」のF12を使ったエミュレーター表示で可能なんです。
(もっとも実機を使っちゃうのが一番いいのでしょうけれど)
がしかし、ソースを表示するとPC版のソースになってしまって、スマホ上のソースは確認できない。
このやり方だと、スマホ用に整形されたHTMLが確認できるので、スマホ版のCSSの設定等をすることが容易にできるんです。
で、入力が面倒な人はこいつをブックマークレットに設定しておくと便利です。
↓こちらに作っておきました。
□ このページのソースをみる
スマホのブックマークにブックマークレットを登録する手順はまた別の記事で解説します。
まずはタップしてみてください。
このページのソースが表示されるはずです。
アドセンス広告メイン
関連記事
-
-
年賀状印刷「高精細」と「きれい」の違いって?
1年以上前の記事です。内容が古い可能性があります。家庭での年賀状印刷もずいぶんと …
-
-
会社を辞める方法
1年以上前の記事です。内容が古い可能性があります。何かとこういった記事には反応し …
-
-
アメブロ(アメーバブログ)をちょっといじってみた
1年以上前の記事です。内容が古い可能性があります。先日、アメブロを本格的に始めた …
-
-
熊谷ハッカソン@立正大学まとめ
1年以上前の記事です。内容が古い可能性があります。6月6日、7日と立正大学で行わ …
-
-
検索ワード順位アゲアゲ大作戦 #3 リンクファーム検索大作戦
1年以上前の記事です。内容が古い可能性があります。夏休みに入りましたが引き続き頑 …
-
-
WordPress(ワードプレス)の管理バーの高さを無視させたり、非表示にさせたりする方法
1年以上前の記事です。内容が古い可能性があります。WordPressでデザインを …
-
-
Windows XPで「メイリオ(Meiryo)」フォントを使おう
1年以上前の記事です。内容が古い可能性があります。つい最近まで知らなかったのだが …
-
-
トップページにプルダウンメニューを入れてみた
1年以上前の記事です。内容が古い可能性があります。デザインリニューアル最終章とし …
-
-
Webの利益率
1年以上前の記事です。内容が古い可能性があります。Webの利益率ってどれくらいな …
-
-
「ヨメレバ」が便利そうなので色々なアフィリエイトに手を出してみた(e-hon / bk1編)
1年以上前の記事です。内容が古い可能性があります。だいたい有名なアフィリエイトは …