「また今度」はほとんどこない
よくhtmlとbodyにheight:100%;つけて、中のボックスにmin-height:100%;をつければ～的なのがあるんですが
height:100%;ボックスの上下に別の高さを持つ要素があれば、その分の高さ＋ページの高さになってしまいます…(´・ω・｀)
height:100%;は親要素の高さをそのまま持つという意味ですから当たり前なのですがどちらかと言うと
「（途中から始まったとしても）画面下まで一杯の高さを持ちたい」という要望が多いと思うのです。
これをする場合はまず親要素（bodyとかのページそのものの高さを持つもの）にposition:absolute;
途中に囲むdivなどにはheight:100%;だけを指定して、下まで伸ばすボックス要素にposition:absolute;を追加、
座標起点がページ左上になるのでボックスの上にある要素の高さXXを合計してborder-top:XX solid #fff;box-sizing:border-box;height:100%;
で、下まで伸ばすためにbottom:0;を利用する
でごり押してるんですがもっといい方法ありませんかね？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ハイト１００％</title>
<style type="text/css">
html{height: 100%;}
body{height: 100%;margin: 0;position: absolute;}
#main{height: 100%;width: 800px;position: absolute;}
#main>#tab {height: 100%;box-sizing: border-box;border-top: 70px #fff solid;}
header{margin: 10px;height: 50px;position: absolute;}
.tabradio{display: none;}
#contents{width: 800px;display: table;height:100%;}
#sono1lbl{background: #ffbf7f;}
#sono1_cont{border-color: #ffbf7f;}
#sono2lbl{background: #ffff7f;}
#sono2_cont{border-color: #ffff7f;}
#sono3lbl{background: #7fff7f;}
#sono3_cont{border-color: #7fff7f;}
#sono4lbl{background: #7fbfff;}
#sono4_cont{border-color: #7fbfff;}
#sono5lbl{background: #ff7fff;}
#sono5_cont{border-color: #ff7fff;}
.tabpage{display: none;position:absolute;top: 150px;left:0;bottom: 0;right: 0;width: 120%;box-sizing:border-box;border-width: 3px;border-style:solid;font-size: 20px;}
#sono1:checked+#sono1_cont{display:block;}
#sono2:checked+#sono2_cont{display:block;}
#sono3:checked+#sono3_cont{display:block;}
#sono4:checked+#sono4_cont{display:block;}
#sono5:checked+#sono5_cont{display:block;}
#tab{width: 100%;font-size:0;height:100%;}
.tabindex{display:inline-block;font-size:20px; width: 20%;height: 80px;text-align: center;border:#a5a5a5 1px solid;box-sizing:border-box;padding-top:25px;}
</style>
</head>
<body>
<div id="main">
<header>
<h1>ハイト１００％テスト</h1>
</header>
<div id="tab">
<label id="sono1lbl" for="sono1" class="tabindex">その１</label>
<input id="sono1" type="radio" name="nav" class="tabradio" checked>
<div id="sono1_cont" class="tabpage">その１</div>
<label id="sono2lbl" for="sono2" class="tabindex">その２</label>
<input id="sono2" type="radio" name="nav" class="tabradio">
<div id="sono2_cont" class="tabpage">その２</div>
<label id="sono3lbl" for="sono3" class="tabindex">その３</label>
<input id="sono3" type="radio" name="nav" class="tabradio">
<div id="sono3_cont" class="tabpage">その３</div>
<label id="sono4lbl" for="sono4" class="tabindex">その４</label>
<input id="sono4" type="radio" name="nav" class="tabradio">
<div id="sono4_cont" class="tabpage">その４</div>
<label id="sono5lbl" for="sono5" class="tabindex">その５</label>
<input id="sono5" type="radio" name="nav" class="tabradio">
<div id="sono5_cont" class="tabpage">その５</div>
</div>
</div>
</body>
</html>
このように空白ができます。デザインする場合あんまりよくありませんね。
解決方法はいろいろあるみたいです。
・リストで改行を入れずにつなげて書く。
・
と
の間をコメントアウト()する。
・「display:inline-block」でなく「float:left」にする。
・「margin」を調整する。
・「letter-spacing」を調整する。
しかし簡単さでいうと親要素(つまりul)に「font-size:0;」を指定するが一番いいと思います。
『コンテンツ(divタグ)一つ一つがwidthを無視した長い線を上に持てばいい』と気づきました。
それぞれのdivの「border-top」がかなり長いようなイメージです。
折り返す前はtop位置がそろえて1本の線に見せます。
折り返した後でもそれぞれの線で区切って見えるというわけです。
前々回の投稿で紹介したdivタグを「display:inline-block」で横並びにする
ことで折り返し後のtop位置を合わせます。
以下が全体のソースになります。擬似要素のbeforeを利用していますので
残念ですがie6とie7には対応できません。
body {
background-color:#39f;
text-align:center;
}
#main {
background-color:#fff;
margin:0 auto 0 auto;
width:90%;
overflow:hidden;
}
div div:before{
display:block;
height:5px;
background-color:#f93;
content:””;
margin:-6px -200%;
top:0;
}
div div {
display:inline-block;
width:300px;
border:1px black solid;
margin-top:5px;
vertical-align:top;
}
無題 1
まずポイントとなるのは親div(#main)の「overflow:hidden」です。
これがないと思いっきり横に伸びた線が表示されてしまい横スクロールバーも
表示されて不恰好です。これで余計なものは消します。
次のポイントは子div(コンテンツを想定)の「margin:-6px -200%」です。
マイナスマージンですね。ここら辺は私もまだ勉強不足でなんとなくしかわかってません。
余白をマイナスにとって幅や高さを増やす感じです。
またbefore/afterセレクタは「contents」を指定しないと出てきません。
線が途中で切れてしまう場合はマイナスマージンを多くとってください。
cssの小技が多すぎて覚えるのが大変です。
基本レイアウトが
——-
■ ■ ■
——-
■ ■ ■
——-
■ ■ ■
となっています。この状態で画面を狭めると幅が足りなくなって折り返しますが、
折り返した時にも横の区切りが見やすいように線を引きたいというものです。
つまり折り返した時に2列になった場合
—–
■ ■
—–
■ ■
—–
■ ■
—–
■ ■
—–
■
としたいということです。
線の数が増減しますので、divやspanでbackground指定して書くのは難しいと思います。
線を最大数配置して「@media screen」でサイズ判定し、「display:none」と「display:block」を
切り替えても可能ですが、ものぐさな私は代案を考えました。
その方法は続きの投稿で…引っ張っておきながら大したことないです(笑)
横幅を縮めてコンテンツを折り返した場合「float:left」は高さを考慮して詰まります。
参考URL:http://www.understandard.net/css/css008.html
なので折り返してもレイアウトを保てるようにするには
「display:inline-block」を指定するといいです。これでブラウザの幅を狭められても
ある程度見やすさを保てます。
asdfaa
body{
background-color:aqua;
text-align:center;
}
#body {
background-color:#fff;
width:90%;
max-width:1040px;
margin:5px auto 5px auto;
}
#body div{
width:300px;
border:1px black solid;
display:inline-block;
margin:5px 0 5px 30px;
text-align:left;
vertical-align:top;
margin-left:30px;
/display:inline;
/zoom:1;
}
多分タブレットやスマートフォン向けの対策にもなります。
div#bodyを中心に寄せるために左右のmarginを「auto」に設定しています。
marginやpadding、list-styleは後から考えるとして、ドロップダウンリストの一番単純な
スタイル表記だと思います。
Style
HTML
上記のように最上のli要素が横並びで、それ以下のul、liが子になります。
入れ子もできます。
