急いでいます！

html cssについて

締切済

質問者：satoru11223
質問日時：2017/01/13 23:51
回答数：4件

プログラミング初心者です。
参考画像のようにheaderにて、HTML・CSSを使用し異なる4枚の画像を1枚にし、画面いっぱいに表示させたいのですがやり方がわかりません。

ご教授お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： t_fumiaki
回答日時：2017/01/14 11:01

>>写真の場合coverを使います

画像が1枚ならcoverなんだけれど、４枚を並べる場合にはcoverは先頭1枚にしか効かない。
横幅50%ずつを4枚に適用しないと出来ない。

- 1
- 件

通報する

No.3

回答者： Dr.Fell
回答日時：2017/01/14 10:56

画面いっぱいということなので、それがコンテンツだとてコーディングしました。

（私の前に答えられた方は、背景としておられます。私が背景とするなら、このような写真の場合coverを使います。）

問題は、閲覧する人の画面が縦横比率が一定とは限らないという事で、ある人には細長い写真に、ある人では、横に長い写真となります。4枚を画面いっぱいを尊重すると、そうなります。

ブラウザの幅を大きくしたり小さくしたりしてみてください。
<html>
<head>
<style>
body{margin:0;}
img{box-sizing:boder-box;width:50%;height:50%;}
}
</style>
</head>
<body>
<header>
<img src="001.jpg" alt=""><img src="002.jpg" alt=""><img src="003.jpg" alt=""><img src="004.jpg" alt="">
</header>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： t_fumiaki
回答日時：2017/01/14 10:26

No.1続き

もし、どのブラウザの横幅にも合わせたいなら、レスポンシブにする。

#header {
width: 100%;　←ブラウザの横幅1杯
height: 0;　←必ず0
background:
url(1.gif) left top no-repeat,
url(2.gif) right top no-repeat,
url(3.gif) left bottom no-repeat,
url(4.gif) right bottom no-repeat;
background-size:50% auto;　←必ず0% auto
padding-bottom:75%;　←値を微調整して合わせる
}

- 0
- 件

通報する

No.1

回答者： t_fumiaki
回答日時：2017/01/14 07:10

●html

<div id="header">
・・・・・
</div>

●css
#header {
width: 800px;　←4枚全体の幅
height: 400px;　←4枚全体の高さ
background:
url(1.gif) left top no-repeat,　←左上画像
url(2.gif) right top no-repeat,　←右上画像
url(3.gif) left bottom no-repeat,　←左下画像
url(4.gif) right bottom no-repeat;　←右下画像
}