CSSを使った相対単位の指定方法を教えていただけますか？

質問

今までpxなどの固定幅でしかサイトを作ったことが無かったのですが、今回、％でサイトを作っていこうと思います。

色々とお伺いしたいことは有るのですが・・・。
何個か聞いても良いですか？

質問1
文字などの単位は何で指定したら良いですか？以前は12pxとかで指定していましたが、枠だけ％で文字はpxって何か変かな？と思っています。
通常こういった相対的なサイトを作る場合、どんな単位で指定されますか？

質問2
現在CSSで3カラムをやっとこ作りました。大まかに左から30％・50％・20％といった感じで、うまく表示されているのですが、画面の端っこをつまんで表示を小さくしたら、カラムごと移動してしまいます。

一番小さく画面をしたら、全部左側のカラムの下に移動して、縦一列の1カラムのようになってしまいます。文字は仕方ないかと思うのですが、BOXごと移動は少し変なので、これを固定するにはどうしたら良いでしょうか？？

色々質問してすみません・・・。1つでも結構ですのでお分かりになる方いらっしゃいましたら、アドバイスお願いします！

また、相対的な単位でもサイト構成で注意事項などあれば、ご指摘いただければ幸いです。

どうぞ宜しくお願いいたします。

回答No.4

MAN_MA_RUI · ベストアンサー

質問1
標準フォントサイズを % 指定にしておいて、そこから em 単位で相対値指定をすると環境間での表示サイズの差がほとんどなくなりますよ。

例えばbodyが80%で、大きくしたいところを2emで指定する、とか。

質問2
数値を少し小さくするだけで多少の効果はあると思います。

しかしマルチカラムレイアウトでウインドウをある程度狭くした場合はボックスの動くほうがいいんじゃないかな。
ウインドウサイズや表示フォントサイズなどの関係で文字の折り返し頻度が多くなると非常に読みづらくなりますから。

あ。最大限に表示幅を小さくしたときにボックスがずれると言うレベルまで行った場合のことは無視して構わないと思いますよ。
そこまで極端に幅を狭くして文字を読もうとする人は普通いません。いるとすればその人の性格が曲がっているのです^^;
例えばあなたは１行１０文字以下で折り返されるような状態で表示された長い文章を読みたいと思いますか？
一般的なユーザーはウインドウサイズ・フォントサイズなどを読みやすい大きさに設定するだろうと思います^^
ウインドウサイズをぎりぎりまで狭くしてもそれがユーザーにとって読みやすい大きさであるとは考えにくいです。

回答No.3

ba-demi

・文字サイズについて
「幅はパーセントだから文字の単位はこれであるべきだ」ってことは基本的にありませんが、ピクセルで指定するとIEで見るときに文字の大きさを変えられないので、「small」や「em」や「%」の方がいいと思います。

・横幅をパーセントで指定したボックスの配置について
お使いのブラウザはIEではありませんか？
３つのカラムを、何を使って配置しているのかわかりませんが、IEには「幅をパーセント指定したfloatの段組が崩れる」というバグがあります。
必ず崩れて表示されるというわけでなく、表示されたり崩れたりと微妙です。もしfloatを使っているならおそらくそれが原因です。
対処法については、「パーセント値の合計を100％未満にする」というのもありです。96%とか97%とか。
レイアウトにもよりますが、positionを使った配置も有効だと思いますので試してみてください。

回答No.2

naokita

単位は何でもＯＫ　混合も可能です。

大きな文字はpx指定でもいいのですが、
小さなの文字は、％やem指定がいいでしょうね。
big　small　もありです。
（フォントサイズ変更時に改行される場合の横幅注意です。
サイズ変更に伴い改行されると
見栄えが悪くなる場合もありますので・・・）

divフロート枠の％指定は難しいですよ。
（外枠を作るか、その点だけはpxで固定）

回答No.1

dezimac

1.臨機応変に。何も全てを相対・絶対指定する必要ないです。
文字サイズを12pxと指定して枠の幅を50%としてもおかしくないです。
幅は100px固定で文字サイズは80%とか。
ただ、文字サイズの絶対指定はあまりお勧めしません。
相対指定（％）でしておけば、見る側が設定している文字サイズを基準にするので小さくて見づらいということは防げます。