- ベストアンサー
スクロールボックスを中央に配置する方法
- スクロールボックスを中央に配置する方法について質問します。
- 現在、スクロールボックスを中央に配置しようとしていますが、うまくいきません。
- 試した方法としては、margin-left: auto;とmargin-right: auto;をCSSに追加しましたが、効果はありませんでした。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問の引用されたHTML記述では、「class="row"」「class="title2"」に関する記述がありませんので、具体的な訂正案は示せません。 しかしそもそも、以前の質問でも気になったんですけど、 ・「divタグは必ず<div>～</div>でくくらなければならない」 ・「divタグは何重にもネストできる」 ・「複数あるスタイル指定は内側のものが優先される」 って言うのを理解されてますでしょうか? ご質問のHTMLでは、 <div class="aaa"> </div> <div class="bbb"> </div> <div class="ccc"> </div> <div class="ddd"> </div> みたいな構造になっています。 まあそれはそれでも良いんですが、それぞれの部分で同じように適用したいスタイルがあったら、「class="aaa"」「class="bbb"」「class="ccc"」「class="ddd"」のそれぞれに、同じ記述をしなければいけませんし、変えようと思ったら全部を変えて回らなきゃいけません。 普通はそんなことしません。 例えば、 ・全体的に「aaa」を適用させる。 ・その中で「bbb」と「ccc」をそれぞれ適用したい部分がある。 ・「ccc」の中では、一部「ddd」を適用させたい部分がある。 こんな時は、 <div class="aaa"> /* aaa だけが適用される部分 */ <div class="bbb"> /* aaa と bbb が適用される部分 */ </div> <div class="ccc"> /* aaa と ccc が適用される部分 */ <div class="ddd"> /* aaa と ccc と ddd が適用される部分 */ </div> </div> </div> こんな風に、幾重にも重ねれば(ネスト構造)、それぞれの部分で適用したい最小限のスタイルを書けば良いことになります。 ※行頭のスペース(インデント)は、ネスト構造がわかりやすいように入れただけなので、無くても構いません。 ただ、これらのスタイル指定と、テーブル構造が入り交じってくると、また複雑なことになってきます。 基本的に、divタグもHTMLの一部であるのですから、上記のネスト例のように綺麗にネストされていれば良いのですが。 異常な例: <td class="aaa"> <div class="bbb"> </td> </div> こんな風に、開始タグと閉じタグが入れ違うような構造で書いてはいけません。 HTMLはエラーを吐きませんから、適当に表示してしまいますが、想定通りの表示をしなくなったりして、自分が混乱するだけです。 きちんと開始タグ・閉じタグのペアを守って、適用したい部分を外側から囲むように、<div> ～ </div> を記述してください。 ---- あとついでに書くと、 .main { ～ と言う記述が複数ありますが、複数書いても、それは一つの main クラスの定義です。 全部一緒にされます。(ただ、同じものが書いてあったらあとに書いた方が優先されます) そしてボディ部に複数の class="main" 指定があったとしても、単一の main クラスが適用されるわけです。 最初の class="main"に最初の .main 指定、2番目の class="main"に2番目の .main 指定、がされるなんて動作はしません。 class="main" 指定があったら、それは全て同一の main クラスが適用されるわけです。 クラス名を違えなければ、部分ごとに違うクラスを適用することは出来ません。
お礼
ありがとうございます。まだ勉強不足でした。すみません。無事解決出来ました。