window
トップページ > 記事閲覧
*ブラウザの画面サイズを問わずページを「中央」に表示させる方法
日時: 2009/01/14 13:02
識別: ID:La.Uukpb3wi.
名前: Nao & Waka
こんにちは現在 Version.11でHPの更新と運営をしていまして立ち上げてからもうだいぶ経ちます。

現在通常1024×768ピクセルでページを作成してますがアップロードすると1024×768では作成した通りの表示が出来ますけどそれより大きい1280×720、1280×768、1280×800のサイズに変えて見るとそのまま全部「左側」に偏って表示されてしまいます。

ほかのサイトを見ると画面サイズに関係なく全ページが常に中央に表示され何の問題もないのですが・・・それをホームページビルダーで可能に出来る方法があればご教授をお願いします。

なお私のサイトは通常の画像は勿論背景にも加工した画像(壁紙)を多用しトップページ以外すべて「フレーム」で構成されていますのでその事も念頭に置いたアドバイスも頂ければ幸いです。

P.S
「画面表示」は通常のデスクトップPCと15.4インチ液晶のノートPCの2台で確認しています。
メンテ

Re: ブラウザの画面サイズを問わずページを「中央」に表示させる方法 ( No.1 )
日時: 2009/01/14 14:25
名前: nn

(1)DOCTYPEをシステム識別子付きに変更する。
http://hpbuilder.net/hpbuilder1.htm

(2)挿入→その他→レイアウトコンテナ

(3)レイアウトコンテナを右クリック→スタイルの設定
ID欄(クラスでも可)に marutto とでも入力。
横の編集ボタンを押してスタイルシートマネージャー起動。
位置タブの幅をテケトーに指定。
レイアウトタブのマージン、左右方向を自動に。
(ドロップダウンが予約語の時にグレーアウトした空欄右横の
ちっこいボタンを押すと「自動」と出てくる)
【参考】http://www.wsb.jp/hpb/upsite/step4/s407.htm
ちなみに(1)をしておくと、『中央に配置する(IE6)』の操作は不要。

(4)このレイアウトコンテナ内に内容を書いていく。


上記操作では、ページ内のstyle要素にスタイルを定義していますが、
外部スタイルシートを使った方が何かと便利です。

以上、単一ページでの標準的な中央寄せ方法です。
フレームの場合は、分割方法によります。


いずれにせよ、どこでも配置モードでは無理です。
メンテ
知りませんでした・・・ ( No.2 )
日時: 2009/01/14 21:56
名前: Nao & Waka

こんばんは、初めまして nnさん。

HPを長くやってるにも係らずここに書くのも恥ずかしいくらいの「初歩な質問」に具体例(URL)まで紹介しての真摯な回答・・・本当にありがとうございます。

「どうしてこうなるんだろうか???」

試行錯誤の連続だったのですがまさか「どこでも配置モード」が原因だとは思いも寄らなかった次第、今まで使い慣れてただけに衝撃の大きさは計り知れないです。
早速試してはいるものの「標準モード」では制約が多過ぎ今までとは勝手が違うので四苦八苦してまして未だ解決してません・・・ただ今までやって来た事を全部壊して再構築(リストラ)する訳ですからそれなりの苦労は覚悟の上なので時間が掛かろうとも改善に向け努力したいです。

「真摯な回答」へのお礼と言っては何ですが私のサイトのURLを記しますのでご覧ください・・・ただし構成が複雑なうえ画像ファイルを多用し容量も重いため使用する回線によっては表示が遅くなりますけど閲覧(但し1024×768ピクセルで)した上で「ここが問題だ」という箇所があったら遠慮なく指摘していただければ幸いです。

私のサイトは下記(↓)のアドレスです。

http://park11.wakwak.com/~inte.au-x707nra/index.html
メンテ
Re: ブラウザの画面サイズを問わずページを「中央」に表示させる方法 ( No.3 )
日時: 2009/01/15 11:28
名前: nn

例えば、新聞などの印刷物なら、人が目で見て読むことを前提としているので、文字の大きさや配置などによって、どれがタイトル(新聞名)でどれが見出しでどれが本文なのかが人には直感的にわかります。

しかし、HTML文書は、人が見る前に機械を介します。
機械は人ほど融通が効きませんから、どれがタイトルでどれが見出しでどれが本文なのか、決まりごとにしたがって指示してやらないとうまく判断できません。
なので、タグで印をつけて(マークアップ)明示的に教えてやるのです。

適切にマークアップされていれば、例えばタイトルはブラウザの一番上に、見出しは大きな太字で目立つように、箇条書きリストはちょっとインデントされ各項目の頭には黒丸がつくというように、ブラウザがブラウザ自身が持つスタイルシートによってそれらをわかりやすく表現してくれます。ブラウザデフォルトのスタイルが気に入らなければ、作者側で独自のスタイルシートを用意することによって、見出しの文字色を変えたり、リストのインデント量を調節したりリストマークを画像にしたりするなど、好きなスタイルで上書きすることも出来ます。(ちなみに、閲覧者も作者の用意したスタイルシートが気に入らなければ閲覧者側スタイルシートを使って見ることも出来ます。)

http://park11.wakwak.com/~inte.au-x707nra/Yukikaze-Centerpage.1.html
を拝見しましたが、適切なマークアップがなされていないので、機械にとっては、ほとんど意味を持たない文字列の羅列としか受け取られないのではないかと思います。
(タイトルすらありません。ちなみに文法的にはタイトルは必須です。)

文書構造的には、「自己紹介」や「パソコン環境」「絵画制作」などの画像部分は「見出し」でしょうし、それらに続く各項目は「リスト」または「表」、文章は「段落」と考えられるのではないかと思います。

また、レイアウト目的で、文章の途中で強制的に改行したりスペースを使用すると、読み上げ式ブラウザなどでおかしなところでブレークが入って意味が通りにくくなったり、環境によっておかしな折り返しになって読みにくくなったり、単語が分断されて検索に掛かりにくくなったりするかもしれません。

スクロールバーの色を変えたりする前に、もっと大事なことに注意を払った方が良いのではないかと思いました。スクロールバーも、単色なのでとても使いづらいです。

個人的な趣味のページなら、どこでも配置モードで手軽に楽しく運営することも別に否定はしませんが、「遠慮なく指摘していただければ」とのことでしたので、ちょっと気がついたことを書かせてもらいました。


下記は、興味があったら見てみてください。

基本的なことがわりと平易な言葉で説明されているサイト
http://pasokon-yugi.cool.ne.jp/website_kouza/

ホームページビルダーでより適切なwebページを作るための解説サイト
http://hpbuilder.net/
メンテ
確認出来ました・・・でも・・・ ( No.4 )
日時: 2009/01/18 21:24
名前: Nao & Waka

再度こんばんはnnさん、指摘された通りセッティングの変更を行いテストケースとしてページを作成してみました。
ただプレビューや仮のブラウザ表示では「どこでも配置」同様そのまま出てしまうので実際にアップロードして見てみたら見事各画面サイズにて真中に表示されてるのを確認しました。

基礎は大体解ったので今後はフレーム等いろんな表示への応用を探る事になりますが作成したサイトを全部作り変える事になるのでそれが出来て初めて解決となりますのでまだ時間は掛かりそうです・・・ただ一定の目処が立った事が心強いのでアドバイスへのお礼申し上げます。

あとサイへの指摘ありがとうございました。
読むと厳しい言葉なのですが日頃のサイトの作成で感じてた事をズバリと言われた感じです・・・HPとして公開するからには好むと好まざるとに関わらず全方位からの目に晒されるので画像を載せたり書く方としては後に起こりうる事を考えると慎重な表現に終始するのは止むを得ない事でその上でご指摘の「無駄な表現」が出てしまうのならそれも仕方がないと私は考えてます。

ただ常にサイトに書いた自身の文章を常に読み返し画像の配置等で拙かった所は次の更新で改善するよう心掛けてますのでその点はご理解頂けたらと考えてます・・・何れにせよ「全方位から支持される完璧なサイト」なんてあり得ないと考えてますので今後の改善の度合いは「私の努力次第」という事で見続けてくだされば幸いです。
メンテ
Re: ブラウザの画面サイズを問わずページを「中央」に表示させる方法 ( No.5 )
日時: 2009/01/19 10:43
名前: nn

> 後に起こりうる事を考えると慎重な表現に終始するのは止むを得ない事でその上でご指摘の「無駄な表現」が出てしまうのならそれも仕方がないと私は考えてます。

う〜ん、どれが「慎重な表現」で、どう「無駄な表現」(たぶんスクロールバーのこと?)と関係があるのか、おっしゃっていることがちょっとわかりません。


> 「全方位から支持される完璧なサイト」なんてあり得ないと考えてますので

「全方位から支持」が、どうゆう意味かわかりませんが、内容はともかく、決まりに忠実で適切なマークアップがなされていれば、どんなブラウザでも(全方位?)少なくとも『支障なく』内容は伝わるはずです。決まりを守った適切な文書にもかかわらず、閲覧出来ない、または閲覧が困難ということであれば、それはもうブラウザが悪いということになります。

例えば、
http://park11.wakwak.com/~inte.au-x707nra/Yukikaze-Centerpage.1.html
の、「自己紹介」「パソコン環境」「絵画制作」などの画像部分には現在代替テキストがありませんから、画像を表示出来ない・しない環境では内容のない要素となる、つまり、内容が正確に伝わらないことになります。このような環境のために、画像には代替テキストを用意しておくことが決まりになっています。
http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/objects.html#adef-alt
|alt属性は、IMG要素とAREA要素では『必ず指定しなければならない』。
つまり、画像に代替テキストを指定するという決まりを守ることによって、画像非表示環境でも内容が伝わるのです。

決まりをいちいち知らなくても、不備な部分を教えてくれる文法チェッカーもありますので時々チェックするといいでしょう。
http://openlab.ring.gr.jp/k16/htmllint/htmllinte.html


内容に対する「支持」ということであれば、閲覧者の受け止め方次第なので確かに「あり得ない」かもしれません。
メンテ

 返信フォーム (上記スレッドに返信する場合は以下のフォームから投稿します)
題名 ※必須 スレッドをトップへソート
名前
E-Mail
URL
パスワード 記事メンテ時に使用します (メンテは該当記事のメンテアイコンをクリック)
返信内容
※必須
エラーメッセージや内容などは省略せず詳細にご記入下さい
状態の設定

・問題が解決したら 解決 を選択して投稿して下さい HELP(新しいウィンドウが開きます)
・既存記事の状態設定はメンテ(メンテアイコン)から修正する事ができます。


投稿内容をご確認下さい(記事の削除は出来ません)

   クッキー保存