質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.45%

  • Photoshop

    123questions

    Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

レスポンシブ等でいきなりCSSでデザインを作る場合、 画像を適切なサイズに設定する方法

解決済

回答 3

投稿

  • 評価
  • クリップ 2
  • VIEW 1,175

aki_

score 4

初歩的な質問ですみません。
例えばレスポンシブデザインなどで、
カンプなしで写真の画像の書き出しを行わず
いきなりCSSでデザインを作る場合、
画像を適切なサイズに設定する方法を
ご教示いただければと存じます。

今までPhotoshop等で
カンプを作るというのが当たり前になっていたので、
基準になるサイズに合わせて書き出せばよかったのですが、
レスポンシブの場合、基準となるサイズがわからなくなってしまいました。

普通にカンプを作るのと同様、ブラウザのサイズ(例:960px、768px、375px等)に
合わせれば問題御座いませんでしょうか。
そもそも手順としては
「photoshopで写真・イラストなどの画像を開く→サイズ変更・トリミング→加工→完成」
でよろしいのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

Photoshopには最近、同じファイルから解像度の違うファイルを一度に書き出す機能が実装されました
「ファイル>書き出し>書き出し形式」から確認してみて下さい
縦横比やレイアウト・トリミングが変わらないならこっちを使った方が効率が良いでしょう

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/17 19:14

    ありがとうございます!
    いい機能ですね。私もCCほしいですね...

    キャンセル

+2

デバイスにあわせた画像の出しわけができます。

【HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King】
http://kia-king.com/blog/tutorial/responsive-images-with-srcset/

【srcset属性について - Qiita】
https://qiita.com/C058/items/643a9ff2d23dfe3a0b37

【なんでもかんでも<picture>要素を使えばいいわけじゃない!レスポンシブ・イメージ実装の際の注意点 | Rriver】
https://parashuto.com/rriver/responsive-web/picture-srcset-use-case

【srcset と sizes】
https://terkel.github.io/srcset-sizes/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/17 19:16

    ありがとうございます!
    出し分けについては、私も考えているところでした。解像度によって、出し分けしたほうが良さそうですね。

    キャンセル

checkベストアンサー

+1

表示の問題だけ考えるなら、解像度の上で許されるギリギリの小さい画像を作ればいいと思います。表示サイズはファイルの実サイズではなくCSS等の設定で決めるもので、photoshopでの処理とは別に考えるべきことです。

追記:
最近はCSSの性能が上がって、いちいちphotoshopで作り直さなくても表示をずいぶんいろいろと変更できます。私も最近知ったのですが、グラデーションとかCSSだけで実現できるんですよね。
表示サイズに関していえば、たとえば、
https://allabout.co.jp/gm/gc/400630/
に書いてある

img { width: 100vw; }


という設定を使うと、PCの大画面だろうがスマホの縦置きだろうが横置きだろうが、そして用意した画像の幅が10ピクセルだろうが10000ピクセルだろうが、ブラウザの横幅ぴったりのサイズの画像が表示されることになります。このようにファイルのサイズと表示サイズは別物なので、後者が重要なのにphotoshopでの出力設定に悩むのは意味がないこともあります。この辺はよく区別して検討したほうがいいでしょう。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/17 13:10

    ありがとうございます。
    確かに、CSS側でサイズは決めていますよね。
    ただ、PC、スマホ、タブレットだと画面の解像度が違うため、
    画像を3段階くらい用意はする必要はあるんじゃないかと考えていたのです。

    横幅100vwの画像を作成する場合、
    PC=960px
    Retina対応のスマホ=750px(※375pxの2倍)
    retina対応タブレット=1536px(※768pxの2倍)
    位が基準…と考えていましたのですが、

    解像度の上で許されるギリギリの小さい画像というのが
    ちょっとよくわからないでいます。
    画面によっては荒すぎて問題があるということは
    問題ありませんでしょうか。
    それとも現場では、画像の荒さはそこまで気にしないものですか。

    キャンセル

  • 2018/02/17 17:45

    >それとも現場では、画像の荒さはそこまで気にしないものですか。
    それは現場次第ですよ。たとえば写真アルバムサイトのようなところでギザギザみえまくりの画像しかないとなれば問題でしょうが、文字主体のサイトでの賑やかし目的のワンポイントイラストとかなら多少荒くても誰も気にしないでしょう。むしろどうでもいい画像が大きすぎるがゆえにアクセスに時間がかかることのデメリットが勝るということになります。その辺はマニュアルに単純に従うのではなく都度都度頭を使うべきところでしょう。

    キャンセル

  • 2018/02/17 19:13

    コメントありがとうございます。
    そのへんサイトによって、柔軟に考えなければならないところですね。今作っているものが画像重視のサイトだったので、やはり気を使わなければならないところではありますが、そのへんももう少し柔軟に考えて良さそうですね。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.45%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Photoshop

    123questions

    Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。