- 締切済み
【スマホ・タブレット】floatの高さ可変マージン
スマホやタブレットにて画面サイズが違っていても常に横幅を１００％で表示させたいと思っています。 ただfloatで回り込ませた場合、Link１に右と下にマージンができません。 またborder-radiusを付けた場合下部が角丸にならず、何かうまく表示される方法はないかと悩んでいます。 この様な場合どのようにソースを書けばいいのかアドバイスを頂ければと思います。 またLink1やLink2の部分の高さの中央揃えにしたい場合もご教授頂ければ幸いです。 宜しくお願いいたします。 <style type="text/css"> <!-- html,body { margin: 0; padding: 0; height: 100%; } .cl { display: inline-block; } .cl:after { content: ""; display: block; clear: both; } div#boxArea { overflow: hidden; height: auto; width:100%; } div#boxArea div { float: left; padding-bottom: 32767px; margin-bottom: -32767px; } div#boxArea div#one { width: 10%; } div#boxArea div#two { width: 50%; } div#boxArea div#three { width: 50%; } --> </style> </head> <body> <div id="boxArea" class="cl"> <img src="http://www.universe-s.com/img/news/2004/0520_01.jpg" style="float:left; background:#000; width:20%; height:auto;" /> <div style="width:80%"> <div style="width:100%;"><div>aaaaa</div></div> <div id="two"> <div style="background:#F00; margin:5px 5px -32767px 5px; padding:5px 5px 32767px 5px; width:100%; border-radius:10px;">Link1</div> </div> <div id="three"> <div style="background:#060; margin:5px; padding:5px; padding-bottom: 32767px; margin-bottom: -32767px; width:100%; border-radius:10px;">Link2</div> </div> </div> </div> </body>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
記事がないので、HTMLは示せませんが、基本からやり直しましょう。 HTMLは、文書構造をマークアップするものです。divを使うのは、classやidと併用することで文書構造を補完します。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 スタイルシートは、HTMLの文書構造に従ってプレゼンテーションを指定していきます。言い換えればデザインのためにHTMLを書いたらダメなのです。 『メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ( http://jigsaw.w3.org/css-validator/#menu )』 またCSS(カスケーディングスタイルシート)を使用するときは、その最大の特徴のカスケード処理を理解していないと、うまく行きません。HTML内のstyle属性で指定されたプロパティは詳細度がa=0となり、他のスタイル指定はb=0,C=0,D=0とされます。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ count 1 if the selector is a 'style' attribute rather than a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.) ( http://www.w3.org/TR/2004/CR-CSS21-20040225/cascade.html#specificity ) ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ この部分はCSS2より変更になっています。 5.セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 6.値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) は面倒でも、最初に覚えておかなければなりません。(上記リンクはCSS2です。)なにしろ、CSSの一番重要な部分ですから。 たとえば、HTML4.01strictで作成するなら <body> ＿<h1>サンプル</h1> ＿<div class="section"><!-- 本文 --> ＿＿<div class="nav" id="Link1"> ＿＿＿<ul> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="section"> ＿＿＿<p>本文記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<p>文書情報</p> ＿</div> </body> HTML5でスマホ限定でもよければ <body> ＿<h1>サンプル</h1> ＿<section><!-- 本文 --> ＿＿<nav id="Link1"> ＿＿＿<ul> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿＿<li><a href=""></a></li> ＿＿＿</ul> ＿＿</nav> ＿＿<section> ＿＿＿<p>本文記事</p> ＿＿</section> ＿</section> ＿<footer> ＿＿<p>文書情報</p> ＿</footer> </body> とかになるはずです。 そのうえで、スタイルシートでsectionは横幅いっぱい、navは左に縦いっぱいと言う風に記述していきます。 div.section{width:100%;position:relative;} #Link1{position:absolute;top:0;left:0;width:40%;}
