アプリ版：「スタンプのみでお礼する」機能のリリースについて

overflow-x : hiddenが効かない;

解決済

  • 質問者：vvv78
  • 質問日時：
  • 回答数：1件

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 を使って中央も可変にするつもりです。
可能でしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

＞以前ここで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-html4 … )
・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

　ここからはリンク先も見ながら読み進めること

　最も重要な事は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」です。HTMLには文書構造しか書かずにプレゼンテーション(表現)はスタイルシートに任せるという事です。そのためにスタイルシートを使うのです。
　→14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

1) まず、デザインは一切考えずに文書構造だけをマークアップします。HTML4.01ではHTML5のような文書構造を示す要素がありませんからDIVやSPANを使います。
　『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　それ以外の目的(主にデザイン)で使用したり、文書構造としては意味不明のclass名(clear_fixとか・・)やidつけたり。
　HTML5“とか”アプリ開発入門（1）：Webの3つの問題を解決する「HTML5」とは何なのか (2/2) - ＠IT( http://www.atmarkit.co.jp/ait/articles/1008/30/n … )のページの真ん中あたり「【問題2】文書内に埋め込まれた「意味」が不明確」
　HTML5ではこの問題を解決するために新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/h … )が追加されます。
　
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/CSS … )』
★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%;
}
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

ORUKA1951さん、
うまく言ってからお返事しようと考えていたらお返事が遅くなってしまいました。申し訳ありません。
そして細かいご指導本当にありがとうございました。
おかげさまでうまく可変にする事が出来ました。M u u M

通報する
お礼日時：2014/06/30 04:42

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報