- 締切済み
CSSでwidthの指定は%、pxどっちがいい
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- celtis
- ベストアンサー率70% (2271/3210)
％は相対指定なので、親要素のサイズに連動して大きくなったり小さくなったりします。 ウィンドウサイズや画面サイズが変わるような環境で、見やすくレイアウトするレスポンシブデザインなどに必須の技術です。 pxは絶対指定なので、どのような環境であっても数値で指定されたサイズを頑なに守ります。 大きさを変える必要がない要素で主に使われるでしょう。 相対指定と絶対指定とについて、わかりやすく解説しているページがありました。 https://www.sejuku.net/blog/75559 https://clrmemory.com/web/css-px-em-differences/
関連するQ&A
- CSSで背景色のwidthが指定できません。
WebサイトのQ&Aのページを<dl>要素を使って作成しています。 質問項目には、background-imageだけを使い、 回答項目には、background-imageとbackground-colorを使っております。 それぞれの回答項目のbackground-colorのwidthを592pxで統一したいのですが、できません。 回答の文字数が少ないと、background-colorの横幅が足りなくなり、文字数が多いと592pxを超えてサイドバーと重複してしまいます。 かれこれ4時間くらい格闘しておりますが、きちんと表示できません。 ちなみに、dl、dt、ddの要素のうち、marginとpaddingはリセットCSSをしています。 以下に、該当するHTMLとCSSだけ書きました。 何がいけないんでしょうか？ もしくは、以下のコードだけではなく、親要素の属性や属性値とかが問題なのでしょうか？ <!-- HTML --> <dl> <dt class="questiontext_dt">ここで質問</dt> <dd class="question?dd">ここで回答してます</dd> </dl> /* CSS*/ .questiontext_dt { width:592px; padding: 0px 0px 0px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; text-align: left; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background:url(http://www.ok.com/img/question1.gif); background-repeat: no-repeat; } .questiontext_dd { width:592px; padding: 5px 0px 5px 35px; margin: 0px 0px 10px 0px; font-size: 15px; color: #000000; display: inline; float: left; font-family: "ＭＳ Ｐゴシック",sans-serif; background-color: #f5eabc; background-image:url(http://www.ok.com/img/question2.gif); background-position: left 5px; background-repeat: no-repeat; }
- ベストアンサー
- CSS
- HTML、CSS、スマホの時だけ全画面表示にしたい
パソコン向けにサイトを作成しまして、横幅800pxと指定しているのですが、スマホで表示すると全画面表示の方が見やすいので、スマホの時だけ全画面表示にできるHTMLかCSSの指定方法はありますか？ パソコンで表示させた時は、横幅800pxのままにしたいです。
- ベストアンサー
- その他([技術者向] コンピューター)
- widthやheightの数値に単位（px）はつけない方が良いの？
自分はHTMLやCSSにおいて<img>や<td>に width="100px" とか、 div に { width: 70px } とか、ピクセルの単位を付けて作っています。 どこかの本が単位をつけると教えている……はずだったからです。 今日、HTMLチェックというサービスを行ったら 『不正な設定。数値か％指定にしてください』という様なことをいわれました。 ちなみに用いているDocument宣言は4.01 Transitionalです。幅・高さに 単位はまったく必要ないのでしょうか？ 逆に単位を省略してはいけないタグはありますか。
- ベストアンサー
- HTML
- CSSのwidthプロパティについて教えてください。
お世話になります。 フォームメールをCSSでレイアウトしています。 見出しの幅を揃えるため下記のコードを記述しましたが,labelの幅が変更できません。 ----- HTML ----- <fieldset> <label class="w1">項目</label><input class="w1" type="text" name="someone" /> </fieldset> ----- CSS ----- .w1 { width: 200px; } labelの幅は200pxになりませんでしたがinputの値は200pxになりました。 labelの幅をテーブルを使わずに揃えたいのですが その方法が分かりません。 手がかりでも良いので教えてください。 よろしくお願いいたします。
- ベストアンサー
- HTML
- cssで文字サイズ指定、ptでもpxでも指定できますが、違いは？
CSS初心者です。初歩的ですが、教えてください。 文字サイズの指定の単位はいろいろあるみたいですが、 皆様はどの単位を使っていますか？ 例えば、ptとpxどちらも結構細かくサイズを指定できますが、 どちらかを選ぶ理由がいまのところありません。 どちらを何故使うのか、違いはあるのか・・・？ よろしくお願いします。
- ベストアンサー
- HTML
- ＣＳＳでテーブルセルの大きさ指定したい
ＣＳＳ（スタイルシート）を使って セルの大きさを指定したいのですが 自分のもってる本にはＨＴＭＬの方法しかのってなく ＣＳＳのテーブルの項目にはなぜか書いてません 自分が使っている無料ＨＰサイトではＨＴＭＬで 指定しましたが反応ないです ＣＳＳでのセルの大きさ指定のやり方教えてください
- ベストアンサー
- HTML
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- 【CSS/HTML】： フォントサイズについて
CSS/HTMLについての質問があります。 まずHTMLですが、 <font size="6">テキスト</font> と記述するときの、「6」の単位を教えてください。また、ピクセル・ポイントとの関係が知りたいです。 次にCSSについて。 <font size="6">テキスト</font> と記述すると、テキストの色が "#FF0000" になるようにしたいと思います。この場合、どのようにCSSを作成すれば良いのでしょうか。 単発質問だと思いますので…説明しているサイトを紹介していただけると有り難いです..。 以上、お手数をおかけするとは思いますが、どうかよろしくお願い致します。
- ベストアンサー
- HTML
- cssのcalcについて教えてください
cssの初心者です。html、cssにおいて、メディアクエリを用いて、画面横サイズで600pxではfont size:1.0rem、1000pxでは1.5rem、中間の画素横サイズは比例計算として、calc関数を用いて実装したいと思っていますが、戸惑っています。 ① font-size: calc(1rem + 0.5rem * ((100vw - 600px) /400px)); では機能しません。 1rem=18pxとして、 ➁font-size: calc(18px + 9 * (100vw - 600px) /400); では機能します。①の（100vw-600px)/400pxの箇所は例えば、画面横幅が800pxの際は値と単位が約分されて単位無の1/2となり、括弧の前の0.5remと掛け合わされ0.25rem。＋記号の前の1remと足し算され、結果1.25remとの理解ですが、結果として適用されていません。①がなぜ機能しないのか、remを基本で書き表すとどのように数式を作った方がよいのか教えてください。一応、➁でうまくいっていますので、calcを理解するための質問です。
- ベストアンサー
- CSS
