┗━CSS3.0のレイアウト関連
メディア毎のCSSを指定する。 文法： @media not|only 設備タイプ [and 属性] ブラウザ幅によるレイアウト調整サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> media query </title> <style type="text/css"> /* デフォルトCSS */ #container{ text-align: center; margin: auto; width: 750px; } …</meta></head></html>
・columns属性を利用して、複数カラムを実現する。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> columns属性 </title> <style type="text/css"> div#container{ margin:auto; width: 440px; border: 1px solid black; } div#content { /* カラム幅、 カラム数、*/ columns: 130px 3; -moz…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> box-shadow </title> <style type="text/css"> div { width: 300px; height: 50px; border: 1px solid black; margin: 30px; } </style> </head> <body> <div style="box-shadow: -10px -8px 6px #444;"> box…</div></body></html>
list-item属性値は対象をul形式に変換する。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> list-item </title> <style type="text/css"> body>div{ display: list-item; list-style-type: disc ; margin-left: 20px; } div>div{ display: list-item; list-style-type: sq…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> inline-block属性値 </title> <style type="text/css"> body>div{ text-align: center; margin: auto; } div>div{ /* inline-blockで一行表示を保証 */ display: inline-block; border: 1px solid black; } a { text-dec…</meta></head></html>
box modelの種類 block(div,p) : 高、幅設定できて、一行を占める inline(span, a) : 高、幅設定しても効かない、一行に複数設置できる <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 bla…</meta></head></html>
overflow属性は表示しきれない場合の動きを設定する。 属性 overflow overflow-x overflow-y <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> overflow属性 </title> <style type="text/css"> div { width: 300px; height: 70px; border: 1px solid black; white-space: nowrap; margi…</meta></head></html>
clip属性を使い表示領域を切り抜きできる。 ※1. clip属性を有効にするためには下記設定必要。 position:absolute overflow:hiddenn <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> clip属性</title> <style type="text/css"> div { position:absolute; font-size: 30pt; border:2px solid black; ba…</meta></head></html>
左右に浮動コンポーネントが出現可能かを指定する。 属性値 left right both <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> clear属性 </title> <style type="text/css"> div>div{ width: 220px; padding: 5px; margin:2px; float:left; background-color: #ddd; } </style> </head> </html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> float属性 </title> <style type="text/css"> div { border:1px solid black; width: 150px; height: 80px; padding: 5px; } </style> </head> <body> <div style="float:left;"> float:left; 左に浮く１ </div> </body></html>
