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

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

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

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

CSS

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

Q&A

解決済

1回答

2138閲覧

pタグでposition指定して動かしたいのに動かない

JunJu

総合スコア16

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/05/02 04:53

pタグでposition指定して動かしたいのに動かない

pタグのクラスをpositionで動かそうとしても全く動きません。
原因がわからないので何個か原因を教えてくれると助かります。

一応コード載せます

html

1<div class="two"> 2 <img src="./CSS/img/apple-iphone-xr-3673805__480.png" alt="画像"> 3 <h2>ずっと無料の <br>Music Freeプラン</h2> 4 <p class="monthly-amount">月額¥0</p> 5 <p class="icon1"><i class="fas fa-check-circle"></i>4000万曲にアクセス可能</p> 6 <p class="icon2"><i class="fas fa-check-circle"></i>全曲フル尺再生</p> 7 <p class="icon3"><i class="fas fa-check-circle"></i>シャッフル再生</p> 8 <p class="icon4"><i class="fas fa-check-circle"></i>シャッフル再生</p> 9 <h3>もっとわがままに楽しめます。</h3> 10 <a href="#">Premiumプランについて</a> 11</div>

css

1 2.two { 3 width: 100%; 4 height: 1025px; 5 font-family: Apple SD Gothic Neo; 6 position: relative; 7 color: #555555; 8} 9 10.two img { 11 position: absolute; 12 top: 140px; 13 left: 343px; 14} 15 16.two h2 { 17 margin: 0; 18 font-size: 70px; 19 position: absolute; 20 top: 156px; 21 right: 492px; 22} 23 24p .monthly-amount { 25 font-size: 50px; 26} 27 28.two h3 { 29 margin: 0; 30 font-size: 40px; 31 position: absolute; 32 top: 717px; 33 right: 492px; 34} 35 36.two a { 37 font-size: 49px; 38 position: absolute; 39 top: 798px; 40 right: 492px; 41}

HTML独学で学んでいます。完全に初心者ですがご回答のほどよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

一応下記のように希望の要素に:hoverをつけることで動くことは動きます。
(ご希望の内容かはわかりませんが、、)
あと画像の相対パスが/CSS/なのは個人的にはあまりおすすめしません。CSSとimgフォルダは明確に分けた方が良いと思います。

・CSSで実装する、マウスオーバーで表示される吹き出し
https://www.tam-tam.co.jp/tipsnote/html_css/post9815.html

イメージ説明
hover前

イメージ説明
hover後

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <header> <div class="two"> <img src="https://images.pexels.com/photos/167092/pexels-photo-167092.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="画像"> <h2>ずっと無料の <br>Music Freeプラン</h2> <p class="monthly-amount">月額¥0</p> <p class="icon1"><i class="fas fa-check-circle"></i>4000万曲にアクセス可能</p> <p class="icon2"><i class="fas fa-check-circle"></i>全曲フル尺再生</p> <p class="icon3"><i class="fas fa-check-circle"></i>シャッフル再生</p> <p class="icon4"><i class="fas fa-check-circle"></i>シャッフル再生</p> <h3>もっとわがままに楽しめます。</h3> <a href="#">Premiumプランについて</a> </div> </body> </html>
.two { width: 100%; height: 1025px; font-family: Apple SD Gothic Neo; position: relative; color: #555555; } .two img:hover { position: absolute; top: 140px; left: 343px; } .two h2:hover { margin: 0; font-size: 70px; position: absolute; top: 156px; right: 492px; } p .monthly-amount { font-size: 50px; } .two h3:hover { margin: 0; font-size: 40px; position: absolute; top: 717px; right: 492px; } .two a { font-size: 49px; position: absolute; top: 798px; right: 492px; }

投稿2019/05/02 05:04

編集2019/05/02 05:08
wataame

総合スコア302

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

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

JunJu

2019/05/02 05:10

pタグが:hoverを使っても動かない場合は、どうしたらpositinで動かせますか?
wataame

2019/05/02 05:11

どこのpタグでしょうか。
JunJu

2019/05/02 05:17

<p class="monthly-amount">月額¥0</p> <p class="icon1"><i class="fas fa-check-circle"></i>4000万曲にアクセス可能</p> <p class="icon2"><i class="fas fa-check-circle"></i>全曲フル尺再生</p> <p class="icon3"><i class="fas fa-check-circle"></i>シャッフル再生</p> <p class="icon4"><i class="fas fa-check-circle"></i>シャッフル再生</p> ここ全部が動かないです。
wataame

2019/05/02 05:25

<p class="monthly-amount">月額¥0</p>を動かしたいのであれば下記にすれば動きますし、色も変えられます。 ただレイアウトは崩れます。 .monthly-amount:hover{ position: absolute; top:100px; right:100px; color:red; }
JunJu

2019/05/02 05:28

ありがとうございます!!
wataame

2019/05/02 05:35

解決したようでよかったです。 マウスホーバーで動かす場合はクラス(ID)名:hoverで出来ます。 あとレイアウトはpositionで決めるよりもヘッダー、メインコンテンツ、メニュー、フッターをそれぞれ作ってその中でレイアウトした方が良いです。 ・ボックスレイアウトの基本をマスターしてサクッとwebページを作れるようになろう https://qiita.com/ritukiii/items/fdc63532d31cc1ed2c50 例: h2 { margin: 0; font-size: 1.125em; } h2:hover{ font-size: 70px; }
JunJu

2019/05/02 06:10

本当に助かります!! もっとできる様勉強します!! また、回答お願いします!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問