- ベストアンサー
CSSでのpxをvwやvhに変換する計算方法
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
少し誤解がありますね。"vw" と "vh" はそれぞれ「viewport width」と「viewport height」の頭文字を取った単位で、そのページの画面サイズを "100vw/100vh" と換算した場合の割合で表示する際に使う単位です。"%" と混同しがちですが、%はその要素の親要素のサイズpx数を100%と換算した場合の割合になるため、確実に画面サイズに比例したサイズ設定を使いたい場合に用います。 従ってまず最初にHTMLが表示される画面サイズが全ての基準になります。これは固定値にはならず、各々User各位の使用ブラウザ環境などで変化します。厳密には画面サイズの事ではありませんが、運用上はほぼイコールと考えて問題ありません。 例えばスマホのiPhoneXの場合、縦画面時の横幅サイズは375pxとなるため。この375pxが100vwとなります。これを基準に換算式を考えると… ＞ 1px = 100vw / 375px = 0.26666... ≒ 0.2667vw ～以上の様な変換式となります。
関連するQ&A
- CSSでwidthの指定は%、pxどっちがいい
HTML5、CSS3の記述方法で教えていただきたい事がございます。 横幅を指定する場合には、px、%、vwなどどんな単位で記述するのがいいのでしょうか。また、%とpxを混ぜて使ってもいいのでしょうか。高さも%を使うものでしょうか。 お手数ではございますが、それぞれの説明サイトはあるのですが、では実際にどれを使うのが良いかの記述はどこにもなかったので、書き込ませていただきました。 知識をお持ちの方、よろしくお願いいたします。
- 締切済み
- CSS
- CSSのVM、VHはいつから仕事でも使えますか？
CSSのVM、VHは、プラグインなどを使って、アンドロイドブラウザ4系でも使えるようにすることなど出来ないのでしょうか？ まだどうしても実務では無理でしょうか？
- ベストアンサー
- CSS
- pxからemへの変換に関して
サイトを構築する際に、単位としてpxを利用してきました。フォントサイズは%を利用しています。 今後リキッドレイアウト、もしくはエラスティックレイアウトに移行したいと思います。 その際に、単位としてemを利用すると思いますが、pxからemへの数値変換方法が良く分かりません。 計算方法もしくは、変換ツールが有れば紹介して頂きたいと思います。 検索した際に「Em Calculator」と言うツールがあるみたいですが、今はサイトが存在しないみたいです。 何かヒントでも有ればと思います。 横方向は文字数と言うことで、イメージが出来るのですが、高さ方向の数字を取得する悩んでいます。 もしかすると高さを指定することが間違い？？
- ベストアンサー
- CSS
- CSSで14px/1.4の部分の記述は正しい？
とあるサイトのCSSを見ていたら次のような記述がありました。 font:normal normal normal 14px/1.4 "ＭＳ Ｐゴシック", "Osaka", "sans-serif"; normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。 14px/1.4で10pxのこと？ このような記述はできるのでしょうか？ そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。
- ベストアンサー
- HTML
- cssによる配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- ＣＳＳでテーブルを作る方法について
CSSでテーブルを作る方法についてアドバイスお願いします。 今、外CSSで、テーブルを作成しようとしているのですが、cssがhtmlに反映されていないようです。２つボックスを並べたいです。 .box1{ float: left; background-color: #cc0000; width: 200px; height: 200px; } .box2{ float: left; background-color: #d0dcdf; width: 200px; height: 200px; } htmlには、 <div CLASS="box1"></div> <div CLASS="box2"></div> と書きました。 どこが問題なのかどなたかご指摘いただけますでしょうか？
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで文字が縮まらない方法
CSSの初心者です。 不明点があるので教えてください。 １．テーブルに文字を入力してあります。 ウィンドウサイズの大きさを小さくするとそのテーブルの 文字も縮まります。 私は日本人です。 ↓↓↓ 私 は 日 本 人 で す。 みたいになります。 ウィンドウサイズを小さくしても縦表示にならない方法は ありますでしょうか？ ２．↑と類似質問になりますが、tdで幅指定（px）はできますよね？ 自分がもっているCSS辞典には td {width: 200px;} がなく、 table {width: 200px;} しか掲載されていません。 やはりpx指定してもウィンドウサイズが小さくなるとその大きさを 維持できなくなるのでしょうか？ HTMLのようになかなか思うような表示にならず細かいところで 苦労しています。
- ベストアンサー
- その他（プログラミング・開発）
- ＣＳＳの整理方法
ＣＳＳの初心者です。 現在、「common.css」にて ***ＣＳＳ内表記*** -------------------- ページ名１ -------------------- td.xxx{ color:#ffffff; font-size:10px; } ---------------------- ページ名２ ---------------------- td.yyy{ color:#ffffff; font-size:10px; } ***ＣＳＳ内表記終わり*** 上記の様に１枚で整理しておりますが、 他に良い表記方法、整理方法はありますでしょうか？ １つのページ内に「td.」クラスが１０個ほどあります。 ちなみに「td.」クラス内の量が１０列ほど、 ページ数は現在１０ページほどです。 他に書き方や、書き方の講座の良いＨＰがございましたら 教えて頂けますと助かります。 よろしくお願いいたします。
- 締切済み
- HTML
- CSSの入力方法について教えてください
CSSの入力方法について教えてください 私はプラグインを使用してtableを制作したのですがHTMLコードの最上段に下記のような表示がされてありました。 全体の指示がされてあると思うのですが、自分なりにCSSで入力してもうまく表示できないでいます。すみませんがおわかりの方がおられましたら教えていただければと思います。どうぞよろしくお願いいたします。 <table class="aligncenter" style="border-color: #2d89ef; background-color: #ffffff;" border="2px" cellpadding="10px"> 補足補足させていただきます 私はHTMLに CSSを直接記述する方法で<style type="text/css">の下に下記のように入力しました。 ■ここから下が自分が入力してみたCSSの記入ヶ所です .whole{ align: center; border-color: #2d89ef; background-color: #ffffff; border: 2px; cellpadding: 10px; } ■HTMLの一番上に下記のように入力しました <table class="whole"> ■結果 自分が入力すると外枠の罫線の色と幅が反映されていません。 ■元のHTMLのcode <table class="aligncenter" style="border-color: #2d89ef; background-color: #ffffff;" border="2px" cellpadding="10px"> の時は希望通りに表示されていました 以上の点を参考にしていただければと思います。長い文章ですみませんがよろしくお願いいたします。
- ベストアンサー
- CSS
- CSSの記述方法について
CSSを勉強しはじめたばかりの初心者です。 画像にマウスカーソルをあわせると色が変わるCSSに、 このように記述されている箇所がありました。 #example { width: ○○px; height: ○○px; padding-top: ○○px; padding-left: ○○px; background-image: none; } #example a,#example a:hover { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; } #example a { background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } aとa:hoverの指定だけで実現できそうなのに、 なぜこのように4つもidがあるのでしょうか。 何かの意図やテクニックのひとつなのでしょうか？ まだ記述方法を詳しく理解できていないので、不思議に思いました。 ご存知の方がいらっしゃいましたらご教示ください。 よろしくお願いいたします。
- 締切済み
- CSS
お礼
ありがとうございます。勉強になります。
補足
ありがとうございます。勉強になります。