絶対他力

凡人の凡人による凡人のためのWebサービス開発

自作HTMLのスクリーンショットを撮る方法が分かりました_PWDD-160115

      2016/03/23

チームPocoです。
ポコ帳ワイヤーフレーム開発日記(PWDD)です。

前回の日記で、自作したHTMLのiPhoneのスクリーンショットが撮れなくて困ってましたが…
色々ググった結果、ブラウザのChromeに付属しているデベロッパーツールを使えば良い事が分かりました。

iPhone本体を使って実行するのは、かなり面倒らしく…
見た目を確認する程度なら、上記デベロッパーツールのエミュレータで実施するのが簡便で良いみたいです。

また、スクリーンショットはAwesome Screenshotという拡張機能を使うと良いようです。

早速、前回作成したHTMLで試したところ、↓のようになりました。
※デベロッパーツールの設定:iPhone6

↓↓↓↓スクリーンショット↓↓↓↓
HTMLスクリーンショット↑↑↑↑スクリーンショット↑↑↑↑

予想通りですが…CSSをまだ作成していないので「ただ文字が並んでるだけ」の状態です。
※厳密には、ブラウザ(Chrome)のスタイルが自動で適応されてるらしいです。

また、デベロッパーツールとAwesome Screenshotの使い方は、↓のサイトを参考にしました。

 

次回以降、CSSを作って見た目を調整していく予定です。
最終的な目標は、↓のような見た目にする事なのですが…まだまだ先は長そうです。
コツコツ頑張っていきます。

3分割フォーマット

本日のPWDDは以上です。

 - PWDD