- 締切済み
中央揃えのJavascript!
Dreamweaver8を使っていたためposition:absoluteでサイトを作ってしまいました。ページを中央揃えで表示したいのですがどうにもうまくいきません。positionを変更して位置を指定し直すのは大変なので… ウィンドウサイズを取得してページを中央揃えにするjavascriptをご存知の方はいらっしゃいませんか? もしくは何か解決策をいただけると助かります。 よろしくお願い致します。<(_ _)>
- kikitomo
- お礼率42% (6/14)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 (4)
- 専門家の回答
みんなの回答
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
難しいから簡単な方法に、ではなくて多少は面倒でもなるべくユーザビリティに配慮すべきです。 人に見てもらうためのものなのだからどこまでも自分の都合で動いちゃいけない。 絶対に自分の都合で動いてはいけない、と言うわけではなくバランスを取ってほしいと言うことですね。 修正箇所の多い作業もある程度規則的な作業ならば一括置換ソフトと言う手段があります。 そういう理由からのCSSを使ってセンタリングしましょうよ、と言うわけだったんですが…、 でもまぁそこを敢えてJavaScriptにするのならばなるべく互換性とか何とか配慮してくださいね。 ウインドウサイズを小さくしたとき横スクロールバーが出るのは注意ですよ!^^;
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
えーっと、一応言いたかったのはですね、position:abusoluteを使ったということはCSSでページデザインをしていたのだからそれの問題を修正するのにはJavaScriptよりもCSSが適切でないかと言うことです。 というかCSSを使うのが嫌いと言う人はそうそういないでしょうがJavaScriptを使うのが嫌いな人は結構います。 CSSを無効にする人よりもJavaScriptを無効にする人のほうが比率はそれなりに高いでしょう。 と言うか人によってはCSSで出来ることをわざわざJavaScriptでやられるのを快く思わない人だっているかもしれません。 だからCSSではダメなのかと尋ねたわけなのですが、そこのところは同なのか、また特別な事情などあればそれを説明していただきたかったなと感じています。
- leap_day
- ベストアンサー率60% (338/561)
こんにちは javascriptならこんな感じ? p.s. IEではstylesheetでbodyを100%にしていないと高さはセンタリングできません。 Operaではborderをつくってると左上に残像が残ることがあります 位置決めはブラウザの幅からコンテンツの幅を引いて半分にする感じです あとIE,Operaでは全体の大きさが少し大きくなります(スクロールバーが出ます) 別の方法で x = screen.width/2-200; y = screen.height/2-200; でもできますがこちらは画面サイズでのセンタリングになり、後ろの数値に微妙な調整が必要になります(下記とは違い、位置固定) <script language="javascript"> <!-- window.onload=function() { x = (window.innerWidth==undefined ? document.body.clientWidth : window.innerWidth)/2-100; y = (window.innerHeight==undefined ? document.body.clientHeight : window.innerHeight)/2-100; document.getElementById("main").style.left = ""+x+"px"; document.getElementById("main").style.top = ""+y+"px"; } //--> </script> <style type="text/css"> #main { position:absolute; width:200px; height:200px; border:1px solid; } body { width:100%; height:100% } </style> <div id="main">main contents</div> まぁ、stylesheetで div { margin:auto; width:***px; }や body { text-align:center; }などで センタリングするのが確実だとは思いますけど・・・
![kikitomo](https://gazo.okwave.jp/okwave/images/contents/av_nophoto_60_5.gif)
お礼
Script、詳しい説明ともにありがとうございます。 大変参考になりました!
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
CSSでセンタリングできると思いますけどJavaScriptでないとダメなんですか? http://www.mozilla.gr.jp/standards/webtips0004.html
![kikitomo](https://gazo.okwave.jp/okwave/images/contents/av_nophoto_60_5.gif)
お礼
情報ありがとうございます。 JavaScriptで外部化すると楽かなぁと…。
関連するQ&A
- ワード 表が中央揃えになりません
Word2003で表を作成中です。 A4の1ページにほぼいっぱいの表が水平に中央揃えにならなくて困っています。 表全体を指定してツールバーの中央揃え、また表のプロパティから表→配置→中央揃えにしても 印刷すると左が8mmの余白、右が6mmの余白となります。 たった2mm差ですが、見た目のズレは意外と目立ちます。 余白は左右とも5mmに設定してあるのですが、何枚印刷しても同じです。 幅は違いますが列は8列、行が36行の表です。 左揃えにして左端からのインデントを7mmにすれば、位置は中央揃えになるのですが、 今後のためにも正攻法で治めたいです。 よろしくお願いします。
- ベストアンサー
- オフィス系ソフト
- absoluteで配置している何枚もの画像を全体的に中央揃えにする方法
absoluteで配置している何枚もの画像を全体的に中央揃えにする方法はありますか? マージンを設定しても一番上の画像(恐らくparent要素?)だけにしかマージンが適用されません。 全ての画像を中央にするためには画像一つ一つを動かすしかないのでしょうか? 因みに当方dreamweaverを使用しています。
- ベストアンサー
- HTML
- floatした画像の下揃えについて
こんにちは。 HTMLとCSSで添付した画像のようなレイアウトを組みたいと考えているのですが、 CSSでfloat:rightを指定した画像を下揃えにする方法が分からず、詰まっています。 position:absolute;等で画像を絶対位置指定する方法なども試みてみたのですが、 文章が上手く回りこまないため、何か良い方法など知っておりましたら教えてください。
- ベストアンサー
- HTML
- セル内のテキストを中央揃えにする方法は?
今、HPビルダー7でHPを作っています。 が、困ったことに、1ページ内で上下にテーブル?セル?を2つ作ったんだけど、 下のセルの中のテキストがどうやっても左揃えになってしまいます。 中央揃えに指定して中央になることはなるんだけど、 プレビューで見てみると必ず左揃えになっています。 タグの指定とかいろいろな方法があるみたいで、試してみたんだけど無理でした。 どなたか良い方法を知っていたら教えてください。 けっこう急いでます!
- ベストアンサー
- HTML
- 中央寄せに対するabsolute配置
中央寄せされたページの右上あたりに画像を配置したいのですが、 重要でないものなのでHTMLの下のほうに書いています。 普通に position:absolute; で持ち上げると、画面左上が基準であるためモニターサイズによって中央寄せ部分との位置関係が狂ってしまいますよね? かといってmarginにマイナスを指定したくありません。 そこで、画像の入った要素を最上部(top:0px)の中央(left:50%)に絶対配置し、そこからimgを絶対配置でleft:100pxのように右に動かしてみました。 IEやFirefox、Opera、Chromeなど、思いつくブラウザで見たところ問題ないのですが、Dreamweaver CS4のライブビューで見るとずれています。 たしかWebkitがエンジンだったと思うのですが、もっと賢いやり方はありませんか?
- ベストアンサー
- HTML
- プルダウンメニューの位置がずれてしまいます
質問させてください。 メニューボタンにマウスオーバーすると下にサブメニューが表示される、プルダウンメニューを作成しています。(階層メニューというのでしょうか?) Dreamweaverでレイヤーを使って作っているのですが、サブメニューの表示位置がずれてしまって困っています。 以前ご質問させていただき、一番外のTableを中央揃えにしているため、レイヤーの「position」が”absolute”だと画面の大きさによって位置が変わってしまうことがわかりました。 そこで”relative”にすればいいのかと思ったのですが、そうするとDreamweaverの「レイヤー」(←表示/非表示やz-indexを設定したりするプロパティ)から消えてしまうのです。 たぶん、レイヤーとして認識されていないのだと思います。 自分なりに調べ、Javascriptでブラウザの幅-Tableの幅÷2を求め、そこを基点にして”absolute”にすればいいというところまではわかったのですが、知識不足のためいろいろ試してみてもJavascriptエラーになってしまって・・・。 どのように書けばいいのかお教えいただけると、大変助かります。 よろしくお願いいたします。
- 締切済み
- HTML
- Word VBA 表内の図を一括中央揃えにするマク
Wordの表に3,000個ほどの図を入れ、それぞれコメントを入れておりますが、図の位置が左揃えになったり、中央揃えになったり、右揃えになったりしています。これら図だけを一括して中央揃えにするマクロを作ろうとしています。 図のサイズを一括して変更するマクロは資料を参考にして出来ましたが、中央揃えにするマクロがどうしても出来ません。 参考にして作ったプログラムは以下の通りですが、コンパイルエラーになってしまいます。 四苦八苦しています。どなたかご指導お願いします。 Sub 図の一括中央揃え() ' ' 図の一括中央揃え ' ' Dim shp As InlineShape For Each shp In ActiveDocument.InlineShapes shp.ParagraphFormat.Alignment = wdAlignParagraphCenter Next End Sub
- ベストアンサー
- Word(ワード)
- CSSでの中央揃え
CSSでの中央揃え googleで表示させる為にCSSでページレイアウトとしているのですが、ページ全体(云わばbody)が左寄りのままであり、画面中央に配置することができません。 様々な質問を見ていると「text-align:center」はIEのバグでIEでしか表示されないとの事で・・・ マージンを変更し、左から右のみに動かしていましたがそれではウィンドウを縮小させたときに右側のマージンを変えていないので、間隔のあいた左側が出てしまいスクロールするはめになります(しかも右側はピッタリレイアウト面がウインドウ端についている) 右側のマージンの値も変更はしてみましたが、左側のようにいかずに命令自体スルーされます width:700px; margin-right:auto; margin-left:auto; } ↑コレとか 説明があやふやすぎて分かりにくい事は謝罪しますが、心当たりがある方がいましたらご教授お願いします
- 締切済み
- CSS
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- Excel縦に結合したセルの中央揃え
Windows7 Excel2013です。 B1~B6のセルを結合して 縦位置を「中央揃え」(中央はB3とB4の境)で3行書きたい のですが、方法がわかりません。 ご教授ください。
- ベストアンサー
- Excel(エクセル)
補足
ページ自体は中央揃えでなくとも十分見れる状態なのですが、できれば中央揃えにしたい、と。しかしCSSをいじるとなるとかなり手間がかかってしまう作りなのです。ですからJavaScriptを入れている人だけでも中央揃えになるようにとのことを考えてのことでした。説明不足失礼しました。