overflow-x : hiddenが効かない
- mac、html5でwebサイトを作っていますが、overflow-x : hiddenが効かない問題が発生しています。
- 3カラムレイアウトを実現するために@media screen and を使用して幅に応じてサイズを変える方法を取っています。
- 左側に配置された画像の幅が縮まった際に中央も可変にする方法を探しています。
- ベストアンサー
overflow-x : hiddenが効かない;
mac、html5でwebサイトを作ってます。 せっかく、以前ここで3カラム左右可変をやり方を教えていただいたのですが、うまく出来なかったので３カラムとも固定で@media screen and で一定のwidthになったらサイズを変更する方法をとる事にしました。 それで、widthが狭まった時スクロールを表示しないようにしたいんですが、 overflow-x : hidden; (position:relative;)が効きません。どのブラウザでも同じで理由が解りません。 widthを狭めてもカラム落ちや片方に寄らせずに.. html５で書いてるのですがhtml5.jsが重いそうなのでhtm4でも使えるタグで使ってます。 l----------------------------------------------------l l------------------id=header-------------------l l_____________________________________l --口-----------l最初は左I右固定l----------------l l-----------------lの３IカラムI。l----------------l l----------------------------------------------------l l----------------------------------------------------l body{ width:1500px; position:relative; overflow-x : hidden; } . header{ ～～～ ～～～ } #3カラム{ margin-left: auto; margin-right: auto; width:500px; position: relative;かposition: absolute; ～～ } .clearfix:after{ content: ""; clear: both; display: block; } #左画像{ position: absolute; width:100px; margin-left:10px; z-index:2; } htmlで左画像はカラムの外に置きました。 widthがある一定の数まで縮まった段階で@media screen and を使って中央も可変にするつもりです。 可能でしょうか？
- vvv78
- お礼率100% (4/4)
- HTML
- 回答数1
- ありがとう数12
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞以前ここで3カラム左右可変をやり方を教えていただいたのですが、うまく出来なかったので 私には記憶ないのですが。 当初のこちら（左右固定の３カラム）で・・初心貫徹 ＞HTML5(大文字)で作りたいが、JSだと重いのでHTML4.01ということ？ video要素やSVGを使わず単に、header,sectionのような新しい要素だけでしたら重くはありません。問題にするとしたらjavascriptが無効なときだけでしょう。 HTML5を使わずHTML4.01を使用するのは、 ・後方互換（古いブラウザへの対応も考慮しなければならない）のときです。だとしたら@media screen andのようなCSS3を用いるのは矛盾します。 しかも、. header{}とか、#なんとか{}など、CSS1のものがそのままだったり 「HTML5は未勧告で確定していないことや後方互換を考えてHTML4.01+CSS2.1で製作する」 という条件で説明します。ちょっと厳しいかもしれませんが、あなたのためになると思って書きます。 残念ながら、基本がまったく出来ていません。HTML4.01+CSS2.1を使われるならまず両方の仕様書だけはかならず目を通してください。すべてを一度に理解するのは無理ですし無駄ですが、すくなくともどこに何が書いてあるくらいは知っておくこと。 ・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) ここからはリンク先も見ながら読み進めること 最も重要な事は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」です。HTMLには文書構造しか書かずにプレゼンテーション(表現)はスタイルシートに任せるという事です。そのためにスタイルシートを使うのです。 →14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 1) まず、デザインは一切考えずに文書構造だけをマークアップします。HTML4.01ではHTML5のような文書構造を示す要素がありませんからDIVやSPANを使います。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 それ以外の目的(主にデザイン)で使用したり、文書構造としては意味不明のclass名(clear_fixとか・・)やidつけたり。 HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/news106_2.html )のページの真ん中あたり「【問題2】文書内に埋め込まれた「意味」が不明確」 HTML5ではこの問題を解決するために新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )が追加されます。 HTMLの<body>内 <body> <div class="header"> <h1>ページタイトル</h1> </div> <div class="section"> <h2>本文</h2> <p>本文記事</p> <div class="nav"> <h3>ナビゲーション</h3> <p>画像がコンテンツの主要な要素でない場合は背景にします。</p> </div> <div class="aside"> <h3>補足記事</h3> <p>本文とは直接関係ない--asideな--記事</p> </div> </div> <div class="footer"> <h2>文書情報</h2> </div> </body> というHTMLをまず書きます。デザイン考えてないのでメンテナンス楽ですね。 HTML5だと、それぞれ、<header><header><section></section><aside></aside><nav></nav><footer></footer>になります。用途もあわせてあるので、将来HTML5にするときは、そのまま書き換えればよい。 当初の予定通りスタイルシートを書いていきます。 html,body{margin:0;padding:0;}/* 余白消しておく */ h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{ width:100%;/* ウィンドウ幅に合わせる。 */ min-width:630px;max-width:1000px;/* 最小(スマホ)、最大(幅広ディスプレイ) */ margin:0 auto;/* 幅がウィンドウ幅より狭いときは中央 */ padding:5px;/* ボックス内の余白 */ } div.section{ position:relative;/* 子孫要素の基準とするため */ min-height:400px;/* 一応目次(nav)や補足記事(aside)のための最小高さ */ } div.section>*{ margin:0 100px;/* navとasideのスペース */ } div.section div.nav,div.section div.aside{/* 本文内のこれらは */ position:absolute;/* 絶対配置、staticでない直近の親を基準 */ top:0; width:100px;/* 幅を指定 */ height:100%;/* 本文高さ一杯 */ margin:0; } div.section div.nav{ left:0; } div.section div.aside{ right:0; } /* 分かりやすいように色分け */ div.header{background-color:aqua;} div.section{background-color:silver;} div.nav{background-color:lime;} div.aside{background-color:white;} div.footer{background-color:fuchsia;} たったこれだけです。 ★セレクタはかならず基点となるセレクタ書きましょう。 『単体セレクタは型セレクタもしくは 全称セレクタのいずれかの直後に、( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html#selector-syntax )』 ★class名に日本語は使えません。 セレクタに使用できる文字はアルファベット、数字、ハイフン(-)、アンダースコア(_)が使用可能で1文字目にはハイフンと数字は使用できません。 ★mediaqueryを使うのは、あくまでリキッドでデザインしてそれ以上の対応をしたいときです。 よって /* 必要なら小さい画面用に下記を追加 */ @media screen and (max-width: 640px) { div.section{ min-width:0; min-height:0; } div.section div.nav,div.section div.aside{ position:static; display:inline-block; width:48%; } div.section>*{ margin:0; } } @media screen and (max-width: 480px) { div.section div.nav,div.section div.aside{ position:static; display:block; width:100%; } }
関連するQ&A
- cssで擬似フレームについて
はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか？ HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> （width="800" height="180" のflashファイルを入れています） </div> <div id="main"> （ width="700"のコンテンツを作りスクロールさせていま） </div> <div id="footer">テキストを一行入れています</div> </body> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; } #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; } #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; } このような感じなのですがなにかいい方法があればご教授お願いいたします。
- ベストアンサー
- HTML
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- CSS
- CSS検証サービス
ヘッダーと本体の部分のCSSをこの前教えてもらった CSS検証サービスにかけたらエラーが返ってきました。 div { position : relative ; color : white ; } #header {position : fixed ; top : 0px ; left : 0px ; overflow : auto ; width : 100% ; height : 8% ; z-index : 2 ; border-bottom : 1px red solid } #navi{ position : absolute ; left : 50 px ; top : 10 % ; height : 88% ; overflow-x : hidden ; overflow-y : auto ; z-index : 1 ; } #headerではエラーで出ず、#naviのtopとleftで構文的におかしいと出ます。 やっぱりおかしいですか？ちなみにブラウザ上は想定した通りに行っています。
- ベストアンサー
- CSS
- カラム高さ揃え+固定フッター
いつもお世話になります。 ●確認ブラウザIE6、IE7、FF、 Mac Safari FF 左側幅可変のリキッドレイアウトの中で、 div#wrapの中にある「#boxB、#boxC」のカラム高さが揃った上で #footerはページ下部に固定されている、添付図の状態にしたい。 ●できてること： IE7、FFにおけるカラム高さの統一、固定フッタ ●ここができない： 1.IE6にてboxBとCの高さが揃わない（Cが足らない） 2.#wrapと#footerにすきまが空く（boxBとCの背景色がfooterの上まで来てほしいのです）（全部のブラウザにて） ★CSS /*リキッドレイアウト部分*/ * { margin:0; padding:0; } body { text-align:center; } #container { width:96%; margin-left:auto; margin-right:auto; text-align:left; } #boxA { background:#ffc; } #boxB { background:#fcc; width:100%; float:left; margin-right:-200px; } #boxB p { margin-right:200px; } #boxC { background:#ccf; width:200px; float:left; } #boxD { background:#cfc; width:100%; float:left; } /*100%固定フッタのためのCSS*/ *{ margin:0; padding:0; } html,body{ height:100%; background-color: #000000; color: #000000; } html{ overflow-y:scroll; } #container { width: 100%; position: relative; height: auto !important; height: 100%; min-height: 100%; } div#footer{ position:fixed; bottom:0; left:0; text-align:center; width:100%; } /* * * IE6 * * * */ * html, * html body{ overflow-y:hidden; } * html div#maincontents{ height:100%; overflow-y:scroll; } * html div#footer{ position:absolute; } /* カラム高さが違うものを揃える */ #wrap { overflow:hidden; } #boxB,#boxC { padding-bottom: 32768px; margin-bottom: -32768px; }
- ベストアンサー
- HTML
- 3カラムのカラム落ちについて質問です。
3カラムのカラム落ちについて質問です。 IE6だけ3カラムのうち右カラムだけカラム落ちしてなおりません。 ネットで検索して色々試した結果「clear: right;」を追加したら右に戻ったのですが、今度は隙間ができました。 <div id="wrap"> <div id="left">左カラム</div> <div id="left">メインカラム</div> <div id="left">右カラム</div> </div> という形です。 --CSS-- #wrap{ width: 970px; margin: 0 auto; background-color: #FFFFFF; height: 100%; min-height: 100%; position:relative; overflow: hidden; } #left{ width: 175px; margin: 15px 15px 0 15px; padding: 0; float: left; display: inline; } #contents{ width: 560px; float: right; margin-top: 15px; display: inline; clear: right; } #right{ width: 175px; margin: 15px; float: right; display: inline; clear: right; } です。 それぞれの中にはmargin やpaddingを使っています。 2日間それで悩まされていますができずに困っています。 IE6以外はすべて大丈夫なので、分かるかた教えてください。
- ベストアンサー
- ホームページ作成ソフト
- 複数のdivを横並びさせる時一つだけ中央
複数のdivを横並びさせる時一つだけセンタリングする方法はありますか？ widthを狭めてもカラム落ちや片方に寄らせずに l--口----------l３カラム l--------------l l---------------l左右可変l--------------l l-----------------------------------------l l-----------------------------------------l margin: 0 auto;で指定しても左の画像に寄ったり離れたりしてしまいます。 body{ width:1500px;} #3カラム{margin-left: 0 auto; margin-right: 0 auto; width:500px; ～～ } #左画像{width:100px; margin-left:10px; z-index:2; }
- ベストアンサー
- CSS
- swfをoverflow: hiddenできない
HTMLカテゴリに登録しましたが、CSSの質問です。 divタグの大きさをCSSでwidthとheightで指定し、overflow: hiddenの設定をしました。 ここでdivタグ内に文書を書き、それがCSSで指定したdivタグのサイズ（範囲）を超えてしまった場合、はみ出た部分はoverflow: hiddenにより見えなくなります。 画像でも同様だったのですが、何故かFlash（swfデータ）はIE以外のブラウザ（NN、Firefox、Operaなど）で見たところ、overflowが効いていません。隠したい部分も見えてしまいます。なぜなのでしょうか？ ソースは以下になります。 <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/xhtml1/xhtml1-transitional/"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> <!-- #clip { border: 1px solid blue; width: 500px; height: 100px; overflow: hidden; } //--> </style> <title></title> </head> <body> <div id="clip"> <embed src="flash.swf" width="500" height="250" /> </div> </body> </html> お分かりのように、本来はheight=250pxのswfをheight=100px分だけ表示したいのです。
- ベストアンサー
- HTML
- positionプロパティの設定について
下記のようなposition: relative;の指定widthが100%に対して、position: absolute;を指定するdiv#innerのwidthが800pxでセンター表示されるように指定したいのですが、position: absolute;のtop: 0px; left: 0px;と記述すると当然のごとく左寄りに表示されます。 div#inner部分をpositionプロパティを使いセンター表示される記述方法があればご教授下さい。 なお、positionプロパティを使う方法のみのご回答でお願いします。 ----------------------------------------- div#footer { position: relative; width: 100%; height: 250px; margin: 0; padding: 0; background : url(images/footer_bg.gif) repeat-x 0 0; } div#inner { position: absolute; top: 0px; left: ?px; width: 800px; margin: 0px auto 0px auto; } -----------------------------------------
- ベストアンサー
- HTML
- 可変レイアウト時の、floatしたulの中央寄せ
floatしたulをセンタリングする為、以下のソースを記述しました。 <section> <ul> <li>ボタン1</li> <li>ボタン2</li> </ul> </section> section { position: relative; overflow: hidden; } section ul{ float:left; left:50%; position:relative; } section ul li{ float:left; left:-50%; position:relative; width:150px; margin-right: 5px; } ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い section ul li{ float:left; left:-50%; position:relative; width:40%; margin-right: 5px; } に書き換えた所、リストの横幅がすごく狭くなってしまいました。 ％幅で横に2つ並んだリストボタンをセンタリングさせられれば、 potisionを使用したセンタリングにこだわっているわけではありませんが 自分で思いつく限りを試しても解決に至らず、質問させていただきました。 html5、css3で記述しています。 詳しい方がいらっしゃいましたら、よろしくお願い致します。
- ベストアンサー
- CSS
- Firefoxでheight:100%がきかない？
ソースは以下のとおりです。 IEでは#container内のDIV要素は全てheight:100%で表示されるのですが、Firefoxでは、高さ：100％がききません。 Firefoxでもページの下まで表示されるようにしたいと思います。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>サンプル</title> <style type="text/css"> <!-- /*全体の設定*/ * { margin: 0px; padding: 0px; font-size: 12px; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-weight: normal; line-height: 150%; color: #000; } /*ページ全体の設定*/ html,body { height:100%; } body { background-color: #FFF; } /*カラムの設定・IE6のハック*/ #wrapper { width: 1000px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FF0000; } body > #wrapper { height:auto; } /*ヘッダの設定*/ #header { width: 1000px; height: 123px; clear: both; } /*メインコンテンツの設定*/ #container { width: 1000px; clear: both; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#00FF00; } /*左カラム外側（2カラム内包）*/ #container_left01 { width: 732px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（左側）*/ #container_left02 { width: 268px; float:left; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } /*左カラム（右側）*/ #container_left03 { width: 463px; float: right; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height: 100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; background-color:#FFFF00; } /*右カラム*/ #container_right01 { width: 267px; float:left; border-left-width: 1px; border-left-style: solid; border-left-color: #000000; height: 100%; min-height:100%; margin: 0px 0px 0px 0px; overflow:hidden; _overflow: show; } --> </style> </head> <body> <div id="wrapper"> <div id="header"> <h1>あああ</h1> </div> <div id="container"> <div id="container_left01"> <div id="container_left02">あああ</div> <div id="container_left03">あああ</div> </div> <div id="container_right01">あああ</div> </div> </div> </body> </html>
- 締切済み
- HTML
お礼
ORUKA1951さん、 うまく言ってからお返事しようと考えていたらお返事が遅くなってしまいました。申し訳ありません。 そして細かいご指導本当にありがとうございました。 おかげさまでうまく可変にする事が出来ました。M u u M