愚者の経験

「また今度」はほとんどこない

カテゴリーアーカイブ: CSS

[CSS]ボックスの高さをページにあわせるには?

よく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>ハイト100%</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>ハイト100%テスト</h1>
            </header>
            <div id="tab">
                <label id="sono1lbl" for="sono1" class="tabindex">その1</label>
                <input id="sono1" type="radio" name="nav" class="tabradio" checked>
                <div id="sono1_cont" class="tabpage">その1</div>
                <label id="sono2lbl" for="sono2" class="tabindex">その2</label>
                <input id="sono2" type="radio" name="nav" class="tabradio">
                <div id="sono2_cont" class="tabpage">その2</div>
                <label id="sono3lbl" for="sono3" class="tabindex">その3</label>
                <input id="sono3" type="radio" name="nav" class="tabradio">
                <div id="sono3_cont" class="tabpage">その3</div>
                <label id="sono4lbl" for="sono4" class="tabindex">その4</label>
                <input id="sono4" type="radio" name="nav" class="tabradio">
                <div id="sono4_cont" class="tabpage">その4</div>
                <label id="sono5lbl" for="sono5" class="tabindex">その5</label>
                <input id="sono5" type="radio" name="nav" class="tabradio">
                <div id="sono5_cont" class="tabpage">その5</div>
             </div>
        </div>
    </body>
</html>

liをdisplay:inline-blockで並べた時の隙間

リストを横に並べるときに「display:inline-block」を使うと
隙間が出来ます。これはHTMLソース側でとの間に改行、タブ文字がある場合に空白として認識されるためなのだそうですが…

ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
background-color:#ff9;
display:inline-block;
margin:0;
padding:0;
}
<ul>
<li>HOME</li>
<li>MENU</li>
<li>TOPPING</li>
<li>LINK</li>
</ul>

このように空白ができます。デザインする場合あんまりよくありませんね。
解決方法はいろいろあるみたいです。
・リストで改行を入れずにつなげて書く。

の間をコメントアウト()する。
・「display:inline-block」でなく「float:left」にする。
・「margin」を調整する。
・「letter-spacing」を調整する。
しかし簡単さでいうと親要素(つまりul)に「font-size:0;」を指定するが一番いいと思います。

ul
{
list-style-type:none;
font-size:0;
margin:0;
padding:0;
}
li
{
background-color:#ff9;
display:inline-block;
margin:0;
padding:0;
}

<ul>
<li>HOME</li>
<li>MENU</li>
<li>TOPPING</li>
<li>LINK</li>
</ul>

CSSで折り返しても線を引く方法 2

前回の続きで「折り返した後にも線を引く方法」ですが、ずばり

『コンテンツ(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

   

fadalk 

    

fajldkfaj

   

faskldjfa

   

fkja;;lifd

   

kjfdaoijf

   

fjdisa;

まずポイントとなるのは親div(#main)の「overflow:hidden」です。
これがないと思いっきり横に伸びた線が表示されてしまい横スクロールバーも
表示されて不恰好です。これで余計なものは消します。

次のポイントは子div(コンテンツを想定)の「margin:-6px -200%」です。
マイナスマージンですね。ここら辺は私もまだ勉強不足でなんとなくしかわかってません。
余白をマイナスにとって幅や高さを増やす感じです。
またbefore/afterセレクタは「contents」を指定しないと出てきません。
線が途中で切れてしまう場合はマイナスマージンを多くとってください。

cssの小技が多すぎて覚えるのが大変です。

CSSで折り返しても線を引く方法 1

こんな需要がありました。
■ ←divタグ(コンテンツが入っている、高さ不定)
——- ←線(タグはなんでもいい)
として説明します。

基本レイアウトが
——-
■ ■ ■
——-
■ ■ ■
——-
■ ■ ■

となっています。この状態で画面を狭めると幅が足りなくなって折り返しますが、
折り返した時にも横の区切りが見やすいように線を引きたいというものです。

つまり折り返した時に2列になった場合
—–
■ ■
—–
■ ■
—–
■ ■
—–
■ ■
—–

としたいということです。
線の数が増減しますので、divやspanでbackground指定して書くのは難しいと思います。
線を最大数配置して「@media screen」でサイズ判定し、「display:none」と「display:block」を
切り替えても可能ですが、ものぐさな私は代案を考えました。

その方法は続きの投稿で…引っ張っておきながら大したことないです(笑)

divタグを横に並べる

divタグを横に並べる際、よく「foat:left」を使っているサンプルを見かけます。
横幅を固定してページを作る場合はさほど気になりませんでしたが、

横幅を縮めてコンテンツを折り返した場合「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;
}

fasddfa

fasddfa

fasddfa

fasddfa

fasddfa

fasddfa


多分タブレットやスマートフォン向けの対策にもなります。
div#bodyを中心に寄せるために左右のmarginを「auto」に設定しています。

ドロップダウンリストをCSSのみで実現

ドロップダウンリストの作成方法を知っておいて損はないと思って週末にいろいろ
ウェブで検索してましたが、なかなか単純なサンプルが見つからなかったのであげておきます。

marginやpadding、list-styleは後から考えるとして、ドロップダウンリストの一番単純な
スタイル表記だと思います。
Style

ul li {
float:left;
}
ul ul {
display: none;
}
ul li li {
clear: left;
position:relative;
}
ul ul ul {
position:relative;
}
ul li:hover > ul {
display: block;
}

HTML

  • あ行

  • か行


      • さ行

        • た行

  • は行

上記のように最上のli要素が横並びで、それ以下のul、liが子になります。
入れ子もできます。