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

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

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

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

Q&A

解決済

2回答

3016閲覧

親要素が子要素paddingを無視する

harapara

総合スコア39

CSS

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

0グッド

0クリップ

投稿2019/08/08 12:16

<i>タグにpaddingを設定していますが、親の背景ピンクが下記画像のように不十分になる時があります。
それは、F5を押したりデバイス別表示画面を変更するとたまになります。
一旦デべロッパーツールでpaddingサイズを変更してまた元に戻すときはきちんと表示されます。
アイコンはfontawsomeを使用していますが、これが読み込み遅い時とかに起こるのでしょうか、、
解決法あれば、ぜひご教授お願い致します。
イメージ説明

HTML

<body class="second"> <header class="top"> </header> <div class="content first"> <!-- reaction --> <div class="formWrap"> <form action="URL" name="form" method="get" value='default' > <div class="button"> <input id="heart" type="radio" name="select" value="heart" onclick="reaction()" > <label for="heart" class="heart outline"><i class="far fa-heart"></i></label> </div> </form> </div> </div> </body>

CSS

.formWrap { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } input[type=radio] { display: none; } .heart{ background: #f092b1; color: #fff; font-size: calc(3rem + ((8vw - 0.64rem) * 0.7143)); border-radius: 50%; width: unset; height: unset; display: inline-block; position: relative; } .button i{ position: relative; padding: 10%; transform: unset; top: unset; left: unset; font-size: calc(10.5rem + ((58vw - 0.64rem) * 0.7143)); }

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

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

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

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

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

guest

回答2

0

自己解決

<i>タグ自体に背景ピンクを設定し、親の設定は消去

変更箇所

/* .heart{ background: #f092b1; color: #fff; font-size: calc(3rem + ((8vw - 0.64rem) * 0.7143)); border-radius: 50%; width: unset; height: unset; display: inline-block; position: relative; } */ .button i{  background: #f092b1;  border-radius: 50%; }

投稿2019/08/09 01:58

harapara

総合スコア39

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

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

0

CSSのcalcが意味不明なので
もっとシンプルに記述したほうが良いです。

html

1<!-- 例 --> 2<style> 3.heart { 4 display: inline-block; 5 width: 100px; 6 height: 100px; 7 line-height: 100px; 8 border-radius: 50%; 9 background: #f092b1; 10 color: #fff; 11 font-size: 50px; 12 text-align: center; 13} 14</style> 15<label for="heart" class="heart outline"><i class="far fa-heart"></i></label>

投稿2019/08/08 12:46

yasutomi

総合スコア2937

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

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

harapara

2019/08/08 12:58 編集

画面サイズによって文字の大きさを変更したいので、calc()を使用しております。。。
yasutomi

2019/08/08 13:00

画面サイズによって文字の大きさを変更したいのはわかるのですが なぜこの計算式になるのか理解できなかったです。 font-size: calc(3rem + ((8vw - 0.64rem) * 0.7143)); font-size: calc(10.5rem + ((58vw - 0.64rem) * 0.7143));
yasutomi

2019/08/08 13:02

画面サイズによって文字の大きさを変更したいなら シンプルな記述でMedia Queriesを使用したほうが ズレが発生しにくいです。
LibertyBell3

2019/08/08 16:11

横からすみません。 これは、最初の「rem」でベースサイズを指定(これよりも小さくなってほしくないサイズより 少し小さく書きます。)して、後半はブラウザサイズによってベースサイズに上乗せしています。 この書き方の利点は、スマホサイズで小さくなり過ぎない点。 CSSがこの記述のみで済む点です…おそらくそういうことだよね?bigginer_haraさん。
harapara

2019/08/09 01:51

LibertyBell3さん、ご説明ありがとうございます。 私の記述漏れで申し訳ございませんが、html:font-size: 62.5%;にしております。 (参考:https://pecopla.net/web-column/fontsize-css) なぜMedia Queriesにしないかというと、どのデバイスサイズでもハートを常に画面大きく出すためには 細かく書かなくてはいけないと思い、今回calc()を使用いたしました。 ですが固定の方が確実ですよね。。 そして解決法を見つけました。多分これでいけるはずです。 解決方法に記入いたします。 ご協力ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問