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

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

新規登録して質問してみよう
ただいま回答率
85.45%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1193閲覧

レスポンシブルに対応してサイズ比を変えずに画像の横幅を縮小したい

youyouy

総合スコア3

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2021/03/28 04:39

前提・実現したいこと

見よう見まねで自分でホームページをつくっている素人です。
レスポンシブルに対応してサイズ比を変えずに画像を縮小したい

発生している問題・エラーメッセージ

イメージ説明
パソコン画面では”YUKIO”の下の画像が上手く収まっているのですが

イメージ説明
レスポンシブルにすると他は縮小していくのですが
”YUKIO"下の画像だけが元のままで横幅が縮小していかない

該当のソースコード

HTML

<header> <h1 class="yukio"><a href="index.html"><img src="images/yokio.jpg" alt="ロゴ" ></a> <img class="hamburger" id="open_nav" src="images/bars_24.png" alt="ロゴ"> </h1> <div id="slide"> <ul > <li ><img class="sun" src="images/0224.jpg" alt="画像1" width="800" height="146"></li> <li ><img class="sun" src="images/image021.jpg" alt="画像2" width="800" height="146"></li> <li ><img class="sun" src="images/image041.jpg" alt="画像3" width="800" height="146"></li> </ul> </div> </header>

css

@media screen and (max-width: 768px) {
#slide {
width: 100%;
max-width: 100%;

}

}

試したこと

cssのslideの頭には画面では消えてしまってますが#がついてます。
この”slide”のcssがききません。"slide"を入れているHTMLの場所が悪いのか?わからないのです。
ちなみに画像は3枚 JavaScriptで動かしているのですが、レスポンシブルに縮小していってもJavaScriptは効いていて順番に移り変わります。画像の横幅が縮小していかないだけなのです・・・

javascriptを念のため記しておくと下記のようになります。
(全然わかってなくてコピペしただけなのですが、ちゃんと動いてます。)
$(function(){
// 設定
var $width =800; // 横幅
var $height =146; // 高さ
var $interval = 16000; // 切り替わりの間隔(ミリ秒)
var $fade_speed = 3000; // フェード処理の早さ(ミリ秒)
$("#slide ul li").css({"position":"relative","overflow":"hidden","width":$width,"height":$height});
$("#slide ul li").hide().css({"position":"absolute","top":0,"left":0});
$("#slide ul li:first").addClass("active").show();
setInterval(function(){
var $active = $("#slide ul li.active");
var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first");
$active.fadeOut($fade_speed).removeClass("active");
$next.fadeIn($fade_speed).addClass("active");
},$interval);
});

パソコン画面用のcss(こちらも"slide","slide img"左には画面では消えてますが#は付いてます。)
#slide {
width:800px;
height:146px;
margin:0 auto;
position:relative;
}
#slide img {
position:absolute;
left:0;
top:0;
}

パソコン画面の方は私の理想通りに動きます。

レスポンシブルの時に画像の横幅が収縮して(ただしサイズ比を変えない)いかないだけなのですが、わかりません。誰か教えていただけないでしょうか?よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hatena19

2021/03/28 05:40

コードはマークダウンのコードブロックに入れてください。そうすれば、# は消えません。 コード部分を選択してからツールバーの <code> をクリックするとコードブロックになります。
guest

回答1

0

ベストアンサー

画像(img要素)のサイズを指定していないのが原因です。幅を#slideのサイズに合わせたいなのら、下記のように100%に指定すればいいでしょう。縦横比を維持するにはheight: auto;も追加します。

css

1#slide { 2 max-width:800px; 3 margin:0 auto; 4 position:relative; 5} 6 7#slide ul { 8 width:100%; 9 padding-top: 17.25%; 10} 11 12#slide img { 13 width: 100%; 14 height: auto; 15} 16 17@media screen and (max-width: 768px) { 18 #slide { 19 width: 100%; 20 } 21}

padding-top: 17.25%; の数値は画像の縦横比を設定してください。
横800px 縦146pxの場合
149 / 800 * 100 = 18.25

jQueryの方でもwhdth, height を設定していますが、その部分は削除してください。

js

1$(function(){ 2 // 設定 3 var $interval = 8000; // 切り替わりの間隔(ミリ秒) 4 var $fade_speed = 3000; // フェード処理の早さ(ミリ秒) 5 $("#slide ul li").css({"position":"relative","overflow":"hidden"}); 6 $("#slide ul li").hide().css({"position":"absolute","top":0,"left":0}); 7 $("#slide ul li:first").addClass("active").show(); 8 setInterval(function(){ 9 var $active = $("#slide ul li.active"); 10 var $next = $active.next("li").length?$active.next("li"):$("#slide ul li:first"); 11 $active.fadeOut($fade_speed).removeClass("active"); 12 $next.fadeIn($fade_speed).addClass("active"); 13 },$interval); 14});

CodePenサンプル

投稿2021/03/28 05:44

編集2021/03/30 01:53
hatena19

総合スコア33808

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

youyouy

2021/03/29 07:22

返答ありがとうございます!ただ、上記書かれた通りにやってみたのですが(上のcss, javascriptをそのままコピペもしてみました)、レスポンシブ画面では何もかわらず、パソコン画面では画像そのものが消えてしまいました。私の書き込んだ位置が悪いのでしょうか?どうにもよくわかりません。ご教示いただければ助かります。
hatena19

2021/03/29 07:43

回答に動作サンプルのリンクを追加しましたのでご確認ください。
youyouy

2021/03/29 08:12

ど素人な者ですからすいません、、、。どこを見ればいいのかわからなくて。。。hatena19さんのページに飛んでいくと、回答がたくさんあって、、、。どれを見ればよろしいのでしょうか?
youyouy

2021/03/29 08:15

わかりました。codePenサンプルをみればいいのですよね。みます!
youyouy

2021/03/29 08:41

成功しました!!ありがとうございます。 ただ次の問題がでてきまして、、、。レスポンシブルにすると、小さくすればするほど、画像と下の赤のテキストの間に余白が生まれるようになってしまったのですが、、、。こちらをなんとか解決できないでしょうか?ご教示いただければ助かります。
hatena19

2021/03/30 00:19

サンプルを修正しましたので確認ください。 回答も修正しておきます。
youyouy

2021/03/30 06:21

すごいですね!!なおりました。ありがとうございます!ちなみに画像をもう少し高さを上げた画像に交換しても大丈夫なのですよね?今後のために、どのように発想したのか、その道筋を教えていただけませんでしょうか?padding-top:17.25% なんていう数字はどう計算したらでてくるものなのでしょうか?
hatena19

2021/03/30 06:25

回答にも説明してありますが、高さ÷幅 で計算できます。 「レスポンシプ対応 縦横比固定」でWEB検索すると解説ページがいろいろ見つかりますのでご参照ください。
youyouy

2021/03/30 13:25

すいません。もうすこしお付き合いさせていただけないでしょうか?パソコンの中でせっかく上手くいったと思い、アップするとレイアウトが全然くずれてしまい、、、。https://yukio.asia これはどこに原因があるのでしょうか?元に戻らなくなってしまったのですが、、、
hatena19

2021/03/30 13:33

どの辺がレイアウトが崩れているのでしょうか。 ヘッダー部分に関してはうまくいっているように見えますが。 それ以外の部分だと、今回の質問とはまた別の話になりますので、新規に質問を立ててください。
youyouy

2021/03/31 09:12

昨夜、アップするとCSSがきいてないのか、、、レイアウトが壊れていたのですが。今日あらためてアップしてみるとパソコン通りになってました!!よくわかりませんが、結果オーライでうまく行きました。どうもわからないところもあるのですが、今回とても勉強になりました。hatena19さんと知り合えたことがよかったです!またわからないところが出て来ると思いますので、今後共宜しくお願い致します!!
hatena19

2021/03/31 13:05

キャッシュが残っていたのでしょうね。よくあることです。 更新が反映されない場合は「スパーリロード」するといいですよ。 検索してみください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問