html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>as ones</title> 6<link rel="stylesheet" href="style.css"> 7<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 8</head> 9<body> 10<div class="topsozai"> 11 <div class="img1"><img src="1.jpg"" alt="最新情報" ></div> 12 <div class="img2"><img src="2.jpg"" alt="思い出の場所" ></div> 13 <div class="img3"><img src="3.jpg""alt="旅行の準備中"></div> 14</div> 15 16 <div class="topsozai2"> 17 <div class="img4"><img src="4.png""alt="旅行の準備中"> 18 </div></div> 19 <div class="img5"><img src="5""alt="旅行の準備中"> 20 </div></div> 21 <div style="position:absolute; top:720px; right:0%"> 22 <div class="img6"><img src="6.png"" alt="旅行の準備中"> 23 </div></div> 24 <div style="position:absolute; top:1250px; right:0%"> 25 <div class="img7"><img src="7.png""alt="旅行の準備中"> 26 </div></div> 27 </div> 28<div class="downsozai"> 29 <div style="position:absolute; top:2150px; left:0px"> 30 <div class="img8"><img src="8.jpg"" alt="旅行の準備中"> 31</div></div> 32 <div style="position:absolute; top:2150px; left:1610px"> 33 <div class="img9"><img src="9.png"" alt="旅行の準備中"> 34</div></div> 35 <div style="position:absolute; top:2150px; left:3450px"> 36 <div class="img10"><img src="10.jpg"" alt="旅行の準備中"> 37</div></div> 38</div> 39<ul class="follow-me"> 40<div style="position:absolute; top:2600px; left:1900px"> 41 <li><a href="https://twitter.com"></a></li> 42 <li><a href="https://www.facebook.com"></a></li> 43 <li><a href="https://plus.google.com"></a></li> 44 <li><a href="https://www.tumblr.com"></a></li> 45 <li><a href="https://getpocket.com"></a></li> 46 <li><a href="https://vine.co"></a></li> 47 <li><a href="https://www.youtube.com"></a></li> 48 <li><a href="/feed"></a></li> 49</div> 50</ul> 51</body> 52</html>
css
1.topsozai { 2 display: flex; 3} 4.topsozai2 { 5 display: flex; 6} 7.img4{ 8 position:relative; 9} 10.img5{ 11 position:absolute; 12 left:0; 13 top:30vw; 14 margin:auto; 15 width:100%; 16}
補足情報
モバイルデバイスも同様スクロールバーを表示しないで考えております。
画像の上記の部分は画面縮小の際、画像が崩れることなく縮小されますが
その他の画像がそのままの大きさで縮小されない状態です。
最終的にスクロールバーをなくし、一画面表示での表示として
観覧できればいいのですが、、、
初心者で言葉数が足りずすみません。
宜しくお願い致します。
・「一画面におさめたい」とは具体的にはどういうことですか?
スクロールバーを表示したくない、という意味でしょうか? そうであるならば、モバイルデバイスの場合も同様ですか? 縦持ちと横持ちとの時のレイアウトはどうしますか?
・「反映しない」とは、具体的には何が反映しないのですか? また、どのような現象を見て「反映しない」と感じ、どうあるべきだと思っているのですか?
表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1
結果(実際に起きたこと)を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-1
期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3
Lhankor_Mhyさんご返答ありがとうございます。
モバイルデバイスも同様スクロールバーを表示しないで考えております。
画像の上記の部分は画面縮小の際、画像が崩れることなく縮小されますが
その他の画像がそのままの大きさで縮小されない状態です。
最終的にスクロールバーをなくし、一画面表示での表示として
観覧できればいいのですが、、、
初心者で言葉数が足りずすみません。
宜しくお願い致します。
コードがなくなってしまいましたが……
回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在回答されておられる方の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。
回答3件
あなたの回答
tips
プレビュー