読者です 読者をやめる 読者になる 読者になる

liguofeng29’s blog

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

CSS3.0

CSS3.0のAnimation - 動画効果(animation属性)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> Animation </title> <style type="text/css"> /* keyframe指定 */ @-webkit-keyframes 'moving' { /* 開始 */ 0% { left: 100px; } /* 40%時のフレーム */ 40% { left: 150px; } /* 60%時のフレーム */ 60% { left: 75px; } /…</meta></head></html>

CSS3.0のTransition - 動画効果

背景色動画効果 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 背景色変換 </title> <style type="text/css"> div { width: 400px; height: 50px; border: 1px solid black; background-color: red; padding: 10px; /* CSS標準属性を指定する */ -moz-transition: background-co…</meta></head></html>

CSS3.0のTransition - 矩形変換(matrixメソッド)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> matrix </title> <style type="text/css"> div { position: absolute; width: 120px; height: 120px; background-color: #bbb; border: 1px solid black; } div.a { left: 50px; top: 50px; } div.b { left: …</meta></head></html>

CSS3.0のTransition - 中心指定変形(transform-origin)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform-origin </title> <style type="text/css"> div { position: absolute; width: 90px; height: 90px; background-color: #bbb; border: 2px solid black; } div.a { left: 30px; top: 30px; } div.b …</meta></head></html>

CSS3.0のTransition - 基本変形(transform)

コンポーネントの基本変形サンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> transform </title> <style type="text/css"> div { display: inline-block; width: 60px; height: 60px; background-color: #bbb; border: 2px solid black; margin: 20px; } </style> </meta></head></html>

CSS3.0のレイアウト関連 - media query

メディア毎の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>

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のレイアウト関連 - 複数カラムレイアウト

・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>

CSS3.0のレイアウト関連 - box model、table、tdに影を追加する

<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>

CSS3.0のレイアウト関連 - display属性(list-item)

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>

CSS3.0のレイアウト関連 - display属性(inline-block、inline-table)

<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>

CSS3.0のレイアウト関連 - display属性(inline,block,none)

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>

CSS3.0のレイアウト関連 - overflow属性

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>

CSS3.0のレイアウト関連 - clip属性

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>

CSS3.0のレイアウト関連 - clear属性

左右に浮動コンポーネントが出現可能かを指定する。 属性値 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>

CSS3.0のレイアウト関連 - float属性

<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; 左に浮く1 </div> </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>

CSS3.0のセレクタ - 否定擬似クラス

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>

CSS3.0のセレクタ - 擬似クラス

E:link/E:visited : 未訪問 (:link) であるもの、訪問済 (:visited) E:active : ユーザーによって実行されたE要素 E:hover : ユーザーがポインティングデバイスで示したE要素 E:focus : ユーザーによって実行されたE要素 E:enabled / E:disabled UI 要素で…

CSS3.0のセレクタ - 構造擬似クラス(N番タイプ)

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…

CSS3.0のセレクタ - 構造擬似クラス(N番子要素)

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) : 後ろから数え…

CSS3.0のセレクタ - 擬似要素

・E::first-letter : E 要素の先頭文字 ・E::first-line : E 要素の最初の整形済行 ・E::before : E 要素の内容の前にある生成コンテンツ。なお、生成コンテンツはインライン要素になる。 ・E::after : E 要素の内容の後にある生成コンテンツ。なお、生成コ…

CSS3.0のセレクタ - 結合子

・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>…

CSS3.0のセレクタ - idとclassセレクタ

<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>

CSS3.0のセレクタ - 属性(element)セレクタ

<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>

CSS3.0のセレクタ - 要素(element)セレクタ

<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>

CSS3.0 - CSSの4つの適用方法サンプル

<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>