![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.2ベストアンサー
- 回答日時:
>pxもパソコンの解像度に比例して表示される大きさが変わりますよね?
それは勿論ですが、基準にしやすいかしにくいか、という違いが出ます。
きっちりしたレイアウトを制作する際は横幅をピクセルで指定する事になると思います。
例えば600ピクセルで制作するとしましょう。
そこに1文字を目一杯表示したいとします(そんな事はしない。というツッコミは無しで…)。
その場合はフォントのサイズを600pxにすればいいことは考えるまでもありません。
しかしポイントの場合は?
「1ピクセル=○センチ」という変換は出来ません。よってポイントでも同じ事が言えます。
例え600ピクセルの横幅ぴったりのポイント数値を見つけたとしても、他の画面では?という事になります。
ポイント、センチ単位は印刷物の制作等の場合は使います。イラストレーターでチラシを制作する際等です。
しかしホームページは印刷する事を重視して制作するものではありません。
その為ピクセル単位を推薦します。
読みにくい文章かと思いますがこんな感じでいかがでしょう?
pt→印刷
px→画面表示
非常に解りやすいです。どうもありがとうございました。
px基準にしておけば、モニタ解像度の変化では崩れないということですね。
No.5
- 回答日時:
こんにちは
ブラウザによってツールバーとかで表示領域が異なったりするのでこっちのブラウザではぴったりだけどあっちのブラウザでは右と下に余白ができてしまう(逆にはみ出てしまう(スクロールバーが出てしまう))ということがありますが『px』が最小単位です
1pt = 1.3325px (Macでは1pt = 1pxとなっているようですが)
1pt = 1/72 (in)
インチ(in)の解釈が解像度によって変わってWindowsなら(96DPIなので)96pxで1in、Macなら(72DPIなので)72pxで1inといった感じになります
要は自分が何処を基準にするかだと思います
px : 最小単位(=ドット)
pt : 現実にあるサイズ(1インチ)
em : フォントサイズ
% : ブラウザサイズ、親要素のサイズ
一般的に使われるのはこの4つかな?
あと別質問(縦方向のセンタリング)になるのですが・・・
※ブロックとしての中央配置ではなく行の中での文字の中央配置という意味でしたら無視してください
vertical-alignと<span>で解決したとあったのですがvertical-alignは行またはセルに対しての縦方向の指定で<span>はインライン要素なのでheightは指定できていないと思うのですが・・・
<div style="width:500px;height:60px;text-align:center;vertical-align:middle;display:table-cell;border:1px solid;">
text<br>text
</div>
とすればIE以外であれば中央配置できます
外枠と内枠のwidth,heightがきっちり決まっているのであれば
<div style="width:500px;height:300px;position:relative;overflow:hidden;border:1px solid;">
<div style="width:40px;height:40px;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;">text<br>text</div>
</div>
という感じで出来ます
※width:40px;height:40px;はテキスト量によって調整
※それに伴いmargin-top:-20px;margin-left:-20px;をheightの半分(top)、widthの半分(left)にしてください
参考URL:http://www.web-mame.net/css_course/css_size.html
こんにちは、いつもありがとうございます。
vertical-alignですが、違う条件で一行が中央揃えになったのを見て
早合点していました。
その後泥沼の混乱に陥り頭から離れなくなり
css参考書を買って調べて不可能という
これまた早合点に至っておりました。
書き込み頂いた通りでバッチリでした。
ご親切にありがとうございました。
No.4
- 回答日時:
私は小さな事はpxかemで、大枠は%を使っています。
固定は、私は苦手です。細かい指定をすると、ブラウザ間であわせるのが大変ですし、リキッドの方が私のレイアウトでは、対応できます。混ぜて適材適所で使ってます。
質問者さんの想定には入っていない単位ばかり使ってる事になります。
No.3
- 回答日時:
追記
一応1ピクセル=○ポイントの変換は出来るようですが…
http://www.glamenv-septzen.net/pukiwiki/index.ph …
参考になるかと思いますので読んでみて下さい。
No.1
- 回答日時:
ポイントは物理的な値です。
70ポイント=1インチ=2.54cmなのですが、パソコンはピクセル単位で表示しているので使用するモニターやOSによって大きさが異なってしまいます。
よってウェブデザインの際はピクセルで制作することをお勧めします。
早速のご回答ありがとうございます~。
pxがよいとのことですね。とりあえずpxではじめてみます!
でも、pxもパソコンの解像度に比例して表示される大きさが変わりますよね?
ptのほうは、物理的な単位なのに、解像度によって変わってしまう
ということですが、その違いがまだよくわかりません・・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- C言語・C++・C# C言語の質問です、プログラミング初心者です このような文字列があった場合 "abcdef☆ghijk 4 2022/11/22 10:56
- その他(ビジネス・キャリア) 製造業の倉庫でのQC発表テーマなにか参考になるものありますか? 金属板の加工をしています。 そこの倉 1 2022/10/12 12:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Gmail 「Andoroidスマホ、Gmailで 文字の大きさの変更はどうすればいいのでしょうか?」 普段、文 1 2023/04/04 17:11
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- 画像編集・動画編集・音楽編集 動画ファイル(ISO)ファイルを圧縮するフリーソフトはありますか? 12 2023/08/06 10:46
- Outlook(アウトルック) Outlook 受信メールの文字サイズ変更 2 2022/10/14 14:41
- JavaScript ブックマークレットについて 2 2022/10/09 11:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
中点「・」の改行について
-
CSSがなぜかfont-sizeだけ効か...
-
Media Queries 4 で 非推奨とな...
-
CSSで背景画像を一番下にもって...
-
表示倍率を変えるとレイアウト...
-
form input テキストを上下中央...
-
CSS、width100%でもできる余白
-
ページを拡大縮小でborderが消...
-
HTMLのiframeの入れ子について
-
CSS上での計算を行うためのルー...
-
<div>と<div>の間の10px程の...
-
Safariでheight:100%のボックス...
-
横並びリスト ブラウザ縮小 カ...
-
cssで「下よせ」ってどうやって...
-
CSSで画像を同じ位置に重なり合...
-
CSSでiframe要素の編集
-
【CSS】ヘッダーの高さが不明の...
-
CSS:animation開始位置の設定
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
W3Cのソースコードの検証サービ...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
CSSがなぜかfont-sizeだけ効か...
-
table周辺の隙間をなくしたい。
-
footer を横幅いっぱいに広げる...
-
【CSS】ヘッダーの高さが不明の...
-
CSS3で角丸写真にシャドーを付...
-
定義リストに下線をつけたいと...
-
Media Queries 4 で 非推奨とな...
おすすめ情報