涼風コンピュータblog

涼風 ・Rubyist, RubyやRuby on Railsに詳しくなっていきたいです

CSSの勉強(2)とCSS3の勉強

本日はドットインストールでCSSの勉強、CSS3の勉強をしました

CSSでは、カーソルを変更することもできます

<style>
  .change {
    cursor: move;
  }
</style>

<span class="change">hello</span>

こんなかんじにすると、ドラッグ可能なカーソルに変更されます

CSS3では、まだ策定段階ですが各ベンダーが先行して、機能を実装しています。そのため、各ベンダーの使える機能がまちまちです。各ベンダーのみで使えるきのは、ベンダープレフィックを先頭につけます

border-radius:5px; /* ベンダープレフィックなし */
-webkit-border-radius:5px;   /* ベンダープレフィックス    */

ベンダープレフィック一覧

どの機能がサポートされているのか、ベンダープレフィックをつける必要があるのかはhttp://caniuse.comで調べることができます。 今回はGoogle Chromeで確認しました

div要素に対して、border-radiusプロパティを設定すると、角丸にすることができます

div {
  width: 100px;
  height: 100px;
  border-radius: 10px 20px 30px 40px
}

border-radius: 左上の半径, 右上の半径, 右下の半径, 左下の半径

一つだけ設定すると4つの角に設定されます

%も設定でき、以下を設定すると円になります。そして、background-imageを設定すると円に繰り抜いた画像が表示されます

border-radius: 50%;
background-image:url('画像ファイル');

これは簡単で使えそうだ思いました

・ボックスシャドウ

四角形に影を落とします

box-shadow:10px 20px 5px

box-shadow: x方向ずらし y方向ずらし ぼかし具合 色

色を指定しないと黒になります

・テキストシャドウ

ボックスシャドウと同じ要領でテキストに影をつけることができます

 text-shadow: 1px 1px 0 white;

text-shadow: x方向ずらし y方向ずらし ぼかし具合 色;

CSS3はかなり複雑なことをできるので、CSS3のコードを生成するページも紹介されていました