CSS3.0のレイアウト関連 - display属性(inline,block,none)
box modelの種類
- block(div,p) : 高、幅設定できて、一行を占める
- inline(span, a) : 高、幅設定しても効かない、一行に複数設置できる
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> デフォルトbox model </title> <style type="text/css"> div,span{ width: 300px; height: 40px; border: 1px solid black; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body> </html>
display属性を指定することでデフォルトbox modelを変更できる。
- block
- inline
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> display属性 </title> <style type="text/css"> div,span{ width: 300px; height: 40px; border: 1px solid black; } /* divにinline */ body>div{ display:inline; } /* spanにblock設定 */ body>span{ display:block; } </style> </head> <body> <div>div1</div> <div>div2</div> <span>span3</span> <span>span4</span> </body> </html>
display属性のnone属性値
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> display属性のnone </title> <style type="text/css"> div{ width:300px; height:40px; background-color:#ddd; border:2px solid black; } </style> </head> <body> <input type="button" value="隠蔽" onclick="document.getElementById('test1').style.display='none';"/> <input type="button" value="表示" onclick="document.getElementById('test1').style.display='';"/> <div id = "test1"> displayで表示非表示を制御する<br> 領域を消す </div> <input type="button" value="隠蔽" onclick="document.getElementById('test2').style.visibility ='hidden'"/> <input type="button" value="表示" onclick="document.getElementById('test2').style.visibility ='visible'"/> <div id = "test2"> visibilityで表示非表示を制御する<br> 領域を消さない </div> <hr/> </body> </html>
