2016-01-01から1ヶ月間の記事一覧
<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>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 合成制御 </title> </head> <body> <h2> 合成制御サンプル </h2> オプション選択<select style="width:160px" onchange="draw(this.value);";> <option value="source-over">source-over</option> <option value="source-in">sou…</option></select></body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 矩形陣変換 </title> </head> <body> <h2> 矩形陣変換サンプル </h2> <canvas id="canvas" width="600" height="360" style="border:1px solid black"></canvas> <script type="text/javascript"> function skew(context,an…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 雪効果 </title> </head> <body> <h2> 雪効果サンプル </h2> <canvas id="canvas" width="420" height="280" style="border:1px solid black"></canvas> <script type="text/javascript"> // 雪 function createFlower(c…</body></html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 座標変換 </title> </head> <body> <h2> 座標変換サンプル </h2> <canvas id="canvas" width="420" height="320" style="border:1px solid black"></canvas> <script type="text/javascript"> // canvas要素取得 var canvas =…</body></html>
イメージ描くをメソッド void drawImage(Image image, float x, float y) : x,y位置にそのまま表示する void drawImage(Image image, float x, float y, float width, float height) : x,y位置に伸縮して表示する void drawImage(Image image, integer sx, i…
複雑な図形を描く際には経路を使う。 使用流れ canvasRenderingContext2DのbeginPaht()で開始する canvasRenderingContext2Dのメソッドで経路を追加する arc arcTo bezierCurveTo lineTo moveTo quadraticCurveTo rect canvasRenderingContext2DのclosePaht(…
影を設定する属性 shadowBlur shadowColor shadowOffsetX shadowOffsetY <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を設定する</title> </head> <body> <h2> 影を設定するサンプル </h2> <canvas id="canvas" width="500" height="280" style="border:1px solid black"></canvas></body></html>
テキストを描く二つのメソッド fillText(String text, float x, float y, [float maxWidth]) strokeText(String text, float x, float y, [float maxWidth]) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> テキストを描く </title> </head> <body> <h2> テキストを描くサンプル </h2> </body></html>
四角を描く二つのメソッド fillRect(float x, float y, float width, float height) strokeRect(float x, float y, float width, float height) <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 図形を描く </title> </head> <body> <h2> 図形を描くサンプル </h2> </body></html>
