- ベストアンサー
ホームページのページ全体を中央へ表示する方法を教えて下さい
ホームページの作成に遅まきながら取り組んでおります。ビルダー１２の「どこでも配置」を使って画像などを複数貼り付けながら作成したのですが、ページ全体が左寄りになってしまいました。 そこで、過去にも同様の質問をされた方々の御回答欄を参考にさせて頂きながら １．ファイル→モードを指定して開く→標準モードへ変換。このファイルに対して<CENTER>や<text-align:center>、<margin-right: auto;margin-left: auto;>を試したのですがうまくいかず、２．全体を選択して切取り→1行1列のテーブルを配置→そこへ張付け。それに対して上記のタグを同様に試したのですが、テーブルだけが中央に動くだけで、これもダメでした。 各Layerの位置決めが「absolute」になっているのが問題かと思い、各Layerを「relative」へ変換したら、見事に飛び散ってしまいました。 ページを中央へ表示させる方法をご存じの皆様方のお知恵を賜りたく、ご教授頂きます様、何卒宜しくお願い致します。
- monta59
- お礼率45% (11/24)
- その他（インターネット・Webサービス）
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
度々失礼します。 問題解決されてないようでしたので、少し気になりました。 「テーブルだけが中央に動く」 というのがいまいちピンと来ないのですが、 もしよろしければURL教えて頂けないですか？ 勿論、仮のもので構いませんので。 (見せられない内容があれば全然構いません) もしかしたら、既に作成ソフトで難しいプログラムになっていたり、 画像の貼り付け等でかなり複雑なプログラムになっているかもしれません。 そうなっていると、レイアウトを崩さずに移動させるのは至難の技です。 (自分も昔、それで作り直しました 苦笑) 特に、ビルダーのような特殊ソフトは癖の強いプログラムの書き方をしてあったり、 簡単にする為にCSSやJavascript等のプログラムを含んでいる可能性も大です。 これらはサーバの環境が整っていれば問題なく(少なくとも一般レベルでは) 動くので問題はないと思いますが、 万が一、それが邪魔している可能性も捨てられません。 もし、問題が解決しないようでしたら専門のサイトで HTML等の言語についてやビルダーについて質問してみるのが良いかもです。 (自分も未熟な一般人なのでかなり間違っているかもしれません 苦笑)
その他の回答 (4)
- toya_k
- ベストアンサー率41% (12/29)
４ですが、いきなり作り直しを勧めても monta59さんには釈然としない印象を与えてしまっただけかもしれませんので補足いたします。 「どこでも配置」モードによって自動的に行われる、 absoluteを指定して配置場所を決めて行くHTMLの記述法は、 PDFのように、閲覧者のモニタやブラウザの大きさなどの環境の違いでページのレイアウトを崩さないための手法で、一般的にはあまり使われていません。 記述法も一般に個人のホームページで使われているHTMLとは大きく異なります。 また、それは「ホームページのページ全体を中央へ表示する」という、閲覧者の環境に合わせてレイアウトを移動させたいmonta59さんの希望とは正反対の手法です。 HTMLの解説本や解説サイトを見渡しても、 この記述法を解説しているものは少なく、実際にホームページで使っている方も僅かです。 今後も「どこでも配置」モードを使い続けるという事は、 毎回、一度作ったページをまた作り直す、という２重３重の手間がかかります。 記述法も大きく違うため、HTMLソースの構文ほとんど全てを書き換えなければいけません。 （真ん中じゃなくても良ければ別ですが） 具体的に学ぼうとしても、学ぶ書籍やサイトは限られてしまい、 周囲の人に聞こうにも、詳しい人にめぐり合えるかどうか微妙です。 理屈さえ解れば別段難しいものではありませんが、 これからHTMLを学ぶのに、この手法から学んで行くのはお勧めできません。 せっかくホームページ作りに情熱を持たれているようですので、 どこでも配置モードは使わずに、一般的なHTMLで構成されたホームページに作り直し、その仕組みを理解していく事をお勧めします。
- toya_k
- ベストアンサー率41% (12/29)
それは「どこでも配置」を使っているからです。 「POSITION:absolute」というのは絶対位置のことで、ページ左上の角が基準（０の値）になります。 そこから上下左右にどれだけの値の位置に文字や画像を配置するのかを指定しているのが「どこでも配置」モードなのです。 つまり、左上の角から下に何px、右に何pxと配置場所を指定してそこに固定いるのですから、閲覧するブラウザの幅を広げれば右側に余白ができていくのです。 ＞各Layerの位置決めが「absolute」になっているのが問題かと思い、各Layerを「relative」へ変換したら、見事に飛び散ってしまいました。 「relative」は相対位置の事で、今の位置から上下左右どれだけの値の位置に文字や画像を配置するかの指定です。 基準になる０の値の位置が変われば文字や画像は飛び散ってしまいます。 どこでも配置モードで作成したホームページの内容全てを、 閲覧者のブラウザの幅に合わせて中央に配置するには、 大幅にHTMLソースの書き換えが必要になります。 いっそ、どこでも配置モードを使わずに作り直したほうが 手っ取り早いのではないかと思います。
お礼
ご回答ありがとうございます。ご指摘の通り、absoluteが問題のようです。今、ここをメインに修正しておりますが、確かに最初から作り直した方が早いかもと思いながら作業しております。
- 509561
- ベストアンサー率34% (24/69)
すいません、＃１の者です。 よく見ると、こうでした。 ____________________________________ <head> <style> ※適当な何か </style> <body> <div align="center"> <table height="100%"> <tr> <td> 「※ここに(テーブル等で)中身を納める」 </td> </tr> </table> </div> </head> </body> ____________________________________ <style> ※適当な何か </style> はページ全体の前提や規則のようなものを纏めるところだったと思うので、 基本的には、<body></body>の間に内容が入れば問題無いです。 HTMLは難しいですね。 自分自信も2年程前から全く触っておらず、知識もかなり適当です。 ＃１の文をもう一度読んでみたら、初めての方にはわかり辛い内容で しかも、説明もちんぷんかんぷんでした。 わからなければ、他の方法を探した方が良いかもしれません 苦笑 それでは、成功をお祈りしております。
お礼
度々ありがとうございました。ただ、自分の力不足でうまくいっていません。何度やってもテーブルだけが動いてしまいます。テーブル内に配置されているのはHTMLで確認しているので、何か根本的に間違っているのかと思います。諦めずにもう少し色々試してみます！
- 509561
- ベストアンサー率34% (24/69)
ビルダー１２？はわかりませんが、 自分が昔HTMLで組んだ時は以下のように div alignとテーブルで配置しました。 ____________________________________________________________ <div align="center"> <table height="100%"> <tr> <td> 「※ここにテーブルで中身を納める」 </td> </tr> </table> </div> ____________________________________________________________ 少しだけ知識がいるのですが、 「http://www.tohoho-web.com/how2/table.htm」 自分はここを見て組みました。 ちなみに、ここが上記サイトを参考にして組んだ自分のサイトです。 「http://ggxxac.info/」 ソースはそのまま表示されるので(笑)参考になれば嬉しいです。 （ソースは、IEで表示→ソースで確認出来ます） 今まで作ったものを中央に配置するだけでしたら、 そのまま「※ここにテーブルで中身を納める」の ところにぶち込んでしまって結構です。 補足ですが、それでもわからないという事であれば、 HTMLで開いてみて、<head><style><body>等があると思いますので、 それらを避けて↓のように上のテーブル部分(上記のdivから)と 上で合わせた元の命令文(プログラム)を※にそのままぶち込んでみてください。 もしかしたら、おかしくなるかもしれませんが、 大体おかしい部分の理由がわかってくると思います。 <head> <style> <body> ※ <head> <style> <body> ____________________________________________________________ 補足の全体を纏めるとこうですね。 <head> <style> <body> <div align="center"> <table height="100%"> <tr> <td> 「※ここにテーブルで中身を納める」 </td> </tr> </table> </div> <head> <style> <body> ____________________________________________________________ それでは、参考になれば嬉しいです。
お礼
早速のご回答ありがとうございます。今から試してみます！
お礼
引き続いてのご回答、本当にありがとうございます。色々と試したところ、どうも「absolute」（絶対位置）が動かない原因だと解ってきました。さらに、私は「imageとしての文字」と「ただの文字」を混同して使っているのが問題だとも気付きました。現在修正作業に勤しんでおります。修正出来ましたら改めてご報告致します。