<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>
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>
<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>
・サイズ指定 <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>
<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>
・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>
・背景色 ・背景図(繰り返し、位置) <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>
@font-face { /* フォント名 */ font-family: CrazyIt; /* フォントのURL(絶対／相対) フォーマット(*.ttf／*.otf) */ /* localが優先される */ src: local("フォント名"), url("url") format("fontformat"); }
<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>
<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>
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>…
<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>
<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:ＭＳ ゴシック </body></html>
E:not(s) : 単体セレクタ s にマッチしない E 要素 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> :child </title> <style type="text/css"> li:not(#ajax) { color: #999; font-weight: bold; } </style> </head> <body> <ul> <li id="java">Java</li> <li id="javaee">J…</li></ul></body></html>
E:link／E:visited : 未訪問 (:link) であるもの、訪問済 (:visited) E:active : ユーザーによって実行されたE要素 E:hover : ユーザーがポインティングデバイスで示したE要素 E:focus : ユーザーによって実行されたE要素 E:enabled ／ E:disabled UI 要素で…
E:first-of-type : 同じ型をもつ要素のうち最初の E 要素。E:nth-of-type(1) と等価 E:last-of-type : 同じ型をもつ要素のうち最後の E 要素。E:nth-last-of-type(1) と等価 E:nth-of-type(an+b) : 同じ型をもつ要素のうち n 番目にある E 要素 E:only-of-ty…
E:first-child : 最初の子である E 要素。E:nth-child(1) と等価 E:last-child : 最後の子である E 要素。E:nth-last-child(1) と等価 E:nth-child(an+b) : n 番目の子であるE要素。最初の子要素のインデックスは1。 E:nth-last-child(an+b) : 後ろから数え…
・E::first-letter : E 要素の先頭文字 ・E::first-line : E 要素の最初の整形済行 ・E::before : E 要素の内容の前にある生成コンテンツ。なお、生成コンテンツはインライン要素になる。 ・E::after : E 要素の内容の後にある生成コンテンツ。なお、生成コ…
・E F : 子孫結合子。E 要素の子孫であるすべての F 要素。 ・E > F : 子結合子。E 要素の子であるすべての F 要素。 ・E + F : 隣接兄弟結合子。E 要素の直後に現れる F 要素 ・E ~ F : 一般兄弟結合子。E 要素のあとに現れる F 要素 ・E F : 子孫結合子 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /></meta></head></html>…
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>IDとclassセレクタ</title> <style type="text/css"> #yy { background-color:#82FF63; } p#xx { border:2px dotted black; background-color:#888; height:40px; } .myclass { background-color:#7FD5F8; } p.mycl…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> 属性セレクタ </title> <style type="text/css"> div { width:550px; height:25px; background-color:#eee; border:1px solid black; padding:10px; } div[id] { background-color:#999; } div[class=class1] { back…</meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 要素セレクタ </title> <style type="text/css"> /* div要素 */ div{ background-color: grey; font: 100% serif; } /* p要素 */ p{ background-color: #444; color:#fff; font: 200% serif; } </style> </head> <body>…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC" /> <title> CSS </title> <link href="outer1.css" rel="stylesheet" type="text/css" /> <style type="text/css"> @import "outer2.css"; </style> </link></meta></head></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> canvas出力 </title> </head> <body> <h2> canvas出力サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <h2>出力結果</h2> <img id="result"></img>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title>グラデーション</title> </head> <body> <h2> グラデーションサンプル </h2> <canvas id="canvas" width="400" height="420" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canv…</body></html>
