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

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

ただいまの
回答率

90.48%

  • CSS3

    2147questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Webサイト

    1104questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • レスポンシブWebデザイン

    218questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

背景を画像にして、レスポンシブでサイト制作をしたいです。

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 1,257
退会済みユーザー

退会済みユーザー


下記サイトの会社情報のように、背景を画像にして、レスポンシブでサイト制作をしたいのですが、
ブラウザの縦横比が、変化してしまう状況で、どのようにして、内容(こちらのサイトなら、COMPANYから株主までの文字)を背景画像の真ん中にして、
内容の上下の余白も空きすぎないようにしているのでしょうか?

https://www.theport.jp/


恐らく、320、640の時の背景画像をそれぞれ別の比率で作り、バックグラウンドイメージを使ってブレイクポイントで、縦横比の違う画像を切り替えているのだと思うのですが、
それだとブレイクポイントでないブラウザサイズの時に、内容の上下の余白(こちらのサイトなら、COMPANYの上にある余白と株主情報の下にある余白)が、
空きすぎたり、短くなりすぎたりしない物でしょうか?

どのように常に適切な余白を確保しているかわかりますか?


私は問い合わせフォームを内容として使う予定です。
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

0

細かい調整はいろいろできますが、 
<head>
<style>
body{
background-image:url();
background-size:wrap;
}
</style>
</head>
<body>
</body>
という便利なコードをcssで使えば上下、左右に常に余白が無いように背景が表示されるようになります。
が、
古い端末ではかなりの確率で使用出来なかったりします。
*このページをよく見ています。http://allabout.co.jp/gm/gc/400630/
↑の方法でも古い端末ではかなりの確率で使用出来なかったりします。
どうしてもというときは、
javascriptで無理矢理再現してみたり、
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js">
これ使ってみてもよいと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/20 14:01

    例えば640PXをブレイクポイントとして、背景画像を作った場合、360PXに縮小した際に、画像の縦横比が、変わってしまいますよね。

    すると画質が劣化したり、人間の画像なら超縦長の顔になってしまいませんか?

    そこは、さすがに仕事であっても、何十個も画像を作れないので、仕方がないとクライアントさんを納得させるのが、現場での一般的な考えでしょうか?

    キャンセル

  • 2015/09/20 14:27

    別にイチイチ画像用意しなくても問題ないと思いますが...
    画質の劣化は拡大し過ぎないかぎりないだろうし、
    画像の縦横の比率は維持されるものなので問題ないかと...

    キャンセル

0

細かい調整はいろいろできますが、
background-size:wrap;
という便利なコードをcssで使えば上下、左右に常に余白が内容に背景が表示されるようになります。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/20 14:01

    例えば640PXをブレイクポイントとして、背景画像を作った場合、360PXに縮小した際に、画像の縦横比が、変わってしまいますよね。

    すると画質が劣化したり、人間の画像なら超縦長の顔になってしまいませんか?

    そこは、さすがに仕事であっても、何十個も画像を作れないので、仕方がないとクライアントさんを納得させるのが、現場での一般的な考えでしょうか?

    キャンセル

  • 2015/09/20 22:14

    この便利なコードは縦横比を変えません。なので、縦長になることもありません。使ってみればわかります。

    キャンセル

  • 2015/09/21 01:05

    縦横比率を代えないというのはビックリですね。

    比率がおかしくなる場合、余白にすることで実現しているのですかね。

    キャンセル

  • 2015/09/21 11:57 編集

    いや、余白もできません。っていうか私のこの回答はあなたの選んだベストアンサーが同じだということに気づきませんか?

    キャンセル

0

縦横比が変わる親要素の中で、背景画像をうまいこと見せる方法ですよね?
トリミングとサイズの異なる画像をいくつも作るのは手間がかかりすぎるので、
PC向けの最も大きなサイズの背景画像を用意しておき、
.bg {
  background-image: url(img/bg_sample.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
}
としておけば、あとは勝手に親要素の縦横比に合わせて自動フィットしてくれますよ。
background-size: coverの場合は
親要素のアスペクト比に合わせて画像の長辺・短辺どちらかが親要素のwidth / heightの
サイズになるように自動的に拡大してくれます。(親要素全てを背景画像で覆い尽くす状態)
その際、用意している画像の縦横比は変えませんので、親要素のアスペクト比と背景画像の
アスペクト比が異なる場合には長辺・短辺のどちらかがトリミング(というか要素内に表示できず非表示に)されて見えなくなります。

基本的にはこの仕組を使ってレスポンシブ背景のほとんどは作られてます。
背景画像のどのあたりがトリミングされて見えなくなるかは状況によって変わるので、
あくまで装飾的に画像のどこかがカットされても大丈夫な素材を選ぶのがコツです。
あまりガチガチに「この比率の時にはこのトリミングとこの大きさで厳密に見せたい!」とか
欲張るとうまくいかないです。

そこをこだわりたいのであれば、それこそアスペクト比ごとに複数の背景画像を用意して、
ブレイクポイントで使用する背景画像を使い分けるしか今のところはないでしょうね。

あと、わりと同じような質問を何度もされていますが、
Chromeのデベロッパーツールなどで実際にどの要素にどんなCSSが適用されているのか
調べたりしてますか?
参考サイトを見つけることはできているのですから、そのサイトが実際に
どう作られているのかを研究するのも勉強になりますよ。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/09/20 18:26

    確かに下記のようになっていましたね。

    #company {
    width: auto;
    position: relative;
    background: url(../images/bgCompany.jpg) no-repeat scroll center top;
    background-size: cover;
    padding: 140px 0 107px 0;
    }

    今回は全く想像も出来なかったので、質問しました。
    background-size: cover;を検索する手も確かにあったかもしれません。


    background-size: cover;はアンドロイドの4系の初期で、部分サポートのようですね。
    恐らく問題ない位は使えるのでしょうが。


    こちらで対応できそうです。
    ありがとうございます。

    キャンセル

関連した質問

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

  • CSS3

    2147questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Webサイト

    1104questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

  • レスポンシブWebデザイン

    218questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。