自分はWinを使っているため、Macでの環境動作確認が出来ないのでご存知の方教えて下さい。
CSSでフォントサイズを指定するとき、pt指定ではなくてpx指定がMacにもWinにも
いいのですよね?
それはpxで指定するとWinで見てもMacで見ても同じ大きさのフォントに見えるからでしょうか。
もし違うなら、Macでこのpxだったらギリギリちゃんと見える・・・という大きさを教えて頂けますでしょうか。
Winで見たときに10pxくらいの小さいかわいい文字でサイトを作りたいと思っているので、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

Netscape6.xでは、pxで指定してもユーザが文字サイズを変更できますので、それによる表示の崩れを防止することはできません。



そもそもブラウザの機能で文字サイズを変更できるようになっているのは、視力が弱い等の理由で作者の指定した文字サイズでは閲覧に支障をきたすのをユーザが回避するためです。ですから、文字サイズは極力ptやpxなどの絶対値指定を避け、smallやlargeなどの相対指定することが推奨されています。

それでレイアウトが崩れて困る、というのはTABLE要素で(やはり絶対値を使って)レイアウトするなど、これまたユーザにとって不親切なよろしくない技法でレイアウトしているから、ということがほとんどでしょう。

#視覚障害者が音声ブラウザを利用してアクセスした場合、TABLE要素でレイアウトされたページの多くは正しく理解するのが困難であり、事実上利用できません。


HTMLとCSSに対して相応のスキルがあれば、上記のようなよろしくない技法に頼らずに高度なレイアウトを実現し、かつ文字サイズを変更されたりブラウザの表示サイズを変更された程度で見苦しく崩れるようなこともありません。

#できれば勉強して、高いスキルを身につけてください。

が、なかなかそこまでできる人は(専門家でも)少ないので、とりあえずはpxで指定すればよろしいと思いますが、10pxが「小さくてかわいい」と思われるのか、「小さくて見づらい」と思われるのかは、見る人によって違います。私の場合は10pxで書かれるとかなり見づらいので、せめて12pxにしてもらえれば、と思います。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
自分がちょっと頭の中にある「見る人に優しいサイト」をいうこともふまえて
お返事を頂けて嬉しいです。
いつもデザインのことを最優先に考えてしまいますので、アドバイスを考慮して
頑張りたいと思います。

お礼日時:2001/11/07 12:35

私は%派ですねぇ。

ブラウザで文字のサイズを変えたときについてきてくれるのがウレシイ。

大きい文字で読みたいのに、サイズを変えてもフォントのサイズが変わらなかったりすると、ちょっとクヤシイです。
ま、レイアウトよりも使い勝手優先ってことで。(でも、Macに持っていったときに、ptで指定するよりも「見れる」ページにはなる。)
    • good
    • 0
この回答へのお礼

ご回答ありがとうございました。
今まで%指定のことは考えたことがなかったので勉強になりました。

お礼日時:2001/11/07 12:36

私もpx推奨派です。

互換を気にする場合はこれが一番です。
ところで、10pxと言う指定は小さすぎるのではないでしょうか。
640x480では丁度良くても、1280x1024では辛い領域に入ると思います。
OSよりも様々なモニタサイズで動作確認してみてはいかがでしょう。

余計なお世話でしたらすみません。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
モニタサイズでも文字の大きさは変わるのですね。
それは知りませんでした。参考になりました。11pxくらいにしようかと思います。

お礼日時:2001/11/07 12:37

>CSSでフォントサイズを指定するとき、pt指定ではな>くてpx指定がMacにもWinにも


>いいのですよね?

良く、御存じですね。その通りです。
Windows環境でしか御存じない方が作られたページを
Macで見ると、全く見え方が違うのでびっくりされると思います。

pxで指定すると、ほぼ同じ大きさになりますので、
旧来のテーブルタグでのレイアウトとCSSを併用されると、いいレイアウトができます。
CSSばかりに頼ると、表示できないブラウザ(や古いバージョン)が増えますので、要注意。

あと、関係ないですが、機種依存文字に気をつけて下さい。商用ページでも結構あります。

参考URL:http://www.hotwired.co.jp/webmonkey/2000/17/inde …
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
なかなかMacで見る機会がないのでアドバイスが参考になりました。
px指定のことを教えていただいてありがとうございました。

お礼日時:2001/11/07 12:39

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qスタイルシートでh1の属性行間のを高さを17ピクセルにしたい場合

スタイルシートでh1の文字の大きさを変えていますが、表示すると本来の行送りと同じ分の高さが出て、デザイン的に高さがありすぎる行間になっています。
この場合、行高さの設定をするのですか。line-height:17px;で指定しても直らないようなんですが。

この指定で合ってますか。

Aベストアンサー

line-heightは行間を開けるタグで減らす為のタグではない。

line-height:17px;
の値17からh1の縦幅値を引いた数字が行間になる。
h1は元々幅が大きいので・・・

margin指定
---------------------------------
<style type="text/css"><!--

h1 { font-size: 18px; }

--></style>
---------------------------------
<h1>BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 1px 0;">BBBBB</h1>
<h1 style="margin: 2px 0;">BBBBB</h1>
<h1 style="margin: 3px 0;">BBBBB</h1>
<h1 style="margin: 6px 0;">BBBBB</h1>
<h1 style="margin: 10px 0;">BBBBB</h1>
<h1 style="margin: 15px 0;">BBBBB</h1>
---------------------------------

line-heightは行間を開けるタグで減らす為のタグではない。

line-height:17px;
の値17からh1の縦幅値を引いた数字が行間になる。
h1は元々幅が大きいので・・・

margin指定
---------------------------------
<style type="text/css"><!--

h1 { font-size: 18px; }

--></style>
---------------------------------
<h1>BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 1px 0;">BBBBB</h1>
<h1 style="margin: 2px 0;">BBBBB</h1>
...続きを読む

Qcssで文字サイズ指定、ptでもpxでも指定できますが、違いは?

CSS初心者です。初歩的ですが、教えてください。
文字サイズの指定の単位はいろいろあるみたいですが、
皆様はどの単位を使っていますか?
例えば、ptとpxどちらも結構細かくサイズを指定できますが、
どちらかを選ぶ理由がいまのところありません。
どちらを何故使うのか、違いはあるのか・・・?
よろしくお願いします。

Aベストアンサー

>pxもパソコンの解像度に比例して表示される大きさが変わりますよね?
それは勿論ですが、基準にしやすいかしにくいか、という違いが出ます。

きっちりしたレイアウトを制作する際は横幅をピクセルで指定する事になると思います。
例えば600ピクセルで制作するとしましょう。
そこに1文字を目一杯表示したいとします(そんな事はしない。というツッコミは無しで…)。
その場合はフォントのサイズを600pxにすればいいことは考えるまでもありません。

しかしポイントの場合は?
「1ピクセル=○センチ」という変換は出来ません。よってポイントでも同じ事が言えます。
例え600ピクセルの横幅ぴったりのポイント数値を見つけたとしても、他の画面では?という事になります。

ポイント、センチ単位は印刷物の制作等の場合は使います。イラストレーターでチラシを制作する際等です。
しかしホームページは印刷する事を重視して制作するものではありません。
その為ピクセル単位を推薦します。

読みにくい文章かと思いますがこんな感じでいかがでしょう?

Qスタイルシートでのボックス高さ指定

スタイルシートで左側にボックスを指定して、メニュー表示させているのですが
メイン(右側部分)の記事が長くなると、左側ボックスが途中でとぎれてしまいます。
記事の長さに合わせて、ボックスの高さも縦スクロール幅と同じにのばすには、どのようにすれば良いのでしょうか?
height: 100%; としてみたのですがダメでした。
タグを調べてみたのですが、今ひとつ判りません。

質問文もわかりにくくてすみませんが、よろしくお願いします。

Aベストアンサー

一応参考になりそうなURLを乗せておきました。
高さの指定方法とは違いますが参考になれば。

ポイントは空いてしまう空間に背景色が塗られるようにして空間が開いている事を感じさせないようにする。
うまいことブロックを重ねて、長い方のブロックに合わせる、という事だと思います。

参考URL:http://allabout.co.jp/computer/hpcreate/closeup/CU20050328A/index.htm

Qwin,macのフォントの見え方について

こんにちは。
私は今ホームページを作っています。デザイン重視にしたいので
フォントを指定しているのですが、自分は
macで制作しているためwinでどのように表示されるか
わかりません。
もちろん自分でダウンロードしたフォントは使いません。両方ともに入っている
フォントを使いたいと思っています。そこで、
同じフォントでwin,macの見え方一覧みたいなものが載っているサイトなどは
ありませんでしょうか。 自分でも調べたのですが納得出来る
内容のものがなかったので質問させて頂きました。
もしありましたらお教えください。
(ちなみにhttp://webscan.jp/は試させて頂きました。)

Aベストアンサー

以前このサイトを参考にしたことがあります。
http://aor.ktplan.jp/fonts/allfonts.html

比較しにくレイアウトになってますが、左半分は画像なのでハードにコピーして並べてみてはいかがでしょうか?

参考URL:http://aor.ktplan.jp/fonts/allfonts.html

Qスタイルシートで画面を上下に分割,高さを上部はpxで指定,下部は残り全部にする方法

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面より下に100pxはみ出してしまいます.
次のようにdivを入れ子にするとうまくいくんですが,内部に表示させる内容によっては不具合が出るので,どうしてもdivどうしが独立した形で実現させたいです.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100%; background-color:#fcc; ">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
</div>
</body>
</html>

他の質問サイトでも尋ねてみたのですが,質問の意味を理解してもらえずに別に問題はないという回答を1件頂いたのみで解決できませんでした.また,テーブルではなく必ずスタイルシートで実現したいです.対策をご存知の方,ご教示よろしくお願いします.

画面を上下に分けて,上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い,次のようにしてみたんですがうまくいきません.

<html>
<body style="margin:0px; padding:0px;">
<div style="width:100%; height:100px; background-color:#ccf;">
画面上部
</div>
<div style="width:100%; height:100%; background-color:#fcc; ">
画面下部
</div>
</body>
</html>


要は下部の「残り全部」のやり方がわかっておらず,全体的な高さが100px+100%になり,表示画面...続きを読む

Aベストアンサー

思い出したのでIE対応にするための追記。

前回のサンプルの<head>~</head>に以下を追加。
<!--[if IE]>
<style type="text/css">
#Content {
width:100%;
height:expression(document.body.clientHeight - 100);
}
</style>
<![endif]-->

参考
http://www.keynavi.net/ja/bugh/comments.html
http://useyan.x0.com/s/html/expression/

Qclip:rect(*px,*px,*px,*px)について

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そしてclipを動的にするとIE6でもちゃんとなるのですが何故でしょう?

<script language="javascript"><!--
function move(ht,wr,hb,wl) {
obj = document.getElementById("game");
ht--; if(ht < 0) ht = 0;
hb++; if(hb > 300) hb = 300;
wr++; if(wr > 500) wr = 500;
wl--; if(wl < 0) wl = 0;
obj.style.clip = "rect("+ht+"px "+wr+"px "+hb+"px "+wl+"px)" ;
if(ht == 0 && wl == 0) return false;
setTimeout("move("+ht+","+wr+","+hb+","+wl+")",10);
}
//--></script>
<style type="text/css"><!--
#game {
width:500px;
height:300px;
background-color:lightcyan;
position:absolute;
}
--></style>
<body onload="move(150,250,150,250)">
<div id="game"></div>

お世話になります

clip:rectを試しているのですが疑問があるので教えていただきたいのですが

<style type="text/css"><!--
#clip {
position:absolute;
clip:rect(5px,40px,40px,5px);
background-color:blue;
}
--></style>

<div id="clip">
あいうえお<br>
かきくけこ<br>
さしすせそ<br>
</div>

Firefox、Operaでは表示されているのですがIE6ではclipされずに全表示されています

サイト検索してもIE6は対応しているように書かれているのですが・・・(例文は大抵imgでしたけど)
そし...続きを読む

Aベストアンサー

訂正です。スレ読んだだけで仕様をしっかり読んでませんでした。

Authors should separate offset values with commas.
CSS記述者はオフセット値をカンマで区切るべきである。
User agents must support separation with commas,
User Agentsはカンマ区切りをサポート【しなければならない】が

but may also support separation without commas, because a previous revision of this specification was ambiguous in this respect.
この仕様の前回の版ではこの点について曖昧な記述だったため,
カンマなし区切りをサポートしても良い。

#おそらくIEの開発は,この前版までの情報を頼りに製作されていたんじゃないかなあ

Qスタイルシート(CSS)で、高さ(height)を隣の要素に合わせたい

CSSでの、高さの設定について質問させて下さい。

あるボックス要素の中に入った2つの子要素を、
親要素の高さに合わせるのではなく、
隣の要素に高さを合わせたいのですが、
何か方法は無いでしょうか。

隣の要素の中の文章などのテキストが長文になると、
親要素の高さは動的に変化してくれますが、
隣の要素はうまく対応してくれません。

初歩的な質問で恐縮ですが、
どなたか、よろしくお願い致します。

Aベストアンサー

こんにちは

『ブラウザ用』しか見ていないのでcss内は適当です(--;)

cssのみではheight:*px;指定しないとおそらく無理?だと思います

<style type="text/css"><!--
#newBox {
width:600px;
margin:70px auto 0px;
border:1px solid darkgray;
}
#newBox_Left {
background-image:url(left.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
#newBox_center {
background-color:Lavender;
width:560px;
float:left;
}
#newBox_Right {
background-image:url(right.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
--></style>

<script language="javascript"><!--
window.onload=function() {
h = document.getElementById("newBox_center");
boxh = h.clientHeight;
document.getElementById("newBox_Left").style.height = boxh + "px";
document.getElementById("newBox_Right").style.height = boxh + "px";
}
//--></script>

<noscript>
<style type="text/css"><!--
#newBox_Left,#newBox_center,#newBox_Right {
height:500px;
}
--></style>
</noscript>

<div id="newBox">
<div id="newBox_Left"></div>
<div id="newBox_center">
 text<br> text<br> text<br> text<br> text<br> text<br>
 text<br> text<br> text<br> text<br> text<br> text<br>
 text<br> text<br> text<br> text<br> text<br> text<br>
 text<br> text<br> text<br> text<br> text<br> text<br>
</div>
<div id="newBox_Right"></div>
<div style="clear:both;"></div>
</div>

javascriptを使用してますので当然offにしている環境では1行分の背景しか表示されません
そのため<noscript>内でheight指定しています

p.s.
一応これで僕の環境(IE6,Firefox2,Opera9)で実現できているのですがたまに表示が異なることがありますので分かる範囲内であれば修正しますので言ってください

こんにちは

『ブラウザ用』しか見ていないのでcss内は適当です(--;)

cssのみではheight:*px;指定しないとおそらく無理?だと思います

<style type="text/css"><!--
#newBox {
width:600px;
margin:70px auto 0px;
border:1px solid darkgray;
}
#newBox_Left {
background-image:url(left.jpg);
background-repeat:repeat-y;
width:20px;
float:left;
}
#newBox_center {
background-color:Lavender;
width:560px;
float:left;
}
#newBox_Right {
background-image:url(right.jpg...続きを読む

QCSSでフォントの大きさを指定するとき

CSSでフォントの大きさを相対指定したいのですが、Bodyでフォントサイズを80%にすると、テーブルの中はもとのままの100%の大きさです。そこで、Tableのフォントサイズも80%にすると、0.8*0.8したようにさらに小さくなってしまいます。

たとえば、下のようなページだと
-----------------------------
<BODY>
あいうえお<BR>
<TABLE>
<TR>
<TD>アイウエオ<BR>
<TABLE>
<TR>
<TD>aiueo<BR>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
-----------------------------
「あいうえお」が80%の大きさで、「アイウエオ」はさらに小さく、「aiueo」はゴミのように小さくなってしまいます。

どのように指定すれば良いのでしょうか?よろしくお願いいたします。

CSSでフォントの大きさを相対指定したいのですが、Bodyでフォントサイズを80%にすると、テーブルの中はもとのままの100%の大きさです。そこで、Tableのフォントサイズも80%にすると、0.8*0.8したようにさらに小さくなってしまいます。

たとえば、下のようなページだと
-----------------------------
<BODY>
あいうえお<BR>
<TABLE>
<TR>
<TD>アイウエオ<BR>
<TABLE>
<TR>
<TD>aiueo<BR>
</TD>
</TR>
</TABLE>
...続きを読む

Aベストアンサー

本来 body のフォントサイズを 80% にしたら table もそれを引き継いで 80% になるべきなのですが、IE はバグによりそれを引き継がないためこのような問題が生じます。

No.1 の kou-taro さんの方法は IE ではうまく行くものの、そのバグのない FireFox などでは小さくなってしまいます。

どちらのブラウザでも正しく表示されるようにするには、table に font-size:100% を指定します。
こうすると IE でも table が親要素のフォントサイズをそのまま引き継ぐようになるので、ここでは body の 80% を引き継いで同じサイズで表示されるようになります。
FireFox などは元々 font-size:100% となっており、それを明示しただけなので問題は起こりません。

QGoogle Chromeでスタイルシートを変更

Internet Explorerでは、「インターネットオプション」の中の「ユーザースタイルシート」を設定してサイトを閲覧していました。
Google Chromeでも、同じようにスタイルシートを設定して閲覧したいのですが、スタイルシートを設定する場所がわかりません。

Google Chromeでスタイルシートを設定するときは、どこを見ればいいのでしょうか?

Aベストアンサー

真偽の程は分かりませんが、Chrome 33からユーザー・スタイルシートの機能が削除され使えなくなったとの書き込みがあります。
(Chrome 33でユーザー・スタイルシートが削除)
http://hail2u.net/blog/software/removal-of-user-stylesheet-on-chrome-33.html

で、以前から可能だったと思いますが、Firefoxでも使われる拡張機能Stylishを利用する方法が挙がっていますが。
(Stylish)
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe

QMacとWindows両方で同じように見えるフォント

MacとWindows両方で同じように見えるフォントを探しています。

自分このみとしては添付画像のフォントです。
添付画像と同じようなフォントで、Mac/Windows両方で問題なく表示されるようなものはないでしょうか?

よろしくお願いいたします。

Aベストアンサー

> 当方がブログを作成しています。
> MAC側では好みの文字装飾になっているのですが、Windowsでみた際、全然違う文字装飾になって
> いるので、フォントを探している状況です。

これはつまり、第三者があなたのブログを閲覧した際に、あなたが望むフォントで描画したい、ということでしょうか?
もしそうならば、cssでメイリオなり、望むフォント名を優先的に指定すればいいと思いますが。
http://www.6666666.jp/design/20140428/
http://d.hatena.ne.jp/n-yuji/20130225/p1
http://pnra.hatenablog.com/entry/2014/09/23/143453

指定しているにも関わらず異なるフォントになるとすれば、優先順位を誤っているか、描画しているクライアントにはそのフォントがインストールされていないのでしょう。


人気Q&Aランキング

おすすめ情報