解決しました
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
意図的に質問内容を抹消するのは禁止されています。
それに抹消したところで質問履歴を見れば誰でもわかります。
回答2件
0
ベストアンサー
HTML
1 <div id="clock-container"> 2 <img src="画像の場所"> 3 <p>17:08:46</p> 4 </div>
CSS
1#clock-container { 2 width:700px; 3 height:700px; 4 margin: auto; 5 position: relative; 6} 7 8#clock-container img { 9 width:700px; 10 height:700px; 11 object-fit:cover; 12} 13 14#clock-container p { 15 position: absolute; 16 top: 250px; 17 left: 240px; 18 font-size: 60px; 19 font-family: 'Georgia'; 20 color: #4682b4; 21}
解説
700x700の#clock-containerブロックを作ってimgとpを収容します。
imgは700x700なので#clock-containerにぴったりフィットします。(なので特に配置の指定も不要)
pは(topとleftで)#clock-container内の決まった位置に配置します。(position: absolute)
こうすればimgとpの位置がずれることはなくなるわけです。
投稿2021/05/13 05:51
編集2021/05/13 06:13総合スコア8402
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2021/05/13 07:32
できました!わかりやすい説明もありがとうございます!
0
#clock
の中に入れればいいんじゃないかと思いました。
html
1<!-- 移動 <p align="center"><img src = "画像の場所"></p> --> 2 3 <div id="clock"> 4 <p align="center"><img src = "画像の場所"></p> 5 <p id="myClock">17:08:46</p> 6 </div>
投稿2021/05/13 05:28
総合スコア36960
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。