body{ *** }
background-attachment: fixed; 背景のスクロールなし
background-attachment: scroll; 背景をスクロールあり
background-color: #ffffff; 背景色
background-image: url(../画像名.gif); 背景画像
background-position: center; 背景画像の表示開始位置
background-position: 100% 100%; 表示位置の左・上%
background-repeat: repeat; 背景画像の並べ方(垂直水平)
background-repeat: no-repeat; 背景画像を繰り返さない
background: #ffffff url(image/xxx.gif) repeat-y fixed right top; ショートハンド
- [ background memo ]
- background-repeat: repeat-x; 背景画像の並べ方(水平) / background-repeat: repeat-y; 背景画像の並べ方(垂直) は対応ブラウザが限られます。
border-color: #fff; 枠色
border-style: solid; 実線
border-spacing: *px; セルの間隔
border-width: *px; 枠線[上下左右]
border-width: 3px 5px; 枠線[上下3][左右5]
border-width: 3px 5px 8px; [上3][左右5][下8]
border-width: 上px 右px 下px 左px; 枠線
- [ border memo ]
- 個別に指定する場合 border-top / border-right / border-left / border-bottom
- * border 種類
- solid (実線)、dashed (破線)、double (二重線)、groove (凹線)、ridge (凸線)、inset (内側が凹線)
- outset (内側が凸線)、dotted (玉線)
img#xxx{
overflow: hidden;
clip: rect(*px *px *px *px);
}
- [ clip memo ]
- clip=切り抜き表示
- *pxは上・右・下・左の順に指定します。切り抜き方は矩形のみになります。
- clipはIE6.0まで対応していません。
div.news:before{content: "新着ニュース : ";} クラスnewsの前に新着ニュース : を入れる場合。
div.news:before{content: open-quote;} クラスnewsの前に引用符を入れる場合。
div.news:after{content: close-quote;} クラスnewsの後に引用符を入れる場合。
div.news:before{content: no-open-quote;} 表示はありませんが、引用開始となります。
div.news:before{content: no-close-quote;} 表示はありませんが、引用終了となります。
h3:before{content: "■■¥A■";} h3の前に■■改行■を入れる場合。
h3:after{content: url("画像名.gif");} h3の後に画像を入れる場合。wavも可能。
- [ content memo ]
- エスケープ文字の¥A(円マークA)は改行。
- content=生成内容
- quotes=contentプロパティで追加する引用符の設定
- content、quotesはIE6.0まで対応していないので説明は省きます。
h1:before {
content: "Chapter " counters(chapter) ". ";
counter-increment: chapter;
counter-reset: section;
}
h2:before {
content: counters(chapter) "." counters(section) " ";
counter-increment: section;
}
- [ counter memo ]
- counter=カウンタ
- W3Cの仕様書の例
- counterはIE6.0まで対応していないので説明は省きます。
cursor: xxx; カーソル
- [ cursor memo ]
- * cursor 種類
- crosshair (十字)、pointer (指)、move (十字矢印)、text (I)、wait (砂時計)、help (はてな・バルーン)
- e-resize・w-resize (左右矢印)、n-resize・s-resize (上下矢印)
- ne-resize・sw-resize (斜右上左下矢印)、nw-resize・se-resize (斜左上右下矢印)
css + xhtml + seo は新着情報をRSS(フィード)で配信しています。
ご希望の方は下記のアイコンからご利用ください。
- Google
-
- [ 動作環境 ]
- * Win XP
- * Win 2000
- * Linux
- * IE 6.0
- * (IE 7.0)
- * Firefox 1.5
- * Sleipnir 2.3
- * Opera 9.1
- [ Tie-up ]
- web design...
- アイコン・ボタン・背景等の Web 素材サイト
- フリー写真画像素材...
- ホームページ( Web )作成の為のフリー写真・画像素材サイト
- [ RSS + ]
