liguofeng29’s blog

個人勉強用ブログだっす。

┗━CSS3.0の各種修飾

CSS3.0の各種修飾 - cursor属性

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> cursor属性 </title> <style type="text/css"> div#container { border: 1px solid black; padding: 5px; width: 600px; height: 140px; display: box; display: -moz-box; display: -webkit-box; box-orient: …</meta></head></html>

CSS3.0の各種修飾 - リスト関連

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> list-style </title> <style type="text/css"> li { background-color: #aaa; } </style> </head> <body> イメージを使用する <ul style="list-style-image:url(hana.gif);"> <li>列1-1</li> <li>列1-2</li> <li>列1-3</li></ul></body></html>

CSS3.0の各種修飾 - table関連

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> table関連 </title> <style type="text/css"> table { width: 400px; border: 1px solid black; margin:20px; } td { background-color:#ccc; border: 1px solid black; } </style> </head> <body> セルは連結、表タイトル…</body></html>

CSS3.0の各種修飾 - outline(光る効果)

outlineは、目標に光る効果を追加する。 ※outlineは物理領域は占めない。 属性: outline outline-color outline-style outline-width outline-offset <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>outline(光る効果)</title> <style type="text/css"> body { font-size: 24pt; } div { font…</meta></head></html>

CSS3.0の各種修飾 - 位置指定 (position,z-index,top,left,right,bottom)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS"/> <title>位置指定</title> </head> <body> Struts<br/> Hibernate<br/> Spring<br/> jBPM<br/> </br/></br/></br/></br/></body></html>

CSS3.0の各種修飾 - サイズ関連属性 (width,height,box-sizing,resize)

・サイズ指定 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>サイズ関連</title> </head> <body> <div style="width:200px;height:40px;background-color:#ddd"> widthとheight属性でサイズ指定。 </div> <br> <b>box-sizing属性</b> </body></html>

CSS3.0の各種修飾 - padding,margin

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>paddingとmargin</title> <style type="text/css"> div { width: 300px; height: 40px; border: 10px solid black; } </style> </head> <body> padding:10px 50px; 上下10px, 左右50px </body></html>

CSS3.0の各種修飾 - border

・border <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>border</title> <style type="text/css"> div { width:300px; height:40px; } </style> </head> <body> border:5px solid #666 <div style="border:5px solid #666"> 6pxの実線</div> border:2px dashed …</body></html>

CSS3.0の各種修飾 - background

・背景色 ・背景図(繰り返し、位置) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>background</title> <style type="text/css"> div{ border:1px solid #000; height: 70px; width: 200px; } </style> </head> <body> background-color:#aaa </body></html>

CSS3.0の各種修飾 - サーバフォント使用(@font-face)

@font-face { /* フォント名 */ font-family: CrazyIt; /* フォントのURL(絶対/相対) フォーマット(*.ttf/*.otf) */ /* localが優先される */ src: local("フォント名"), url("url") format("fontformat"); }

CSS3.0の各種修飾 - テキスト関連属性

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>テキスト関連属性</title> <style type="text/css"> div{ border:1px solid #000000; height: 40px; width: 200px; } </style> </head> <body> text-indent:20pt <div style="text-indent:20pt">テス…</div></body></html>

CSS3.0の各種修飾 - 色表示

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 色表示 </title> <style type="text/css"> div>div{ width: 400px; height: 40px; } </style> </head> <body> <script type="text/javascript"> for (var i = 0; i < 110 ; i++) { document.write("テスト文字"); } <…</body></html>

CSS3.0の各種修飾 - font-size-adjust属性

font種類によって文字の幅が異なったりする。これを解決するために使用するのがfont-size-adjust属性。 ※font-size-adjust属性値は通常フォントのaspect値を設定する。 font種類のaspect値は固定されている。 aspect値 = 小文字xの高さ / フォントサイズ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title></title></meta></head></html>…

CSS3.0の各種修飾 - 文字に影を追加する

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を追加する </title> <style type="text/css"> span{ display: block; padding: 8px; font-size:xx-large; } </style> </head> <body> text-shadow:red 5px 5px 2px: <span style="text-shadow:red 5px 5px 2px">…</span></body></html>

CSS3.0の各種修飾 - フォント関連属性

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> フォント関連属性 </title> </head> <body> color:#888888: <span style="color:#888888">テスト文字列</span><br /> color:red: <span style="color:red">テスト文字列</span><br /> font-family:MS ゴシック </body></html>