CSS3 リファレンス
| プロパティー名と値 | 説明 | サンプル文 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ⁄*コメント*⁄ | ⁄**⁄の中に書く文字または文字列はコメントになります。 | ⁄*↓ここからリンク部分の設定をします↓*⁄ | 実行するとページにはコメント部分は表示されません。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <meta http-equiv="Content-Style-Type"content="text/css""> | HTML4.01文書の場合の指定法*HTML5の場合はデフォルトでCSSが指定されているので記述の必要は無い | <head> <meta http-equiv="Content-Style-Type"content="text/css""> </head> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <link rel="stylesheet"href="ファイル名.css"> | HTML5文書に外部CSSファイルを適応させる | <head> <link rel="stylesheet"href="ファイル名.css"> ⁄*↓HTML5以前の場合↓*⁄ <link rel="stylesheet"href="ファイル名.css"type="text/css"> </head> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
CSS3 Media Queries     ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| メディア・クエリとは、HTML 4 でのメディアタイプを拡張したもので、従来との違いは解像度などの条件を附加する事も可能な点である。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| link要素のmedia属性にメディアタイプを指定する HTML側 <link rel="stylesheet" media="screen" href="cssパス"/> <link rel="stylesheet" media="(width:300px)" href="cssパス"/> | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @media規則を利用し細部指定 @media screen{div{background:#FFF;}} @media (width:200px ){div{background:#FFF;}} | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 媒体特性 | 説明 | min:max 接頭辞 | 式と値 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| width | ウインドウ（ブラウザ等）の幅 | min-width max-width | (width:333px) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| height | ウインドウの高さ | min-height max-height | (height:666px) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| aspect-ratio | ウインドウの縦横比 | min-aspect-ratio max-aspect-ratio | (aspect-ratio:16/9) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| device-aspect-ratio | ディスプレイの縦横比 | min-device-aspect-ratio max-device-aspect-ratio | (device-aspect-ratio:16/9) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| device-width | ディスプレイの幅 | min-device-width max-device-width | (device-width:333px) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| device-height | ディスプレイの高さ | min-device-height max-device-height | (device-height:666px) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| color | カラーの場合、その色のビット数 | min-color max-color | (color:16) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| color-index | 出力ディバイスのカラーテーブルのエントリー数 | min-color-index max-color-index | (color-index:256) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| resolution | 解像度 | min-resolution max-resolution | (resolution:250dpi) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| orientation | ディバイスの方向（縦or横） | 無し | 値 portrait landscape | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| monochrome | モノクロの場合その階調のビット数 | min-monochrome max-monochrome | (monochrome:1) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
background ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background:カラー指定 画像uri(url) リピート指定 画像固定 ポジション ; | backgroundプロパティは background-color, background-image background-repeat background-attachment background-positionプロパティを まとめて設定します。使わないプロパティーは省略可能です。順序も問いません。 カンマで区切って複数指定も可能です。 |
background:url(画像パス) no-repeat 10px 10px,#000; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background-image:url(画像パス); | 背景画像を配置します。 カンマ区切りで複数指定できます。 その際先に指定した方から上に表示されます。 | 以下の画像をbackground-imageで設定します。   background:#000; background-image:url(img/a.jpg),url(img/b.jpg),url(img/c.jpg); background-repeat:no-repeat; background-position:center, bottom, center bottom; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| <background-repeat:リピート指定;> | 背景画像の繰り返しを指定します。何も指定しなければ、画像は画面サイズ分繰り返されます。 | background-repeat:no-repeat; 繰り返しません background-repeat:repeat-x; 横方向のみ background-repeat:repeat-y; 縦方向のみ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background-position:水平位置 垂直位置; | 背景画像の表示開始位置を指定します。 表示開始位置を％や数値で指定する場合は、横方向・縦方向の順にスペースで区切って指定します
| background-position:10% 10%; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background-attachment:画像固定方法の値; | 背景画像を画面スクロール時にどう動作させるかを指定します
| background-image: url("images/aaa.jpg"); background-repeat: no-repeat; background-attachment: fixed; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background-size:サイズ適用方法の値; | 背景画像のサイズを指定します。
| background-size:cover; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
文字色と背景色 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| color: background-color: | colorは文字色 background-colorは、背景色です 値は色の指定です。 例 16進数 #00cc99; 10進数 255,255,168; 色指定 red; | P{ color:#336699; background-color:blue; } | 文字色と背景色 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
border-radius（角丸） Firefox以外はベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border-radius | 角丸を作ります | border-radius:10px; -moz-border-radius:10px; border-radius:20px 10px; -moz-border-radius:20px 10px; |
border-radius:10px;
border-radius:20px 10px;
border-radius:10px 20px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border-top-left-radius | 左上のみ角丸 | border-top-left-radius:20px; -moz-border-radius-topleft:20px; |
border-radius:10px 20px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border-top-right-radius | 右上のみ角丸 | border-top-right-radius:20px; -moz-border-radius-topright:20px; |
border-radius:10px 20px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border-bottom-left-radius | 左下のみ角丸 | border-bottom-left-radius:20px; -moz-border-radius-bottomleft:20px; |
border-radius:10px 20px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| border-bottom-right-radius | 右下のみ角丸 | border-bottom-right-radius:20px; -moz-border-radius-bottomright:20px; |
border-radius:10px 20px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
box-shadow（BOXに影） Firefox3.6以外はベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | BOXに影をつけます。
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 下方に影 | box-shadow:#639 0px 5px 10px; | box-shadow:#639 0px 5px 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 上方に影 | box-shadow:#639 0px -5px 10px; | box-shadow:#639 0px -5px 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 右側に影 | box-shadow:#639 5px 0px 10px; | box-shadow:#639 0px -5px 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 左側に影 | box-shadow:#639 -5px 0px 10px; | box-shadow:#639 0px -5px 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 内側に影 | box-shadow:inset #639 0px 0px 10px; | box-shadow:#639 0px -5px 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-shadow | 色を変える | box-shadow:#0F0 3px 0px 3px, #FC0 -3px 0px 3px, #609 0px 3px 3px, #F09 0px -3px 3px; |
box-shadow:#0F0 3px 0px 3px, #FC0 -3px 0px 3px, #609 0px 3px 3px, #F09 0px -3px 3px; | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
text-shadow（文字に影） ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| text-shadow | 文字に影をつけます。 カンマ区切りで複数指定できます。
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| text-shadow | 文字に赤いぼかしの無い影をつけて縁取りタッチにします。 | text-shadow:#F39 0px 0px 1px, #000 0px 0px 5px; | TEXT-SHADOW | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| text-shadow | 文字に赤い影と黒い影をつけます | text-shadow:#F39 0px 0px 1px, #000 0px 0px 5px; | TEXT-SHADOW | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| text-shadow | ぼかしの無い影をつけます | text-shadow: #666 5px 5px 1px; | TEXT-SHADOW | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
:linear-gradient()（線形グラデーション）詳しくはグラデーションを参照してください  webkitとmozでは指定法が違います | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| :linear-gradient() | 画像を扱える様々なプロパティーの値として指定できる。:linear-gradient(開始位置 角度,開始色 位置, 終了色 位置); | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background: -moz-linear-gradient(top,#cc33ff, #33ccff); background: -webkit-gradient(linear, left top, left bottom, from(#cc33ff), to(#33ccff)); | 通常のグラデーション ベンダープレフィクスが必要です。ブラウザによって指定法が違うので注意が必要。IEは当然使えません |
#cc33ff 〜 #33ccff | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background: -moz-linear-gradient(#0000CD, #fff 50%, #FF1493); background: -webkit-gradient(linear, left top, left bottom, from(#0000CD), color-stop(50%,#fff), to(#FF1493)); | 間に色を挟む | #0000CD 〜 #fff 〜 #FF1493 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
:radial-gradient();（円形グラデーション）詳しくは円形グラデーションを参照してください webkitとmozでは指定法が違います | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 基本構文 radial-gradient(開始位置,形状とサイズ,開始色 位置,終了色 位置); | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 記述例 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| background: -moz-radial-gradient(#FFD700, Blue); background: -webkit-gradient(radial, center center, 15, center center, 100, from(#FFD700), to(Blue)); |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 透明度指定タイプ background: -webkit-gradient(radial, center top, 100, center top, 500, from(rgba(0,0,139,1)), to(rgba(255,255,255,0))); background: -moz-radial-gradient(center top, circle farthest-side, rgba(0,0,139,1), rgba(255,255,255,0)); |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
transition-property:（トランジション効果） ベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 基本事項 任意のスタイルを別の任意のスタイルへ変化させる効果をcssのみで実現します。
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-property transition-duration 対応ブラウザ Fx4.0以降 Chrome11以降 Safari5以降 Opera11以降 IE8,IE9未対応2011/6時点 |
記述と実行例では、DIV要素の背景色を変化させます |
div{ background-color:#0000ff; -moz-transition-property:background-color; -moz-transition-duration:3s; -o-transition-property:background-color; -o-transition-duration:3s; -webkit-transition-property:background-color; -webkit-transition-duration:3s; } div:hover{ background-color:#cc00ff; } | TRANSITION | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transition-timing-function: | 変化する速度のパターン指定 |
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
transition-timing-function: | div{ background-color:#0000ff; -moz-transition-property:background-color,width,height; -moz-transition-duration:3s; -o-transition-property:background-color,width,height; -o-transition-duration:3s; -webkit-transition-property:background-color,width,height; -webkit-transition-timing-function: 値; -moz-transition-timing-function: 値; -o-transition-timing-function: 値; -webkit-transition-duration:3s; width:300px; height:100px; } div:hover{ background-color:#cc00ff; transition-timing-function:値 width:300px; height:200px; } | 記述例 | 実行例 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ゆっくり→加速→減速 | transition-timing-function:ease; -webkit-transition-timing-function:ease; -moz-transition-timing-function:ease; -o-transition-timing-function:ease; | TRANSITION | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
一定速度 | transition-timing-function:linear; -webkit-transition-timing-function:linear; -moz-transition-timing-function:linear; -o-transition-timing-function:linear; | TRANSITION | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ゆっくり→加速 | transition-timing-function:ease-in; -webkit-transition-timing-function:ease-in; -moz-transition-timing-function:ease-in; -o-transition-timing-function:ease-in; | TRANSITION | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
高速→減速 | transition-timing-function:ease-out; -webkit-transition-timing-function:ease-out; -moz-transition-timing-function:ease-out; -o-transition-timing-function:ease-out; | TRANSITION | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ゆっくり→徐々に加速→減速 | transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; -moz-transition-timing-function:ease-in-out; -o-transition-timing-function:ease-in-out; | TRANSITION | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 角丸に変化させる | transition-propertyの値にborder-radiusもしくはallを指定してください。追加指定の場合はカンマで増やしてください。 HOVERの方にborder-radiusを記述してください。 | TRANSITION Radius | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 時間差で文字に影をつける | transition-propertyの値にtext-shadowもしくはallを指定してください。追加指定の場合はカンマで増やしてください。 HOVERの方にtext-shadowを記述してください。 | 時間差はtransition-duration:3s;の値をtransition-property:background-color,width,height;で指定した順番にカンマ区切りで秒数を指定します。 記述例 transition-duration:300ms,300ms,1s; | TRANSITION shadow | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
transform:（変形効果） ベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| transform | 拡大縮小、回転、傾斜、要素のBOXに移動等の変形効果を適用できる 半角スペースで複数指定可能 複数指定の際は先に指定したものから適用される。 変形の機転はBOXの中心です。 起点を変える時はtransfrom-originプロパティーを使う
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 実行例ではtransitionと併用しています。 hoverに設定していますので、マウスを文字に重ねると確認できます。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| translate(●●px) | X軸のみの指定ですのでマウスを文字に重ねた時に右に66PX移動します右水平以外の任意の場所に移動させたい場合はY軸も指定してください。カンマ区切りです。 | -webkit-transform: translate(66px); -moz-transform: translate(66px); -o-transform: translate(66px); -ms-transform: translate(66px); transform: translate(66px); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scale(0.●) / 縮小 | 0.1~0.9の間で指定してください | -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -o-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| scale(●) / 拡大 | 1.1〜指定して下さい。 | -webkit-transform: scale(3); -moz-transform: scale(3); -o-transform: scale(3); -ms-transform: scale(3); ransform: scale(3); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| rotate(●deg) | 360deg以上を指定し高速回転させています | -moz-transform: rotate(5000deg); -webkit-transform: rotate(5000deg); -o-transform: rotate(5000deg); -ms-transform: rotate(5000deg); transform: rotate(5000deg); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| skewX(●deg) | 傾斜をかけます（シアー） | -moz-transform: skewX(44deg); -webkit-transform: skewX(44deg); -o-transform: skewX(44deg); -ms-transform: skewX(44deg); transform: skewX(44deg); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| matrix(●,●,●,●,●,●); | いろいろ値を変えてみて実験してみてください、その方が解り易いです。 | -moz-transform:matrix(2,0,500,2,0,0); -webkit-transform:matrix(2,0,500,2,0,0); -o-transform:matrix(2,0,500,2,0,0); -ms-transform:matrix(2,0,500,2,0,0); transform:matrix(2,0,500,2,0,0); | translate | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
アニメーション ベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| トランジション機能の拡張版トランジションでは最初と最後の値を設定するのに対しアニメーションでは『キーフレーム』を設定し完了までのスタイルの変化を細かく設定できます。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @keyframes キーフレーム名{ 0% {プロパティー:値;} ☆%{プロパティー:値} ・ ・ ・ 100%{プロパティー} } | アニメーションを定義します | @-webkit-keyframes test{ 0% {background:#0000cc;} 20%{background:#6600ff;} 40%{background:#ff0099;} 60%{background:#ffcc66;} 80%{background:#99ff00;} 100%{background:#33ff66;} } div#anime:hover{ -webkit-animation-name: test; -webkit-animation-duration: 5s; } | ここにマウスをおいてください #animeは『ここにマウスをおいてください』という部分をdivで囲いIDを振ってあります。 そのID名がANIMEです。 ID名は任意で好きなように付けてください。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-name: | @keyframesでつけた、キーフレーム名をつけます。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-duration: | アニメーションが完了するまでの時間指定sまたはmsで指定。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-timing-function: | 速度パターン
| -webkit-animation-timing-function:ease-in-out; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-iteration-count: | 実行回数指定
| -webkit-animation-iteration-count:infinite; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-direction: | 逆再生するか否かを指定
| -webkit-animation-direction:alternate; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation-delay: | アニメーションを遅れて再生します。 マイナス値を設定すると指定した分戻った位置から再生されます。 | -webkit-animation-delay:3s; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| animation: | 一括指定。半角スペースで区切る。順番は任意 | animation:animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
透明度 ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| opacity: | 要素のボックス全体の透明度指定。 指定した要素内にある要素全てに適用されます。 | body{ background:url(sora.png);} div{width:300px; height:66px;background:#ff0099;} #test01{opacity:0.0} #test02{opacity:0.1} #test03{opacity:0.2} #test04{opacity:0.3} #test05{opacity:0.4} #test06{opacity:0.5} #test07{opacity:0.6} #test08{opacity:0.7} #test09{opacity:0.8} #test10{opacity:0.9} #test11{opacity:1.0} | OPACITY0.0 OPACITY0.1 OPACITY0.2 OPACITY0.3 OPACITY0.4 OPACITY0.5 OPACITY0.6 OPACITY0.7 OPACITY0.8 OPACITY0.9 OPACITY1.0 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 要素:rgba(); | 指定した要素のみに透明効果を適用します。 r(赤)g（緑）b（青）の値のあとにa(透明度）を0.0~1の間で指定します。 rgbの値は＃22ffccのような16進数では指定できません。 10進数か％で指定してください。 | background:rgba(255,255,0,0.4); background:rgba(100%,100%,0%,0.4); | RGBAの文字には透明はかかっていません。文字のbackground-colorのみに透明をかけています。 R G B A | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ユーザー側での要素サイズ変更 ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| プロパティー | 説明 | 記述 | 実行結果 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| resize: | ユーザー側での要素サイズ変更出来るようにします。
| div{ width:50px; height:10px; border:#000 solid 1px; resize:both; overflow:auto; } | BOXの大きさを自由に変えれます 幅高さ共に変えれます | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
内容がおさまらない場合overflow  IEのみベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
overflow-x: | xは領域に内容が収まらない場合の横方向の表示方法を指定します。
yは領域に内容が収まらない場合の縦方向の表示方法を指定します。 | overflow-x:scroll; -ms-overflow-x:scroll; white-space:nowrap; white-space:nowrap;で自動的に改行しない設定にしないとスクロールバーは完全な形ではでないようです。 | overflowを使ってスクロールバーを表示させています。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| overflow-y: | overflow-y:scroll; -ms-overflow-y:scroll; | overflowを使ってスクロールバーを表示させています。heightの値が小さすぎるとバーのスライダーのつまみが表示できないよw | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
内容がおさまらない場合text-overflow IEのみベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| text-overflow: | textがあふれる場合の処理
| -ms-text-overflow:clip; text-overflow:clip; overflow:hidden; white-space:nowrap; -ms-text-overflow:ellipsis; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; | clip:表示可能領域のみあとは切れてしまう 表示可能領域のみあとは切れてしまう 表示可能領域のみあとは切れてしまう | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ボーダーとアウトラインの間隔指定 ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| outline-offset: | 要素の輪郭線（縁取り）とボーダーの間隔を調整する | outline:#0000cc solid 5px;outline-offset:10px; border:#000 solid 10px; 青ラインがアウトラインです。黒がボーダーです。青と黒の間を調整しています。 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
WEBフォント使用 ベンダープレフィックス不要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| @font-face{ font-family:☆; src:url(○)format(◇); } セレクタ{ font-family:☆; } | WEBサーバ上のフォントを使用するよう定義します。 @font-face似よる定義はCSS冒頭で行う。そこで定義したフォントファミリー名をセレクタ側のフォントファミリープロパティーに記述して利用する。
| @font-face { font-family: "onryou"; src: local("onryou"), url("webf/onryou.TTF") format("truetype"); } p{ font-family:onryou; } | 怨霊FONT ↓使わせていただいたfontのダウンロードサイトです 暗黒工房フリーホラーフォント | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ボックスレイアウト（フレキシブルボックス系） ベンダープレフィックス必要 | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| display: | フレキシブル・ボックス:フレキシブル・ボックス内に含まれるboxを自由にレイアウトできる。
|
HTML <body> <div id="disp"> <div id="b1"> </div> <div id="b2"> </div> <div id="b3"> </div> </div> </body> CSS #disp{ width:600px; height:200px; border: 1px solid #000; display:-moz-box; display:-webkit-box; display:box; } #b1{ width:100px; background:#ffcc66; } #b2{ width:300px; height:50px; background:#ff6666; } #b3{ width:100px; background:#ff0066; } | b1 b2 b3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-orient: | フレキシブル・ボックスのレイアウトにおいて子要素のboxを縦横どちらにするか指定できる
| -webkit-box-orient:vertical; -moz-box-orient:vertical; box-orient:vertical; | b1_height:100px b2_height:50px b3_height:100px フレキシブルBOX SIZE_HEIGHT:300PX | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-direction: | フレキシブルボックス内での子要素BOXを逆順表示できる
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-ordinal-group:整数値 | 個別にBOXの並び順を指定。 まずbox-ordinal-groupプロパティーでそれぞれの子要素が、どの表示順序のグループに属するか1以上の整数で指定。値の小さいグループに属する子要素から表示される。同じグループの場合はソースに知るあsレテイル順に表示 | HTML <body> <div id="disp"> <div id="b1"> </div> <div id="b2"> </div> <div id="b3"> </div> </div> </body> CSS #disp{ width:600px; height:200px; border: 1px solid #000; display:-moz-box; display:-webkit-box; display:box; } #b1{ width:100px; background:#ffcc66; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; box-ordinal-group:3; } #b2{ width:300px; height:50px; background:#ff6666; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; } #b3{ width:100px; background:#ff0066; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2; } #b4{ width:100px; background:#ff0066; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; } | b1_GROUP3 b2_GROUP1 b3_GROUP2 b4__GROUP1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-align: | BOXを揃える位置指定
| -moz-boxalign:center; -webkit-boxalign:center; boxalign:center; | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-flex: | 各BOXに割り当てる余白比率を指定。各子要素に余白を分配しBOXサイズに加える事ができる。値には余白を分配する割合を実数値で指定＜例＞ BOX1{box-flex:1.0;}BOX2{box-flex:2.0;} とすると1：2で余白が振り分けられる事になります。 | HTML <body> <div id="disp"> <div id="b1"> </div> <div id="b2"> </div> <div id="b3"> </div> </div> </body> CSS #disp{ width:600px; height:200px; border: 1px solid #000; display:-moz-box; display:-webkit-box; display:box; } #b1{ width:100px; background:#ffcc66; -webkit-box-ordinal-group:3; -moz-box-ordinal-group:3; box-ordinal-group:3; } #b2{ width:100px; height:50px; background:#ff6666; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; -webkit-box-flex:1.0; -moz-box-flex:1.0; box-flex:1.0; } #b3{ width:100px; background:#ff0066; -webkit-box-ordinal-group:2; -moz-box-ordinal-group:2; box-ordinal-group:2; } #b4{ width:100px; background:#ff0066; -webkit-box-ordinal-group:1; -moz-box-ordinal-group:1; box-ordinal-group:1; -webkit-box-flex:2.0; -moz-box-flex:2.0; box-flex:2.0; } | BOX1
BOX2
BOX3 BOX4
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| box-pack: | 余白が生じた場合にBOXの寄せ方を指定。横にBOXが並べられている場合、中央左右。縦の場合、中央上下のいずれかに寄せる。
|
HTML <body> <div id="disp"> <div id="b1"> </div> <div id="b2"> </div> <div id="b3"> </div> </div> </body> CSS #disp{ width:600px; height:200px; border: 1px solid #000; display:-moz-box; display:-webkit-box; display:box; -webkit-box-pack:stretch; -moz-box-pack:stretch; box-box-pack:stretch; } #b1{ width:100px; height:200px; background:#ffcc66; } #b2{ width:100px; height:200px; background:#ff6666; } #b3{ width:100px; height:200px; background:#ff0066; } #b4{ width:100px; height:200px; background:#ff0066; } | BOX1
BOX2
BOX3 BOX4
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||