締切済み

ホームページを作成しましたが

2009/07/15 17:13

ホームページを作成しましたが、windowが解像度によって真中に表示させるコマンド、スクリプトがわかりません。 absolute　のコマンドは固定させるような感じみたいななにかかなぁと。簡単だとおもうのですが、どうにもわからないので教えてください。必ず、webサイト左よりに表示します。ホームページビルダーで制作しているからなのでしょうか?

akira8888
お礼率44% (4/9)

CSS
回答数6
ありがとう数2

みんなの回答 （6）
専門家の回答

みんなの回答

noname#119957

2009/07/20 03:58 回答No.6

中央配置のラッパーに中身をいれます。（１）中央表示したい部分をwrapperでくくる。 <body> <div id="wrapper"> ＨＴＭＬ全体 </div> </body> （２）ヘッド内のＨＴＭＬにＣＳＳファイルをリンクするタグを記述 <link rel="stylesheet" href="style.css" type="text/css"> ここでstyle.cssがＣＳＳファイル（３）このＣＳＳファイルに以下の記述をする。 #wrapper { margin: 0px auto; padding: 0px; clear: both; } ※wrapperの中に納まるものが中央配置になります。 ※すでに<div></div>の中に収まっているようならば、その部分のＣＳＳに margin: 0px auto; padding: 0px; clear: both; を付加して、float：ｘｘｘｘの指定は削除。

質問者

お礼 2009/07/30 10:16

ご丁寧な御答えありがとうございました。

abril
ベストアンサー率69% (388/560)

2009/07/16 15:25 回答No.5

No.3です。補足読みましたが…すみません、相変わらず意味不明の部分が多いです。 > ホームページビルダーでは、htmlで作成しており、ｘｈｔｍｌに変換させて上記の内容ですることだと思います。どういう意味でしょうか…？XHTMLはHTMLで作ってから変換する、という様なものではないですよ。XHTMLもHTMLの進化系みたいなもので、基本的な文法はほとんど同じですし、拡張子もどちらも".html"です。違いはDOCTYPEでどちらを宣言しているかと、ごく一部の記述方法の違い（空要素を閉じるなど）のみです。「上記の内容ですることだと思います。」の意味もわかりません。 > 単純に、htmlだけのコーディングでjavascriptでできるのでしょうか? No.3でも書きましたが、 http://www.css-lecture.com/log/css/032.html　の方法は(X)HTML＋CSSのみのレイアウトであって、JavaScriptは使用していません。 > 1ページだけ自動変換してうまくいったので順序良く全部のページをxhtmlに変換していき上記の案内を試せば宜しいのですよね。 …意味不明です。もしビルダー特有の機能の事を共通言語の様に認識しており、しかもコード編集に馴染みがないなら、多分このままでは話が通じないと思います。「上記の案内」というのが参考URLの方法であるなら、あれを実現するには別にHTMLだろうがXHTMLだろうがは関係ありません。 > htmlをcssのみのコーディングに変換するソフトはありますか? やはり意味不明です。HTMLとCSSは全く別物なんですが。CSSは単体で存在していてもWebコンテンツにはなりません。セットになるHTML文書があってこそのものなんですが。”何”を”何”に”変換”したいのでしょうか？＃もしかして、現在質問者様がご自分で作成しておられるHTMLがテーブル・レイアウトだったりするものをCSSによるレイアウトに自動的に変換してくれる様なソフト、をお望みであれば、残念ながらその様な都合の良いものはないです。 > *******************************************++ >（省略） > ***************************************************** > ここの部分をアレンジすればいいのでしょうか? 「ここの部分」というのが、上記の区切り線の中の大量のリストアイテムの事でしたら、本件の質問とこの部分は全くの無関係ですが。何故唐突にこの部分を出してきたのでしょうか？ですので、「ここの部分」に関しては何も答えようがないです。正直申し上げて、かなり意志の疎通に難を感じますが、 > このまま貼り付けたらあほですよね。エラーになってしまったので。番号などをはずしてbodyタグのあとにそちらをいれましたけどエラーになり、ちょっとわからなくなりました。 …ということは、一応、参考先のサンプルを元々のHTMLファイルに組み込む努力をされた上で、その結果が上手く行かなかったのだ、という様に解釈させて頂きます。そして、なんかこのままでは埒が明かない様な気がしてきましたので、本来の質問である「サイトの大元のレイアウト枠にあたるコンテンツをウィンドウに対して常に上下左右から中央の位置に配置させる」為の、新規コンテンツを「参考URLの方法を取り入れて」サンプルとして作成しました。＃XHTMLとHTMLの違いをよくわかってらっしゃらないのであれば、無理にXHTMLにする必要は全くないと思いますので、サンプルはHTML 4.01 Strictで作成してあります。サンプルの構造は、 ├ sample.html ├ css │ └ sample.css です。 ---------------------------------------------------------------------- 【HTML】sample.html ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>サンプル</title> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body>  <div id="contents"> ＃＃＃この中味は任意に。＃＃＃ </div>  </body> </html> ---------------------------------------------------------------------- 【CSS】sample.css　※の部分はコメントなので実際に使う際は必ず削除を。 ---------------------------------------------------------------------- div#contents { width: 920px;※【A】 height: 580px;※【B】 position: absolute; top: 50%; left: 50%; margin: -310px 0 0 -480px;※【C】 padding: 20px;※【D】 overflow: auto;※【E】 } ---------------------------------------------------------------------- 【A】…コンテンツ全体の幅（ただし、【E】がある場合は【E】の左右の値がプラスされるので、実際のレイアウト枠は【A】＋【E】の値になり、この場合であれば960pxとなる。）【B】…コンテンツ全体の高さ（ただし、【E】がある場合は【E】の上下の値がプラスされるので、実際のレイアウト枠は【A】＋【E】の値になり、この場合であれば620pxとなる。）【C】…コンテンツの外側の上下左右に取られる余白（この場合は個別指定なので、上：-310px、右：0、下：0、左：-480px、となる。）【D】…コンテンツの内側の上下左右に取られる余白（この場合は一括指定なので、上下左右に各20pxの余白がある。）【E】…コンテンツの内容が【B】の高さを超えてしまった場合の対処。超えた場合は自動的にスクロールバーが出て表示される（この指定がないと内容がレイアウト枠の高さを超えた場合には枠を破ってはみ出す）。 ---------------------------------------------------------------------- 以下は、参考先のサンプルに記載された説明を再度掲載しつつ、補足説明を加えました。 1. サイト全体の横、縦の幅を指定します。＜説明＞【A】と【B】を任意の値に指定。実際に作成したいコンテンツの幅・高さが違うなら、その値を指定する事。例えば、幅が800px・高さが500pxなら、 div#contents { width: 800px; height: 500px; （省略） } に変更。ただし、【E】の値（この場合は上下左右各20px）を含めて幅が800px・高さが500pxにしたい場合は、【E】の分を差し引いた値を指定しなければならないので、その場合は div#contents { width: 760px; height: 460px; （省略） } となる。 2. サイト全体を包むdiv要素にposition: absolute;をかけます。上記ソースで言うdiv#contentsです。＜説明＞このレイアウト枠のポジショニングを、ウィンドウ全体の範囲に対する絶対値で適用する為の指定。 3. top: 50%;とleft: 50%;で上と左の要素を中央配置にしています。＜説明＞ウィンドウの上端から50%、左端から50%の位置にレイアウト枠を配置するという指定。つまり、ウィンドウのサイズにかかわらず、常に上から半分・左から半分の位置から描画される。レイアウト枠を1px×1pxの小さな点に置き換えて考えれば、その点はウィンドウの上下左右からみた中央に表示されている状態になる。 4. 右の要素と左の要素を中央にする為に、コンテツの幅、高さの半分の値だけネガティブマージンを指定します。（この時padding領域も含めた値の半分にして下さい。）＜説明＞実際のレイアウト枠は点の様なものではなく、それなりの幅や高さがあるものなので、3.までの状態ではレイアウト枠は中央ではなく下寄り・右寄りに表示されてしまう。"margin: -310px 0 0 -480px;"の指定を一時的に削除してみると、その状態がよくわかる。なので、レイアウト枠の幅と高さのそれぞれ半分づつの値を、外側の余白であるmarginの上と左にマイナス値で指定してやると、レイアウト枠の上と左からの描画開始位置が3.の状態から常にレイアウト枠の半分の値が上及び左に引き戻された状態になるので、結果として上下左右中央に配置される事になる。このサンプルでは、レイアウト枠の幅が920px・高さが580pxなので、上marginに与えるマイナス値は920pxの半分の460px・左marginに与えるマイナス値は290pxとなる。ただし、サンプルでは更に上下左右の内側の余白である【D】に各20pxが指定されている為、その分も含めた値での計算が必要になる。つまり、【A】＋【D】＝（920px＋20px×2）÷2＝480px 【B】＋【D】＝（580px＋20px×2）÷2＝310px となるので、"margin: -310px 0 0 -480px;"という指定になる。 ---------------------------------------------------------------------- とりあえず、一度このサンプルを試してみて下さい。それがご希望通りであれば、あとはレイアウト枠のサイズをご自身のお好みに合わせて、”計算が合う様に”【A】～【D】の値を調整して下さい。それが上手くいったら、レイアウト枠の中に任意のコンテンツを配置して行って下さい。私がお答えできるのはここまでです。最後に、余計なお世話かもしれませんが、 > 基本、htmlのコーディング、cssしか、xhtmlのコーディングソースの違いがよくわからないので、見よう見まねでソースを張り付けてテストしています。理屈をきちんと理解できない内は、見よう見まねでいろんな事はやらない方が宜しいかと存じます。結局「何をやっているか」「何でこうなるのか」が理解できなければ今後も応用が効かない状態が続くからです。色々なレイアウトができる様になる為には、地道に基礎から理解をしながら積み上げて行くのが一番の近道だと思います。

askaaska
ベストアンサー率35% (1455/4149)

2009/07/15 18:18 回答No.4

ブラウザの中央に表示したいってことなのね。 http://www.css-lecture.com/log/css/032.html に書かれている通りにやればできるわ。

abril
ベストアンサー率69% (388/560)

2009/07/15 18:18 回答No.3

文章がちょっとわかりづらいですし、No.1の補足に延々と書いてあるJavaScriptについても他人事の様な言い方なのでおそらくあのスクリプトもご自分でわけがわかって入れているものではないのでしょうから、質問者様自身が何を望んでいるのかがいまいち掴めないのですが。 > http://www.css-lecture.com/log/css/032.html > ここのようにしたいわけなんですけど、であれば、”そのURLに書いてある解説通りに”やれば一発で解決しますが。 -----------------------------引用ここから---------------------------- 1. サイト全体の横、縦の幅を指定します。 2. サイト全体を包むdiv要素にposition: absolute;をかけます。上記ソースで言うdiv#contentsです。 3. top: 50%;とleft: 50%;で上と左の要素を中央配置にしています。 4. 右の要素と左の要素を中央にする為に、コンテツの幅、高さの半分の値だけネガティブマージンを指定します。（この時padding領域も含めた値の半分にして下さい。） -----------------------------引用ここまで---------------------------- ちなみに上記の方法はJavaScriptじゃなくCSSのみで実現しており、「ブラウザをディスプレイ中央に表示」させる技ではなく、サイトの大元のレイアウト枠にあたるコンテンツをウィンドウに対して常に上下左右から中央の位置に配置させるやり方です。ただし、これは引用部分の1番目に書かれている通り、その中央配置したいコンテナ部分の「幅」と「高さ」が固定値になっている事が条件です。

質問者

補足 2009/07/15 20:20

ありがとうございます。ホームページビルダーでは、html で作成しており、ｘｈｔｍｌに変換させて上記の内容ですることだと思います。単純に、htmlだけのコーディングでjavascriptでできるのでしょうか? 1ページだけ自動変換してうまくいったので順序良く全部のページを xhtmlに変換していき上記の案内を試せば宜しいのですよね。ところで、htmlをcssのみのコーディングに変換するソフトはありますか? このまま貼り付けたらあほですよね。エラーになってしまったので。番号などをはずしてbodyタグのあとにそちらをいれましたけどエラーになり、ちょっとわからなくなりました。例台のソースをみて 1.<body> 2.<div id="contents"> 3.<h1>...</h1> 4.<ul> 5.... 6.</ul> 7.<address>Copyright...</address> 8.</div> 9. 10.</body> ********************************************++ <li><a href="image/photo/01.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/01.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/02.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/02.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/03.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/03.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/04.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/04.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/05.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/05.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/06.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/06.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/07.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/07.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/08.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/08.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/09.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/09.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/10.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/10.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/11.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/11.jpeg" alt="" width="200" height="150" /></a></li> <li><a href="image/photo/12.jpeg" class="lightview" rel="gallery[myset]"><img src="image/photo/12.jpeg" alt="" width="200" height="150" /></a></li> ***************************************************** ここの部分をアレンジすればいいのでしょうか? 基本、htmlのコーディング、cssしか、xhtmlのコーディングソースの違いがよくわからないので、見よう見まねでソースを張り付けてテストしています。

askaaska
ベストアンサー率35% (1455/4149)

2009/07/15 17:43 回答No.2

やりたいことがいまいちわからないんだけど。ブラウザをディスプレイ中央に表示させたいってこと？ブラウザの移動はmoveTo 画面の縦幅はscreen.availHeight 横幅はscreen.availWidth で取得できるわ。タスクバーを無視したければ screen.height、screen.widthよ。これだけわかれば何とかなるでしょう。ちなみに、ブラウザの縦幅はwindow.outerHeight 横幅はwindow.outerWidthだけど IEでは取得できないわ。 IEの場合は多少の誤差はどうしようもないわ。

質問者

補足 2009/07/15 17:48

http://www.css-lecture.com/log/css/032.html ここのようにしたいわけなんですけど、このとおりでしょうか? サイト全体を上下中央配置にする方法ってかいてました。

biraman
ベストアンサー率16% (29/174)

2009/07/15 17:25 回答No.1

CSSのBodyの前に記述 * { MARGIN: 0; PADDING: 0; }

質問者

補足 2009/07/15 17:34

cssのbodyがありません。cssでコーディングしていないとおもうのですが? <meta> 下記の表示されている上ですか? 下にありますか?  </SCRIPT><SCRIPT language="JavaScript"> <!--HPB_SCRIPT_PLD_50 HpbImgPreload('_HPB_ROLLOVER1', 'm2.jpg', 'm23.jpg');