liguofeng29’s blog

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

2016-02-05から1日間の記事一覧

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>