Webサイトのデザインやコーディングを行うとき、見本となる画像が必要です。そこで、モバイル表示やタブレット表示のスクリーンショットをどうやって用意するのか疑問に思っていませんか？
サイト全体の縦長ページのスクリーンショットを撮るには、検証ツールを使います。手順は非常に簡単なので、覚えておきましょう。
この記事では検証ツールを使って縦長ページのスクリーンショットを撮る方法を解説します。
- 検証ツールで縦長ページのスクリーンショットを撮る方法
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
1.検証ツールを開く
Webページで右クリックするとウィンドウの1番下に「検証」という文字があります。この「検証」をクリックすることで検証ツールを開けます。
検証ツールはショートカットキーでも起動可能です。
検証ツールを開くショートカットキー
- Macの場合は⌘(Command) + Opt + I
- Windowsの場合はCtrl + Shift + I
2.コマンドメニューを開く
コマンドメニューを開きます。コマンドメニューとは、検証ツールに搭載されている詳細機能を呼び出すメニューのことです。
Macの場合は⌘ (Command) + Shift + Pを、Windowsの場合はCtrl + Shift + Pを押してください。
すると、画像のようなウィンドウが表示されます。
3.「フルサイズのスクリーンショットをキャプチャ」を選択
検索窓に「screen」と入力すると、スクリーンショットに関連する機能が表示されます。
この中で、「フルサイズのスクリーンショットをキャプチャ」を選択します。
画面幅を変えることで、モバイル・タブレット・PCそれぞれのサイズの画像を用意できます。画面幅を変えるには、下の画像の赤枠で示した部分を使います。
「Dimesions」という部分をクリックすれば、iPhoneやiPad、surfaceなどデバイスごとの画面幅に設定できます。テキストの右隣の数値を変更して任意の画面幅に設定することも可能です。
必要な画面サイズの画像を用意しましょう。
関連記事
画面幅の変更に対応することをレスポンシブ対応といいます。レスポンシブ対応はWeb制作に必須の技術であるため、身につけておきましょう。
レスポンシブ対応については、こちらの記事で詳しく解説しております。併せてお読みください。
4.画像をダウンロード
「フルサイズのスクリーンショットをキャプチャ」という機能をクリックすると、縦長ページのキャプチャ、およびダウンロードが開始されます。ダウンロードフォルダに表示しているページのスクリーンショットが保存されます。
5.画像サイズを圧縮
ページ全体のスクリーンショットはファイルサイズが大きいため、サイズを圧縮しておきましょう。画像サイズが大きいままだと、ファイルが添付できなかったり、WordPressにアップできなかったりと、様々なエラーの原因となります。
画像の圧縮はWebツール「I LOVE IMG」を使うのがおすすめです。簡単な操作で画像サイズを圧縮することができます。
これからコーディングの練習を行う方へ
これからコーディングの練習を行うにあたり、どのように練習すればよいかわからずに悩んでいませんか？コーディング練習にお悩みの方は、こちらの記事が参考になります。ぜひお読みください。
また、「Web制作を独学で学習することに限界を感じている」「スクールに通ってみたい」という方にはZeroPlus Gateの受講がおすすめです。
ZeroPlus Gateでは、30日間のプログラムでWebサイトの制作を学べます。コーディングだけでなく、検証ツールの使い方のような周辺知識まで徹底的にサポート。受講料は無料ですので、興味のある方はお申し込みください！
まとめ
検証ツールを使えば、縦長ページのスクリーンショットを撮ることができます。
縦長ページのスクリーンショットは、デザイン作成やコーディングの見本となります。自分でコーディングするときはもちろん、クライアントや会社の上司に説明するときにも役に立つので、用意する方法を知っておきましょう。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
