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

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

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

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

Q&A

解決済

1回答

450閲覧

imgを右寄せにしたい

ratezou

総合スコア55

CSS

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

0グッド

0クリップ

投稿2023/01/15 00:54

サイト作成の勉強中です。

上部固定、下部固定(内容に関わらずページ最下部に表示する)のレイアウトは出来たのですが、最下部の中にあるimgを右寄せにできません。
どのようにしたら出来るのでしょうか?
アドバイスのほどよろしくお願い致します。

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Scan</title> 8 <meta http-equiv="Content-Style-Type" content="text/css"> 9 <link rel="stylesheet" href="css/styles.css"> 10</head> 11<body> 12<header> 13 <img src="../../img/home.png" id="home" onclick="location.href='../index.php'"> 14</header> 15<main> 16 <video id="video" muted="muted" autoplay playsinline></video> 17</main> 18<footer> 19 <div class="imgbox"> 20 <img src="../../img/shutter.png" id="shutter"> 21 </div> 22</footer> 23</body> 24<script src="js/main.js"></script> 25</html>

CSS

1body { 2 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 3 margin: 0; 4} 5header { 6 height: 48px; 7 position: absolute; 8 top: 0; 9} 10#home { 11 margin: 0; 12 padding: 8px; 13 cursor: pointer; 14 width: 32px; 15 height: 32px; 16} 17footer { 18 height: 48px; 19 position: absolute; 20 bottom: 0; 21} 22#shutter { 23 padding: 8px; 24 cursor: pointer; 25 width: 32px; 26 height: 32px; 27 text-align: right; 28} 29.imgbox { 30 display: flex; 31 justify-content: flex-end; 32 }

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

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

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

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

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

ratezou

2023/01/15 01:05 編集

.imgbox { margin: 0 0 0 auto; } でもダメでした。
guest

回答1

0

ベストアンサー

.imgboxの親要素であるfooterの幅が最小限になっています。footerwidth: 100%;を加えるなどしてみてください。

投稿2023/01/15 02:19

itagagaki

総合スコア8402

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

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

ratezou

2023/01/15 02:21

思いもしませんでした。 うまくいいました。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問