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

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

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

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

Q&A

1回答

9241閲覧

レスポンシブで画像の表示位置を変えたいです

MOO_

総合スコア10

CSS

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

0グッド

0クリップ

投稿2019/01/04 02:22

編集2022/01/12 10:55

レスポンシブで画像の表示位置を変えたいです。
超初歩的な質問で申し訳ございません。

前提・実現したいこと

画像を、
Web上では右寄せ
スマホ画面では中央寄せにしたい

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

該当のソースコード

.right {margin-left: auto;}

と、

@media screen and (max-width: 650px){
.center{
text-align: center;
}
}

上記併用すると「.right」のみが適応されてスマホ画面上でも右寄せになってしまう

上記CSSが該当するHTML↓

<div class="center right"> <img src="images/××.jpg"> </div>

宜しくお願い致します。

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

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

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

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

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

yoshinavi

2019/01/04 03:00

メディアクエリは、デバイスの幅によってHTMLに付与したクラスのCSS内容を変えるもので、違うクラスには適用されません。 該当するHTMLも併せて提示してください。
退会済みユーザー

退会済みユーザー

2019/01/04 03:25

あとコードは` `か``` ```で囲んでください
MOO_

2019/01/04 03:33 編集

ご回答ありがとうございます 該当するHTMLは以下です。 <div class="center right"> <img src="images/××.jpg"> </div>
yoshinavi

2019/01/04 03:47

質問文は、編集出来ますので、HTMLのコードはコメント欄ではなく、質問文を編集して追加してください。
MOO_

2019/01/04 03:50

失礼いたしました、追加しました。。
kei344

2019/01/04 03:57

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。 また、他の要素との関係性やそこに適用されたCSSで挙動が変わる可能性があるため、問題が起きるサイトのURL、もしくは状況の再現が可能なHTML/CSSを質問文に追記ください。
yoshinavi

2019/01/04 04:01

CSSでは、divはブロック要素、imgはインライン要素となります。 ブロック要素とインライン要素の中央寄せや右寄せは、それぞれ違いますので、再度確認されてみてください。
guest

回答1

0

試してませんが、.rightのmargin-left: auto;を解除してやる必要があるのでは。
クラスが違ってる(.rightと.center)のでどうしたいのかいまいちわかりません。htmlも見たいです。

css

1.right { 2 margin-left: auto; 3} 4 5@media screen and (max-width: 650px) { 6 .right { 7 margin-left: 0; 8 } 9 10 .center { 11 text-align: center; 12 } 13}

恐らく勘違いされてると思うのですが、メディアクエリの条件に一致する部分だけが読み込まれるわけではなく、
メディアクエリを指定していない部分(.right)+メディアクエリの条件に一致した部分が読み込まれます。

したがって、提示されているcssは結果的に下記のcssとして解釈されます。

css

1.right { 2 margin-left: auto; 3} 4 5.center { 6 text-align: center; 7}

見ればわかるように、.rightの内容は何も変更されません。(無視されるようになるわけではない)

投稿2019/01/04 02:54

編集2019/01/04 03:29
runny_nose

総合スコア280

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

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

MOO_

2019/01/04 03:31

ご回答ありがとうございます。 そもそも、クラスを分けるのがおかしいのでしょうか!? 今しがたクラス名を統一してみたのですが・・・ Web上で見たさいの、「右寄せ」が反映されておりませんでした。 スマホ上での中央寄せは反映されていました。
MOO_

2019/01/04 03:53

>>メディアクエリの条件に一致する部分だけが読み込まれるわけではなく、 つまり、それぞれに重複?する形で指示をする必要があるということでしょうか。。
runny_nose

2019/01/04 04:23

右寄せと中央寄せを分けたいという目的だけでいえばクラスを分ける必要はないと思います。 右寄せが反映されないのは、 margin-left: auto;で右寄せする場合、width(もしくはdisplay: table など)が設定されている必要があります。 背景色をつけてみると分かるのですが、デフォルトではwidthが100%となっており全幅を占有するため、右に寄せるスペースがありません。 単純に下記でよいのではないでしょうか? html <div class="img"> <img src="https://placehold.jp/150x150.png"> </div> css .img { text-align: right; } @media screen and (max-width: 650px) {  .img { text-align: center; } }
runny_nose

2019/01/04 04:44 編集

> つまり、それぞれに重複?する形で指示をする必要があるということでしょうか。。 メディアクエリには変更したい差分のみ記載します。変更したくないものは記載する必要がありません。 (同じプロパティを指定すると上書き。未指定だったプロパティは追加される) そもそもcssは上から順に読み込まれて、下のものが優先となるようにマージされるのはわかりますか? 例えば、 .img { width: 650px; text-align: right; } .img { text-align: center; background: red; } 上記は下記のように解釈(マージ)されます。 .img { width: 650px; /*1つ目のものがそのまま残る*/ text-align: center; /*後勝ちで2つ目で指定したものに上書き*/ background: red; /*2つ目で指定したものが追加*/ } メディアクエリでも同じことが起きると考えてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問