今、職場のHPを作っています。
・・・・が初心者のため細かい設定がよくわかりません。
画面サイズの設定の仕方を教えてください。
本やいろんなサイトで調べると 規格(VGA・VGA ・XGA ・SXGA・UXGA ・WUXGA) とそれに応じた
・横幅・高さ(px) と出てきます。
その規格の意味と、そもそも横幅・高さのPxの設定をどうやってやればいいのかが分かりません。
どこを調べても 横幅1024px高さ 768px 位が理想です・・・・・と数字は書いてあるのですが肝心なその設定方法が書いてないのです。
とても初歩的な質問で申し訳ありませんがよろしくお願いします。
No.1
- 回答日時:
そのサイズに収まるように、サイトを作れという意味です。
CSSで設定するか、CSSがわからなければ幅が1024px以下のテーブルを作り、その中に中身を作っていってください。
今現在使われているディスプレイの中で一番狭いものを基準にすると、閲覧者の大多数がストレスなく見られるという考え方です。
また、横幅1024px、あるいは、高さ768px以上の画像は避けてください。
特に、横スクロールは嫌われます。
横幅1024px、高さ768pxというのはディスプレイサイズなので、実際にはブラウザの枠も考慮して、ひとまわり小さく設定した方が良いですよ。
高さ自体はそれほど気にする必要はありませんが、そのページを開いた時にどこまで見えるかの印象は気にした方が良いです。
あと、印刷される可能性があるページは、そのあたりを考慮する必要があります。
この質問内容だと、カテゴリは、
[技術者向] コンピューター > プログラミング > Webデザイン・CSS
の方が、良いですよ。 (^^
この回答への補足
Pochi67さん
ありがとうございました!
とても良くわかりました。
ただ、どうしても一つ。pxはどうやって設定するのですか?
テキストエディタはterapadを使っています。
表示→オプション→ウィンドウ で幅と高さの数値を変えたのですが何の変化も無いのですが・・・・?
No.2
- 回答日時:
せっかく勉強したことですが、HTML を記述するときには画面サイズの話は忘れてください。
なぜなら、HTML はもともとどのような画面サイズでも、音声読み上げのような画面という概念がない環境でも、記述された内容を理解できることを目的としているからです。
職場のサイトを記述するという事は何かを誰かに伝えたいことがあるのでしょう。
ならばまず、その何かを、伝えたい誰かに分かるように書きましょう。できれば文章だけで、表や写真があった方がわかりやすい部分にはそこにどのような写真や表があるかの説明を記述します。
また、文の量が大きくなると「詳しくは別の文で」としたくなるでしょう。それはそういう風に記述します。
そうするとその文章には何らかの構造があるはずです。
たとえば、わたしがここで今まで書いてきた文には、画面サイズのことは忘れろという話があって、次に何か伝えたいことを書けという話がありました。
その文書構造を HTML タグを使って明確にしていきます。
それで HTML は完成です。
……え、見た目が地味だ?
ええ、この段階でやっと見た目とか画面サイズとかの話になってきます。
上記の文書構造のみの HTML に CSS を使ってデザインを施していきます。
文書構造がしっかりしていればデザインを付けていくのは楽です。逆に、なまじデザインのことを考えて文書を書いてしまうと逆に後で苦労します。
忘れないでください。
よっぽどのことがない限り、あなたが作ったページを見る人はページのデザインを見に来たのではなくページに書かれた内容を見に来ているのです。デザインに力を入れて内容をおろそかにしたら本末転倒です。
とてもわかりやすくありがとうございました。
>忘れないでください。
よっぽどのことがない限り、あなたが作ったページを見る人はページのデザインを見に来たのではなくペー ジに書かれた内容を見に来ているのです。デザインに力を入れて内容をおろそかにしたら本末転倒です。
おっしゃる通りだと思います。いづれにしてももう少し勉強し直さないと・・・頑張ります。
No.4ベストアンサー
- 回答日時:
基本的にNo.2さんの言われるとおりです。
名文です。HTMLではサイズは一切考えません。それをすると最悪、「tableで並べてしまえ」になりかねません。tableはすでに御存知のとおりHTML4.01の勧告(1999年)以来、「単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」「・ページレイアウトの目的で表を用いる。・・・【中略】・・・こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」と強く否定され続けてきました。
HTMLでウェブサイトを作成する最大の目的は
「HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」
「どこを調べても 横幅1024px高さ 768px 位が理想です」それをデフォルトのサイズとして作成するのが良いですが、サイズは指定しません。なぜならユーザーによって様々な解像度、ウィンドウサイズで利用するからです。
私自身は企業や公共団体など多少でも公共性のあるものは、640px(もしくは480px)以上ならスクロールなしで見られるように製作します。480px以上なら横スクロールなし、それより広いと1000px程度までウィンドウ幅に追随して、それを超えると左右が空いて1000pxで固定されるとか・・
>画面サイズの設定の仕方を教えてください。
min-width:470px;max-width:1000px;width:100%;margin:0 auto;padding:5px;
そのまえに、HTMLを作ります。デザインは一切考えずに!!!ウェブページを作成するときの基本中の基本は、【構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )】です。読んでおくこと!!
すなわち、
<h1>ここは見出し</h1>
<p>ここからここまではひとつの段落</p>
<ol><!-- ここは序列リスト -->
<li>ここはリストの項目</li>
</ol>
とね。おかしなサイトを見る前に、
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
だけは通しで目を通しておきましょう。
サイト作りはとりあえず
・はじめてのWebドキュメントづくり( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
を全部こなしてください。
その後で、どのようにデザインするかを考えましょう。
本当にありがとうございます。
今まで頭の中で モヤモヤ していたものが晴れました!
まず 教えていただいた通りやってみます。
心から感謝いたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- Word(ワード) 最高裁判所から通達がある Wordの書式設定。所謂 裁判所に提出するすべての書類のことです。 A4縦 2 2022/12/23 15:00
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- Excel(エクセル) excelの列幅高さが勝手に変わる(特定のPCだけ) 8 2022/07/14 16:51
- Excel(エクセル) エクセルについて教えてください。 2 2023/06/14 11:11
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- プリンタ・スキャナー プリンターのスキャンのことについての質問です。 4 2023/08/02 11:48
- C言語・C++・C# このプログラミング誰か教えてくれませんか 3 2022/05/13 17:27
- プリンタ・スキャナー エプソンの PX 105 プリンター ブラックのみカートリッジ使用する設定 教えてください 1 2023/03/20 17:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HP作成について
-
Macで画像の切り抜きできないの?
-
オンマウスで画像がぶれる(High...
-
Flashオブジェクト(swf)のセン...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
【ヒトの神秘】美男美女から何...
-
リストマーカーをボックス内に...
-
ボタンをセル内一杯に表示させ...
-
<div id="container">の使いか...
-
<table>の高さ固定。情報増加時...
-
質問1.
-
htmlのolやulなどlistにtitleや...
-
idの中のid指定
-
サイトにjQueryが使用されてい...
-
html/cssの、navを2段にする...
-
リンクをつけた画像をクリック...
-
個別にリンクの色を変える方法
-
border-style:solidで文字がずれる
-
<h1>、<h2>と<p><div>の行間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Macで画像の切り抜きできないの?
-
iPadのスクリーン座標のサイズ...
-
HTMLソースの中で、画像を表示...
-
ヘッダーデザインをするさい形...
-
iPhone Safari 画像の幅指定が...
-
テーブルのセル内のマージン
-
cssで点線を表示する方法
-
ボタンの配置
-
画用紙 26cm×37.5cmは 何px で...
-
スタイルシートの"_width"って...
-
サムネイル自動生成プラグインn...
-
Pythonでエクセルファイルの列...
-
十進BASICでのプログラム
-
横幅が2880pxを超えるデザイン...
-
ベイシックのプログラミングに...
-
横幅が狭いホームページ
-
スペーサーGIFの作り方
-
ブラウザ上で画像が縦長に表示...
-
FEDORA15のアイコンを小さくしたい
-
htmlの文字が縦書きになる
おすすめ情報