今までpxなどの固定幅でしかサイトを作ったことが無かったのですが、今回、%でサイトを作っていこうと思います。
色々とお伺いしたいことは有るのですが・・・。
何個か聞いても良いですか?
質問1
文字などの単位は何で指定したら良いですか?以前は12pxとかで指定していましたが、枠だけ%で文字はpxって何か変かな?と思っています。
通常こういった相対的なサイトを作る場合、どんな単位で指定されますか?
質問2
現在CSSで3カラムをやっとこ作りました。大まかに左から30%・50%・20%といった感じで、うまく表示されているのですが、画面の端っこをつまんで表示を小さくしたら、カラムごと移動してしまいます。
一番小さく画面をしたら、全部左側のカラムの下に移動して、縦一列の1カラムのようになってしまいます。文字は仕方ないかと思うのですが、BOXごと移動は少し変なので、これを固定するにはどうしたら良いでしょうか??
色々質問してすみません・・・。1つでも結構ですのでお分かりになる方いらっしゃいましたら、アドバイスお願いします!
また、相対的な単位でもサイト構成で注意事項などあれば、ご指摘いただければ幸いです。
どうぞ宜しくお願いいたします。
No.4ベストアンサー
- 回答日時:
質問1
標準フォントサイズを % 指定にしておいて、そこから em 単位で相対値指定をすると環境間での表示サイズの差がほとんどなくなりますよ。
例えばbodyが80%で、大きくしたいところを2emで指定する、とか。
質問2
数値を少し小さくするだけで多少の効果はあると思います。
しかしマルチカラムレイアウトでウインドウをある程度狭くした場合はボックスの動くほうがいいんじゃないかな。
ウインドウサイズや表示フォントサイズなどの関係で文字の折り返し頻度が多くなると非常に読みづらくなりますから。
あ。最大限に表示幅を小さくしたときにボックスがずれると言うレベルまで行った場合のことは無視して構わないと思いますよ。
そこまで極端に幅を狭くして文字を読もうとする人は普通いません。いるとすればその人の性格が曲がっているのです^^;
例えばあなたは1行10文字以下で折り返されるような状態で表示された長い文章を読みたいと思いますか?
一般的なユーザーはウインドウサイズ・フォントサイズなどを読みやすい大きさに設定するだろうと思います^^
ウインドウサイズをぎりぎりまで狭くしてもそれがユーザーにとって読みやすい大きさであるとは考えにくいです。
No.3
- 回答日時:
・文字サイズについて
「幅はパーセントだから文字の単位はこれであるべきだ」ってことは基本的にありませんが、ピクセルで指定するとIEで見るときに文字の大きさを変えられないので、「small」や「em」や「%」の方がいいと思います。
・横幅をパーセントで指定したボックスの配置について
お使いのブラウザはIEではありませんか?
3つのカラムを、何を使って配置しているのかわかりませんが、IEには「幅をパーセント指定したfloatの段組が崩れる」というバグがあります。
必ず崩れて表示されるというわけでなく、表示されたり崩れたりと微妙です。もしfloatを使っているならおそらくそれが原因です。
対処法については、「パーセント値の合計を100%未満にする」というのもありです。96%とか97%とか。
レイアウトにもよりますが、positionを使った配置も有効だと思いますので試してみてください。
No.2
- 回答日時:
単位は何でもOK 混合も可能です。
大きな文字はpx指定でもいいのですが、
小さなの文字は、%やem指定がいいでしょうね。
big small もありです。
(フォントサイズ変更時に改行される場合の横幅注意です。
サイズ変更に伴い改行されると
見栄えが悪くなる場合もありますので・・・)
divフロート枠の%指定は難しいですよ。
(外枠を作るか、その点だけはpxで固定)
No.1
- 回答日時:
1.臨機応変に。
何も全てを相対・絶対指定する必要ないです。文字サイズを12pxと指定して枠の幅を50%としてもおかしくないです。
幅は100px固定で文字サイズは80%とか。
ただ、文字サイズの絶対指定はあまりお勧めしません。
相対指定(%)でしておけば、見る側が設定している文字サイズを基準にするので小さくて見づらいということは防げます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSSを教えて下さい webデザイナ...
-
iPhoneで HTMLファイルを閲覧
-
2カラム、左メニュー、特定パー...
-
画像が分割されて切り替わる、...
-
テーブルの行を折りたたみたい...
-
HTMLで画像をポップアップで表...
-
HTMLについて教えてください。 ...
-
メモ帳の段落の揃え方
-
WEBページを強制的に横画面で見...
-
CSSを教えて下さい webデザイナ...
-
CSSでinputのテキストカラーを...
-
、URL化させるにはどうしたらい...
-
角丸画像の背景色を透明にした...
-
スマホでHTMLファイルを開いて...
-
<input>のstep属性に違反する入...
-
テーブルタグのセルの幅の一部...
-
このサイトのカテゴリのチェッ...
-
HTML CSSの勉強のポートフォリ...
-
スライダーの枠に動画を収める...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
iPhoneで HTMLファイルを閲覧
-
スマホで特定のサイトを表示さ...
-
HTML CSSの勉強のポートフォリ...
-
css初心者 フレックスボックス...
-
WEBページを強制的に横画面で見...
-
メモ帳の段落の揃え方
-
スライダーの枠に動画を収める...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
excelをhtmlに変換した途端、一...
-
テーブルタグのセルの幅の一部...
-
ウェブサイトにアップされてい...
-
CSSファイルの日本語コメントが...
-
HTMLで特定の文字だけ色を変え...
-
先日ウェブデザイン技能検定三...
-
スマホでHTMLファイルを開いて...
-
静止画画像をクリックすると音...
-
画像が分割されて切り替わる、...
おすすめ情報