LoginSignup
5
5

More than 5 years have passed since last update.

@intern

CSS3入門(nojimayusuke)

Last updated at Posted at 2014-05-01

まとめ

CSS3の特徴

  • webサイトの見た目を規定する言語virsion3
  • 多彩な表現（影、角丸、ちょっとしたアニメーションなど）
  • 策定中のため、各ブラウザによって実装が異なる。（ここではGoogle Chromeを使用）

ベンダープレフィックスとは

  • 先行的に実装している実験的な機能
  • 例. -webkit-border-radius:5px;(角丸を作成)
  • -webkit-がベンダープレフィックス
  • ベンダープレフィックス種類
    • -webkit- : chrome / safari
    • -moz- : firefox
    • -o- : opera
    • -ms- : internet explorer
  • caniuse.com　ブラウザの対応状況を調べるのに使用

角丸をつけてみる

<style>
    div {
         width: 100px;
         height: 100px;
         padding: 10px;
         margin: 30px;
         background-color:orange;
         border:2px solid orangered;
         border-radius:10px;
     }
</style>
  • 正方形の四つ角を角丸にする。
  • 「border-radius:10px;」 角に10pxの円が埋まっているという考え方。
  • １つの数値を指定するだけで全部の角に適用される。
  • それぞれの角に対応させるように数値を指定することもできる。 　
    • ３つの数値を指定した場合、左上、右上左下、右上に適用される。
    • ２つの数字を指定した場合、左上右下、右上左下に適用される。
  • border-top-right-radius:30px; 右上だけ角丸にしたい場合。

角丸を使ったテクニック

  • pxは%でも表示できる。
  • border-radius:50%; 正円になる
  • background-image:url('画像名.jpg');　画像を切り抜いて表示することができる。

色の指定と透明化

  • background-color:rgba(0,0,0,0.7); rgbaで色の指定ができる。
    • r(red) b(blue) g(green) a(透明度)
  • opacity 要素全体の透明度を変更する場合

ボックス要素に影をつける

box-shadow:10px 20px;

　* 水平方向に10px 垂直方向に20pxの場所に影を作成

box-shadow:10px 20px 5px;
  • 作成した影を5pxぼかしたい
box-shadow:10px 20px 5px 20px;
  • 影の幅を指定する 
box-shadow:10px 20px 5px rgba(0,0,0,0.3);
  • 影の色を黒ではなく他の色に指定する
box-shadow:10px 20px 5px 20px rgba(0,0,0,0.3) inset;
  • 影を内側に作成（オブジェクトが凹んで見える）
box-shadow:10px 20px 5px rgba(0,0,0,0.3) inset, 5px 5px 5px red;
  • 「,」で区切ることで、複数の指定をすることができる。

テキストに影をつける

text-shadow:5px 5px 3px red;
  • 右に5px下に5pxの場所にぼかし3pxで赤色の影を作成
text-shadow:1px 1px 0 white,2px 2px 0 black;
  • 「,」で区切ることによって複数の指定ができる。

線形グラデーション

  • linear-gtadientを使用する
background:-webkit-linear-gradient(red,blue);
  • デフォルトだと上からグラデーションがかかる
background:-webkit-linear-gradient(red,yellow,blue);
  • 中間色を指定することができる。
background:-webkit-linear-gradient(red 10%,yellow 90%,blue);
  • 色の割合を指定する。
background:-webkit-linear-gradient(bottom,red,blue);
  • グラデーションが青から開始される。
background:-webkit-linear-gradient(right,red,blue);
  • グラデーションが右から開始される。
background:-webkit-linear-gradient(right top,red,blue);

*グラデーションが右上から開始される。

background:-webkit-linear-gradient(45deg,red,blue);
  • グラデーションを開始する角度を指定する。(45度)

円形グラデーション

background:-webkit-radial-gradient(red,blue);
  • 赤から青に円形グラデーションがかかる。起点は中心がデフォルトになっている。
background:-webkit-radial-gradient(red10%,yellow90%,blue);
  • 中間色と色の割合を指定
background:-webkit-radial-gradient(top right,red,blue);
  • グラデーションの起点を右上からにする
background:-webkit-radial-gradient(10px 10px,red,blue);
  • 水平方向に10px垂直方向に10pxの場所を起点とする。
background:-webkit-radial-gradient(10px 10px,circle contain,red,blue);
  • グラデーションの形状とサイズを指定する。
    　- contain 縦横比を保ちながら要素内に収まるようにピッタリとリサイズされる。 　- cover 縦横比を保ちながら要素を覆うようにピッタリとリサイズされる。

要素の変形

#test2 {
    -webkit-transform:scale(1.2,1.5);
       }
  • transform 変形の命令
  • scale 拡大縮小（横に1.2倍　縦に1.5倍）
-webkit-transform-origin:top left;
  • 変形の起点を左上に変更
  • pxでの指定も可能
-webkit-transform:scaleX(1.2);
  • scaleはX方向、Y方向、Z方向に一つづつ指定することもできる。XYZすべてを指定する場合は「3d」を使用する。
-webkit-transform-origin:0 0;
-webkit-transform:translate(20px,100px);

*　移動　横方向に20px 縦方向に100px移動する。

-webkit-transform-origin:0 0;
-webkit-transform:rotate(45deg);
  • 回転　左上を中心に45度回転する。
-webkit-transform-origin:0 0;
-webkit-transform:skewX(45deg);
  • 傾斜　X方向に45度傾ける。
-webkit-transform-origin:0 0;
-webkit-transform:skewY(45deg);
  • 傾斜　Y方向に45度傾ける。
-webkit-transform-origin:0 0;
-webkit-transform:skew(45deg,20deg);
  • 傾斜　XY方向を両方指定する場合

アニメーション

div {
    weight: 100px;
    height: 100px;
    padding: 10px;
    margin: 30px;
    background-color:orange;
    barder:2px solid orangered;
}
div:hover {
    height: 200px;
    background-color:red;
}

<body>
   <div id="test1">test1</div>
</body>
  • div要素をマウスオーバーすると、高さ200px、背景色が赤に変わる
-webkit-transition-property:all;
  • アニメーションの対象になるものを指定。「height」高さ「width」幅など。
-webkit-transition-duration:1s;
  • アニメーションにかかる時間
-webkit-transition-timing-function:ease;
  • アニメーションの開始と終了を滑らかにする。
  • 「linear」一定の速度でアニメーションするもの
  • 「ease-in」開始がゆっくり
  • 「ease-out」終了がゆっくり
  • 「ease-in-out」開始と終了がゆっくり
-webkit-transition-delay:2s;
  • 何秒後に開始するか
-webkit-transition-: all 1s ease 2s;
  • 上記の設定を一括で設定することができる。時間に関する設定が2つ以上ある場合は最初が「delay」となる。

キーフレームでアニメーション

  • アニメーションの途中途中でどういう変化をさせたいのかを複数指定できる
/*
animation-name: キーフレームの名前
animation-duration:　アニメーションにかかる秒数
animation-timing-function:　アニメーションのタイミング進行割合
animation-delay:　何秒後に開始するか
animation-iteration-count:　アニメーション繰り返し回数の指定
animation-direction:　アニメーションを交互に反転再生させるかどうか指定
*/
-webkit-animation: animationTest 5s ease 1s infinite normal;
  • normalの代わりにalternate
  • alternate　変化が逆に戻っていく
@-webkit-keyframes animationTest {
  0% {width: 50px; background: orange; }
 50% {width: 100px; background: blue; }
100% {width: 150px; background: yellow; }
}
  • アニメーションの変化点を設定する。アニメーションの％ごとにどういう変化をするのかを設定。

属性セレクタを使用

  • a要素だけではなく、ある特定のものについてスタイルを付けたいときに使用。
<style>
    a[href="http://dotinstall.com"] {
       color: yellow;
    }
</style>
<body>
   <h1>リンク集</h1>
   <ul>
   <li><a href="http://dotinstall.com">dotinstall.com</a></li>
   <li><a href="http://google.com">Google</a></li>
   <li><a href="http://yahoo.com">Yahoo!</a></li>
   <li><a href="mailto:taguchi@dotinstall.com">mail me!</a></li>
   </ul>
</body>

a[href^="http"]{
    color:yellow;
}
  • 部分一致をさせる場合
  • 「^=」は先頭が一致するもの(http)に対して文字色を変化させる
a[href$="jp"]{
    color:yellow;
}
  • 「$=」は後方が一致するもの(jp)に対して文字色を変化させる
a[href*="dotinstall"]{
    color: yellow;
}
  • 「*=」は〜が含まれているもの(dotinstall)に対して文字色を変化させる

n番目に来る要素を指定する

<style>
    div p:nth-child(2){
        color:red;
    }
</style>
  • div要素の子要素の内、2番目にくるものが「p」だった場合、文字色を赤にする
<style>
    div *:nth-child(2){
        color:red;
    }
</style>
  • 「*」を使用すると、要素にかかわらず2番目にくるものの文字色を赤にする。
<style>
    div *:nth-child(odd){
        color:red;
    }
</style>
  • 奇数行に対して文字色を赤にする。
<style>
    div *:nth-child(even){
        color:red;
    }
</style>
  • 偶数行に対して文字色を赤にする。
<style>
    div *:nth-child(3n){
        color:red;
    }
</style>
  • 3の倍数の行に対して文字色を赤にする。
<style>
    div *:first-child{
        color:red;
    }
</style>
  • いくつ要素があるかわからないけど、１番目に対して文字色を赤にする。
<style>
    div *:last-child{
        color:red;
    }
</style>
  • いくつ要素があるかわからないけど、最後のものに対して文字色を赤にする。
<style>
    div *:only-child{
        color:red;
    }
</style>
  • div要素に対して要素が１つだけの場合に文字色を赤にする。

ある要素のうち、ｎ番目に来る要素を指定する方法

<style>
    div p:nth-of-type(2){
        color:red;
    }
</style>
  • div要素の中の子要素「p」の２番目に対して文字色を赤にする。
<style>
    div p:first-of-type{
        color:red;
    }
</style>
  • 最初に出てきた「p」要素に対して文字色を赤にする。
<style>
    div p:last-of-type{
        color:red;
    }
</style>
  • 最後に出てきた「p」要素に対して文字色を赤にする。
<style>
    div p:only-of-type{
        color:red;
    }
</style>
  • 「p」要素が１つしかない場合、文字色を赤にする。

要素の状態で指定するセレクタ

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>CSS3の勉強</title>
   <style>
       input[type="text"]:enabled {
           border:1px solid red;
       }
       input[type="radio"]:checked + label {
           font-weight:bold
       }
   </style>
</head>
<body>
<div>
    <h1>大見出し</h1>
    <p>UserName: <input type="text" name="user_name" value="taguchi" disabled></p>
    <p>Email: <input type="text" name="email"></p>
    <p>
    <input type="radio" name="optl" value="1"> <label>iPhone</label>
    <input type="radio" name="optl" value="2"><label>Android</label>
    </p>
</div>
</body>
</html>

input[type="text"]:disabled {
     font-weight:bold;
}
  • フィールドが無効化されているものに対してスタイルをあてていく。(太字にする)
input[type="text"]:enabled {
           border:1px solid red;
       }
  • フィールドが無効化されいてないものに対してスタイルをあてていく。
input[type="radio"]:checked + label {
           font-weight:bold
       }
  • ラジオボタンの横にあるlabel要素に対してスタイルをあてていく。(チェックされるとlabelが太字になる。)

CSS3のジェネレータについて

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5