overflow-x : hiddenが効かない

2014/06/17 20:22

このQ&Aのポイント

mac、html5でwebサイトを作っていますが、overflow-x : hiddenが効かない問題が発生しています。
3カラムレイアウトを実現するために@media screen and を使用して幅に応じてサイズを変える方法を取っています。
左側に配置された画像の幅が縮まった際に中央も可変にする方法を探しています。

vvv78
お礼率100% (4/4)

HTML
回答数1
ありがとう数12

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

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/06/18 14:35 回答No.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%; } }