search :

archive :



« JavaScript, HTML5のツール集 | トップ | 制作実績ページをアップデート »

キャプチャ サイズ スクリーンショット ブラウザ

_Web Service | March 13, 2012, 14:23
はてなブックマーク

コーポレートサイトをアップデート中で、制作実績を掲載する際に、ブラウザのサイズ(ウィンドウサイズではなく表示領域のサイズ)を指定してブラウザをリサイズしたいと思って、できたのでメモ。

FirefoxのWeb Developerを使います。


Browsersize01

「サイズ変更 / ウィンドウサイズを変更する」を選択


Browsersize02

「表示領域のサイズ変更」にチェックを入れて、サイズを指定して「OK」


これで、あとはscreengrabでVisible portionを保存してリサイズしたりすれば、綺麗に画像を作成できます。

特に、ブラウザフルサイズのサイトのスクリーンショットを撮るときに、困っていたんですよね。width, heightの比率を1.5か1.6にしたいのに、手動ではできないので。

ちょっと比率のメモ。

【1.5】
540 360
1080 720
1200 800
1350 900
1470 980
1620 1080

【1.6】
560 350
1120 700
1280 800
1440 900
1680 1050

※スクロールバーが表示されるページの場合は、widthに15pxプラスする。


ちなみに、MacのCinema Displayの解像度は、比率1.6ぴったりになってるんですね。

スクリーンショットの比率は、通常のブラウジングに合わせて黄金比に近い1.6(表示領域はもう少しheightが狭まるので1.6以上になりますが)にしようと思ったんですが、白銀比(1.4程度)との中間の1.5が見栄えがいい感じなので、そうする予定です。

Trackback URL :

プロフィール

プロフィール

WEB制作・ブランディングを主軸とした、株式会社クリーム代表取締役。

案件につきましては、「お問い合わせページ」からお気軽にご相談ください。

Recommend

  • Josef Muller-Brockmann: Pioneer of Swiss Graphic Design
  • Who Owns The Water?
  • Helvetica: Homage to a Typeface
  • Corporate Diversity: Swiss Graphic Design and Advertising by Geigy, 1940-1970
  • Typography (Graphic Design in Context)
  • +81 voyage or Tokyo Graphic passport World Tour---At Center Pompidou in Paris and 3331 Tokyo
  • WONDERWALL ARCHIVES 01

archive :