画面サイズ・横1024の場合の表示可能サイズについて
いつもお世話になっています。
趣味のサイト再構築に当たり、流行のブログ風デザインにしようと考えているのですが、横幅のサイズで迷っています。
今までは800×600を基本にして、横幅700にして作成していました。
しかし昨今ではノートPCでも高解像度の製品が多く、自分のPCも横幅1280です。
サイトのアクセス解析等を見ても、1024以上が100%を占め、800サイズは一件もありませんでした。
そこで今回は1024を対象にして作成しようと考えているのですが、バランスを考えると横900くらいで作るのが無難なのでしょうか?
背景には壁紙を挿入する予定ですので、余白部分があまり狭すぎても、おかしな感じになってしまいます。
そもそも1024の解像度の場合、スクロールバーの部分を計算に入れると、横スクロールバーが出ない最大横幅サイズはいくつくらいなのでしょう?
ご存知の方、いらっしゃいましたら教えて下さい。
また、実際に横1024を規定としてサイトを作成している方、横幅はいくつくらいで作っていらっしゃいますか?
参考のためお聞きしたいです。
よろしくお願いします。
No.3ベストアンサー
- 回答日時:
960でつくってます。
縦スクロールバーの横幅を抜いても左右に20pxくらい余白がのこる感じです。理由は960グリッドシステム(http://960.gs/)が使えるから。
約数が多いので
(2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480)
http://960.gs/demo.html
のようにレイアウト計算がしやすいという利点があります。
960グリッドシステム、このようなものがあるとは全然知りませんでした。
参照先のサイトを拝見しましたが、確かに複雑なレイアウトにしたい場合には重宝しそうですね。
私自身は英語に弱く、またサイト構築に関しても初心者に毛が生えたようなものなので使いこなせそうにないですが、この数字を知っているだけで役に立ちそうです。
回答ありがとうございました。
No.2
- 回答日時:
私も趣味のサイトがいくつかあって、しかも訪問者は年齢も端末も様々、しかも印刷や教室で使われることも。
そこで、HTML自体は極めてシンプルにしてスタイルシートでプレゼンテーションを指定しています。
@media screen{
div.Body{
width: 80%;
max-width: 800px;
min-width: 600px;
margin-left: auto;
margin-right: auto;
}
}
としています。
スクリーン端末だと、基本的にはディスプレイ幅の80%ですが、大きなディスプレイでも800px以上にはならず、小さな画面でも600pxより小さくならない。
PDAや携帯端末@media tty,handheld,tv{}では、ディスプレイ幅いっぱい。印刷@media print{}とか。
私のサイトは、完全に女性向でして年齢も限られています。
印刷や教室で使われることは……まずないでしょう(笑)
ORUKA1951さんのおっしゃるように、可変というのも一つの選択肢ですね。
ただ装飾用に写真素材とかも使う予定なので、2カラムにして写真等をそのカラムの幅に合わせた場合、可変となるとおかしな感じになるかも。
シンプルなデザインならそういうのもありですね。
回答ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- 着物・浴衣・水着 男物の浴衣を女性が着る時の注意点 1 2022/07/01 12:40
- 物理学 特殊相対性理論を、完全否定に成功~ガンマの数式は、成立しない。 2 2023/03/08 19:30
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- 物理学 光り時計の思考実験をやり直すと、ガンマの数式は成立しない。 2 2022/05/24 09:01
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- デザイン 縦18.0cm 横13.5cm の紙はどの用紙サイズに近いか 4 2022/08/13 11:00
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
CSSの設定
-
CSSでh1とその下の文字との行間...
-
HTMLフォームのSELECTの幅を一...
-
CSSで中央ぞろえにするには?
-
IE8ではtext-align: center;で...
-
CSSでテキストを垂直、中央に設...
-
ホームページの左右にスペース...
-
DIVボックス内でのCSSを使用し...
-
スタイルシートで均等割りつけ...
-
複数のDivタグを中央ぞろえ(Dr...
-
CSSでテーブルセルの大きさ...
-
macとwindowsのレイアウト崩れ...
-
全体のレイアウト:中央揃えに...
-
FFとIEでスクロールバー、背景...
-
テキストボックスの様に文字の...
-
スクロールバーが表示されない。。
-
表(?)を中央に寄せ、一番上...
-
画面サイズ・横1024の場合の表...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSSのtransform: translate(-50...
-
aタグに直接style=""で:hoverを...
-
<h1>タグの後の行間を詰めたい。
-
HTMLフォームのSELECTの幅を一...
-
インラインフレームの表示位置...
-
INPUT TEXT内の文字位置を指定...
-
コードを書いて下さい( ; ; )...
-
text-alignの解除の方法
-
FireFoxで見るとブラウザの幅に...
-
なぜ左に寄っているの?
-
端から端まで横線を引きたい
-
ホームページビルダー 空白の...
-
アップロードするサーバーによ...
-
CSSでh1とその下の文字との行間...
-
Formタグのブロックの高さについて
-
CSSの設定
-
<legend>で表示されるタイトル...
-
ie8とCSSとマウスオーバーで何...
-
chromeだけbody直下に空白が開く
-
macとwindowsのレイアウト崩れ...
おすすめ情報