Box - ボックス
- clear〔要素の回り込み解除〕
- display〔要素の表示形式〕
- float〔要素のフロート方法〕
- visibility〔要素の可視の有無〕
- box-decoration-break
〔ボックスの改行方法〕
- box-shadow
〔ボックスの影〕
- display:none と visibility:hidden の違い
clear
要素の回り込み解除
unknown
clearプロパティは、floatプロパティによる要素の回り込みを解除します。
- デフォルト値:none
- 適用:ブロックレベル要素
- 継承:しない
値
値 | 説明 |
---|---|
none | 回り込みを解除しない。 |
left | 左寄せ(float:left)された要素に対する回り込みを解除。 |
right | 右寄せ(float:right)された要素に対する回り込みを解除。 |
both | 左寄せ(float:left)、右寄せ(float:right)された要素に対する回り込みを解除。 |
【参照】 clearfix(CSSハックを使用した回り込み解除方法)
<div style="float:left; width:40%; background-color:#e0f1f6; color:#96b5d8; padding:10px;"> 要素にfloat:leftを指定しているため、この要素は左に浮動します。 </div> <div style="float:right; width:40%; background-color:#a6c6e8; color:#fff; padding:10px;"> 要素にfloat:rightを指定しているため、この要素は右に浮動します。 </div> <div style="clear:both; background-color:#fbf1b5; color:#96b5d8; padding:10px;"> 要素にclear:bothを指定して、回り込みを解除しているので、この要素は回り込みません。 </div>
display
要素の表示形式
unknown
displayプロパティは、任意の要素に対し、どの要素として扱うかを指定します。
- デフォルト値:inline
- 適用:全要素
- 継承:しない
値 | 説明 |
---|---|
inline | 要素をインラインレベルの要素として扱う。 |
block | 要素をブロックレベルの要素として扱う。 |
list-item | 要素をリスト要素として扱う。 |
run-in | ブロックボックスがランインボックスに続く場合、そのランインボックスは、ブロックボックスの最初の行内のボックスとなる。そうでない場合は、ランインボックスはブロックボックスとなる。 |
compact | ブロックボックスがコンパクトボックスに続く場合、そのコンパクトボックスは、ブロックボックスの最初のインラインボックスの外に配置され、一行のインラインボックスと同様に表示される。そうでない場合は、コンパクトボックスはブロックボックスになる。 |
marker | ボックス要素の前または後に生成される内容をマーカーとして扱う。 |
table | 要素をテーブル要素として扱う。 |
inline-table | 要素を行内レベル表として扱う。 |
table-row-group | 要素をセルの行(tr要素)として扱う。 |
table-header-group | 要素をヘッダ行グループ(thead要素)として扱う。 |
table-footer-group | 要素をフッタ行グループ(tfoot要素)として扱う。 |
table-row | 要素を行グループ(tbody要素)として扱う。 |
table-column-group | 要素を列グループ(colgroup要素)として扱う。 |
table-column | 要素をセルの列(col要素)として扱う。 |
table-cell | 要素を表セル(th要素・td要素)として扱う。 |
table-caption | 要素を表題(caption要素)として扱う。 |
none | 要素を非表示にする。 |
ruby ruby-base ruby-text ruby-base-group ruby-text-group | CSS3 Rubyモジュール参照。 |
<template> | CSS3 Templateモジュール参照。 |
block
span要素、a要素などのインライン要素をブロック要素として扱う場合に使用します。 ブロックレベル要素扱いにするとmarginプロパティ(ブロック外余白)など、ブロックレベル要素に指定可能なスタイルも指定できるようになります。
下記の例では、a要素にdisplay:block
を指定しています。
td要素内のa要素をブロックレベル要素扱いにすると、a要素で括った文字列や画像だけでなく、td要素全体をリンクとすることができるようになります。
<style type="text/css"> .ablock, .noblock { width:400px; margin:1em 0; border-collapse:collapse; } .ablock td, .noblock td { padding:2px; border:1px solid silver; } .ablock a { display:block; /* ブロック要素扱い */ } .ablock a, .noblock a { /* 通常時 */ margin:1px 0; padding:2px; background-color:#ffffcc; color:orange; } .ablock a:hover, .noblock a:hover { /* マウスが乗った時 */ background-color:orange; color:#fff; } </style> <table class="ablock"> <caption>aタグのdisplay属性にblockを指定(ブロック要素扱い)</caption> <tr><td><a href="#">display:block</a></td></tr> <tr><td><a href="#">display:block</a></td></tr> </table> <table class="noblock"> <caption>aタグにdisplay属性を指定しない場合(インライン要素扱い)</caption> <tr><td><a href="#">display:inline</a></td></tr> <tr><td><a href="#">display:inline</a></td></tr> </table>
display:block |
display:block |
display:inline |
display:inline |
以下は、div要素に上と同じクラス(ablock)を指定し、div要素内のa要素をブロックレベル要素扱いしています。
<div class="ablock"> <a href="#">display:block</a> <a href="#">display:block</a> </div>
inline
p要素、div要素、li要素などのブロックレベル要素をインラインレベル要素として扱う場合に使用します。
下記の例では、li要素にdisplay:inline
を指定しています。
li要素をインライン要素扱いすることで、通常は縦方向に表示されるリストを横方向に表示することができます。
これはナビゲーションメニューなどでよく使われる方法です。
<style type="text/css"> ul#s2 li { display:inline; } ul#s2 li a { background-color:orange; color:#fff; border:1px solid orange; text-decoration:none; padding:5px; } ul#s2 li a:hover { background-color:#fff; color:orange; border:1px solid orange; } </style> <ul id="s2"> <li><a href="#">display:inline</a> <li><a href="#">display:inline</a> <li><a href="#">display:inline</a> </ul>
list-item
要素をリストとして扱う場合に使用します。 下記の例の様に、a要素にlist-itemを指定すると、a要素がリストとして扱われるため、 リストマークなどのリストプロパティも指定可能になります。
<style type="text/css"> div#s3 a { display:list-item; margin-left:20px; width:200px; list-style-type:square; text-decoration:none; } div#s3 a:hover { background-color:#ffffcc; } </style> <div id="s3"> <a href="#">display:list-item</a> <a href="#">display:list-item</a> </div>
table関連
要素をテーブルとして扱う場合に使用します。
<style type="text/css"> div#dispT { display:table; border:1px solid #ccc; border-collapse:collapse; } div#dispT div.tcap { display:caption; } div#dispT div.colgroup { display:table-column-group; } div#dispT div.colgroup div { display:table-column; } div#dispT div.thead { display:table-header-group; } div#dispT div.tfoot { display:table-footer-group; } div#dispT div.tbody { display:tabke-row; } div#dispT div.thead ul, div#dispT div.tbody ul, div#dispT div.tfoot ul { display:table-row-group; } div#dispT div.thead li, div#dispT div.tbody li, div#dispT div.tfoot li { display:table-cell; border:1px solid #ccc; width:100px; } </style> <div id="dispT"> <div class="tcap">≪表題≫</div> <div class="colgroup"> <div span="1"></div><!-- 見出し --> <div span="3"></div><!-- データ --> </div> <div class="thead"> <ul> <li>ヘッダ</li> <li>A列</li> <li>B列</li> <li>C列</li> </ul> </div> <div class="tfoot"> <ul> <li>フッタ</li> <li>A列</li> <li>B列</li> <li>C列</li> </ul> </div> <div class="tbody"> <ul> <li>行1</li> <li>item A-1</li> <li>item B-1</li> <li>item C-1</li> </ul> <ul> <li>行2</li> <li>item A-2</li> <li>item B-2</li> <li>item C-2</li> </ul> </div> </div>
- ヘッダ
- A列
- B列
- C列
- フッタ
- A列
- B列
- C列
- 行1
- item A-1
- item B-1
- item C-1
- 行2
- item A-2
- item B-2
- item C-2
float
要素のフロート方法
unknown
floatプロパティは、ボックス要素を左右どちらに浮動させ、後に続くテキストなどの内容をどのように回り込みさせるかを指定します。 positionプロパティで位置決めされている要素および生成内容を除く、すべての要素に指定可能です。 デフォルト値は、none(ボックス要素を浮動しない)です。 floatプロパティによる回り込みを解除する場合は、clearプロパティを使用します。
positionプロパティにabsoluteまたはfixedを指定している要素に、floatプロパティを指定することはできません。
値 | 説明 |
---|---|
none | ボックス要素を浮動しない(デフォルト値)。 |
left | ブロック要素を左に浮動させ、後に続く内容は右側に回り込む。 |
right | ブロック要素を右に浮動させ、後に続く内容は左側に回り込む。 |
<page-floats> | CSS3 Paged Mediaモジュール参照 |
div要素にfloatプロパティを指定すると、テーブル要素を使わなくても、下記の例のように、複数のブロック要素を1列に並べて表示できます。
<style type="text/css"> /* 2分割レイアウト */ .floatL_2 { float:left; /* 左寄せ */ width:50%; margin:0; padding:0; background-color:#e0f1f6; color:#96b5d8; } .floatR_2 { float:right; /* 右寄せ */ width:50%; margin:0; padding:0; background-color:#a6c6e8; color:#fff; } .floatL_2 p, .floatR_2 p { margin:10px; } </style> <div style="width:98%;"> <div class="floatL_2"><p>このボックスは左に浮動します。<p></div> <div class="floatR_2"><p>このボックスは右に浮動します。</p></div> <br style="clear:both;" /><!-- 回り込み解除 --> </div> <hr /> <style type="text/css"> /* 3分割レイアウト */ .floatL_3 { float:left; /* 左寄せ */ width:33%; margin:0; padding:0; background-color:#e0f1f6; color:#96b5d8; } .floatC_3 { float:left; /* 左寄せ */ width:34%; margin:0; padding:0; background-color:#fbf1b5; color:#96b5d8; } .floatR_3 { float:right; /* 右寄せ */ width:33%; margin:0; padding:0; background-color:#a6c6e8; color:#fff; } .floatL_3 p, .floatC_3 p, .floatR_3 p { margin:10px; } </style> <div style="width:98%;"> <div class="floatL_3"><p>このボックスは左に浮動します。</p></div> <div class="floatC_3"><p>このボックスは左に浮動します。</p></div> <div class="floatR_3"><p>このボックスは右に浮動します。</p></div> <br style="clear:both;" /><!-- 回り込み解除 --> </div>
このボックスは左に浮動します。
このボックスは右に浮動します。
このボックスは左に浮動します。
このボックスは左に浮動します。
このボックスは右に浮動します。
visibility
要素の可視の有無
unknown
visibilityプロパティは、要素を表示するか、非表示にするかを指定します。
- デフォルト値:visible
- 適用:全要素
- 継承:しない
値
値 | 説明 |
---|---|
visible | 要素を表示する。 |
collapse | 要素をテーブルの行(tr要素)・行グループ(thead要素、tbody要素、tfoot要素)、列(col要素)、列グループ(colgroup要素)・列グループの指定した範囲を詰めて表示する。それ以外の要素に指定した場合は、hiddenを指定したのと同じになります。 |
hidden | 要素を非表示にする(要素の描画領域は確保される)。 |
visible(表示)/hidden(非表示)
親要素のスタイル指定は子要素に反映されますが、子要素の指定は親要素に反映されません。
下記の例は、子要素にvisibility:visible
を指定し、親要素にvisibility:hidden
を指定しています。
子要素は表示されますが、親要素は非表示のままです。
<div style='visibility:hidden;'>親要素 <div style='visibility:visible;'>子要素</div> </div>
collapse(表の行・列および行グループ・列グループを詰めて表示)
<style type="text/css"> table.collapse td { border:1px solid #ccc; } table.collapse thead { visibility:collapse; background:orange; } </style> <table class="collapse"> <caption>表題</caption> <thead> <tr> <td>group 1</td> <td>group 2</td> </tr> </thead> <tr> <td>1-1</td> <td>2-1</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table>
group 1 | group 2 |
1-1 | 2-1 |
2-1 | 2-2 |
inherit(継承)
下記の例では、親要素にvisibility:hidden
を指定し、子要素にvisibility:inherit
を指定しています。
inheritは親要素に従うので、親要素のhidden指定が子要素にも適用され、下記の例は親要素も子要素も非表示となります。
<div style='visibility:hidden;'>親要素 <div style='visibility:inherit;'>子要素</div> </div>
JavaScriptで要素の表示・非表示切替
要素 下記の例は、JavaScriptで親要素にvisible、hiddenの指定を切替えています。 親要素にしかそれらの指定をしていませんが、子要素は親要素のスタイルを継承するため、親要素に従って表示が切替わります(継承)。
<script type="text/javascript"> /* 動作確認:IE5~,Firefox,NN6~ */ var pc=true; function func_pc(frm){ var obj=document.getElementById("parent"); if(pc){ pc=false; frm.elements["btn_pc"].value="visibility:visible"; obj.style.visibility="hidden"; }else{ pc=true; frm.elements["btn_pc"].value="visibility:hidden"; obj.style.visibility="visible"; } } </script> <form action="#"> <p> 親要素を表示・非表示にすると、子要素も親要素に従って表示・非表示になります。 </p> <p> <input type="button" name="btn_pc" value="visibility:hidden" onclick="func_pc(this.form)" /> </p> <div id="parent">親要素 <div id="child">子要素</div> </div> </form>
box-decoration-break 
ボックスの改行方法
unknown
box-decoration-breakプロパティは、ボックス内で改ページやカラム改行などが発生した時、どのようにボックスを分割するか、ボックスのページ間での分割方法を指定します。
- デフォルト値:slice
- 適用:全要素
- 継承:しない
値
box-shadow 
ボックスの影
unknown
box-shadowプロパティは、ボックスに影を付けます。
box-shadow: [水平方向の影オフセット] [垂直方向の影オフセット] [影のぼかし半径] [影の色]
あるいは
box-shadow: [水平方向の影オフセット] [垂直方向の影オフセット] [影の色]
のように指定します。
insetを使用すると、インナーシャドウで凹んでいるような感じで影を付けられます。
- デフォルト値:none
- 適用:全要素
- 継承:しない
サポート
Chrome: ○/Safari: ○/Firefox: ○/Opera 11: ○/IE9: ○
設置サンプル
<style type="text/css"> #d_boxshadow1 { margin:0 10px 30px 10px; padding:10px; background-color:#eee; box-shadow:5px 5px 5px #ccc; } #d_boxshadow2 { margin:60px 10px 30px 10px; padding:10px; background-color:#eee; box-shadow:-10px -10px 0px #000; } #d_boxshadow3 { margin:30px 10px; padding:10px; background-color:#eee; box-shadow:2px 2px#ccc; } #d_boxshadow4 { width:100px; height:100px; margin:0 10px; padding:10px; background-color:#eee; border:3px solid #000; box-shadow:inset 8px 8px rgba(0,0,0,0.3); } </style> <div id="d_boxshadow1"> box-shadow:5px 5px 5px #000; </div> <div id="d_boxshadow2"> box-shadow:-10px -10px 0px #000; </div> <div id="d_boxshadow3"> box-shadow:2px 2px #ccc; 影のぼかしなし </div> <div id="d_boxshadow4"> box-shadow:inset 8px 8px rgba(0,0,0,0.3); </div>

display:none と visibility:hidden の違い
unknown
display:none
、visibility:hidden
は、両方とも要素を非表示にする場合に使用します。
違いは、非表示にした要素の描画領域を確保するかしないかです。
visibility:hidden
は、非表示にした要素部分のスペースを確保しますが、display:none
は、非表示にした要素部分のスペースを確保しません。
<script type="text/javascript"> var v=true; var d=true; /* visiblity 切替 */ function func_v(frm){ if(v){ v=false; frm.elements["btn_v"].value="visibility:visible"; frm.elements["elm_v"].style.visibility="hidden"; }else{ v=true; frm.elements["btn_v"].value="visibility:hidden"; frm.elements["elm_v"].style.visibility="visible"; } } /* display 切替 */ function func_d(frm){ if(d){ d=false; frm.elements["btn_d"].value="display:inline"; frm.elements["elm_d"].style.display="none"; }else{ d=true; frm.elements["btn_d"].value="display:none"; frm.elements["elm_d"].style.display="inline"; } } </script> <form action="#"> <p> visibility:none / visible を切替表示<br> <input type="button" name="btn_v" value="visibility:hidden" onclick="func_v(this.form)" /> <input type="text" name="elm_v" value="要素" size="8" /> ←要素の描画領域は確保される </p> <p> display:none / inline を切替表示<br> <input type="button" name="btn_d" value="display:none" onclick="func_d(this.form)" /> <input type="text" name="elm_d" value="要素" size="8" /> ←要素の描画領域は確保されない </p> </form>