2018年04月

no image

アニメーション

animation-name/アニメの名前アニメーション・キーフレームの名前。 @-webkit-keyframes test {0% { background:#CCCCCC}30% { background

no image

動的な変化

transition-property/スムーズに変化ブロックをスムーズに変化する。 .item_01 {-moz-transition-property: background-color, width, heig

no image

移動・回転・拡大・縮小

transform/ブロックの変化ブロックの変化.item_01 {-webkit-transform: rotate(13deg) scale(0.727) skew(-28deg) translate(2px);

no image

ボックスの並び

display/ボックスにするボックスレイアウト .item_01 {width: 90%;height:140px;border:gray solid 5px;display: box;displa

no image

カラムレイアウト

column-count/カラムの数を指定段の数を指定 div.item_01 {column-count:4;width: 300px;border: solid 1px #666;} <div class

no image

ボックス

box-shadow/ボックスに影ボックスに影をつける p.item_01, p.item_02, p.item_03 {border: 1px solid gray;width: 300px;line-

no image

ボーダー

border-radius/角丸の指定角丸の指定 p.item_01, p.item_02 {border: 1px solid gray;width: 200px;height:30px;line-h

no image

テキスト

@font-face/WEBフォントサーバー上のフォントで表示。 /* IEブラウザ */@font-face {font-family: 'Calligraf

no image

背景

background/背景複数指定背景の複数指定等。div.item_01 {background: url(samples/bg_02.gif),url(samples/bg_01.gif);padding: 5px;

no image

メディア

@media/メディアごとにCSSを指定解像度によってスタイルを変更。<link media="only and (max-width: 481x)" href="pc.css"><link m