Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@akiinu(Aki Inu)

CSS3入門

Last updated at Posted at 2014-04-15

参考：http://dotinstall.com/lessons/basic_css3

CSS3とは

多彩な表現ができる（影をつけたり角丸をつけたりアニメーションをつけたり）
W3C.orgが策定中→各ブラウザによって実装がまちまち

##ベンダープレフィックスとは何か？

例

border-radius: 5px;
-webkit-border-radius: 5px;
先行的に実装している実験的な機能だと示すもの

種類

  • -webkit- : chrome / safari
  • -moz- : firefox
  • -o- : opera
  • -ms- : ie

対応状況

  • caniuse.com
    　ex) border-radiusで検索すると…

#実際の装飾

##角丸をつける

半径10pxの角丸
border-radius: 10px;

時計周りに
border-radius: 10px 20px 30px 40px;

  • 3つ→左上、右上と左下、右下
  • 2つ→左上と右下、右上と左下

右上だけ
border-top-right-radius: 30px;

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS3の勉強</title>
    <style>
       div {
         width: 100px;
         height: 100px;
         padding: 10px;
         margin: 30px;
         background-color: orange;
         border: 2px solid orangered;
         border-radius: 10px;
       }
     </style>
</head>
<body>
   <div id="test1">test1</div>
   <div id="test2">test2</div>
</body>
</html>

##角丸を使ったテクニック

正円をつくる
border-radius: 50%;

絵を切り抜く
background-image:url('baby.jpg');

色の指定と透明化

色
CSS3ではrgbaが使える（aは透明度）
background-color: rgba(0,0,0,0.7);

要素の透明化（背景を透けさせることができる）
opacity: 0.3;

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

box-shadow: 10px 20px 5px 6px rgba(0,0,0,0.3} inset, 　　　　　　　5px 5px 5px red;

  • 3つ目：ぼかし
  • 4つ目：影の大きさ
  • inset→内側
  • ,で続けて複数指定可能

テキストに影をつける

右下に影
text-shadow: 5px 5px 3px red, 10px 10px 3px blue;

立体的に見せる
text-shadow: 1px 1px 0 white, 2px 2px 0 black;

左上に影
text-shadow: -2px -2px 0 black;

線形グラデーション

background: -webkit-linear-gradient(red 10%,yellow 90%,blue);
※IEでは実装されておらず、その他でもベンダープレフィックスが必要

background: -webkit-linear-gradient(right top,red,blue);
※right top→角度でも可能（45deg）

円形グラデーション

3色で
background: -webkit-radial-gradient(red 10%, yellow 90%, blue);

右上から
background:-webkit-radial-gradient(top right, red, blue);

左上からの距離で（右、下）
background:-webkit-radial-gradient(10px 10px, red, blue);

グラデーションの形状とサイズを指定
background: -webkit-radial-gradient(10px 10px, circle, red, blue);

  • circle：楕円形を円に変える
  • contain：円を含ませる
  • cover：いっぱいに広げる
  • ellipse：楕円形にする

要素を変形させる

横に1.2倍、縦に1.5倍
#test2 { -webkit-transform:scale(1.2, 1.5);

変形の起点
-webkit-transform-origin:top left;
-webkit-transform-origin:10px 10px;

一方向にだけ拡大（X,Y,Z(立体空間),3d）
-webkit-transform:scaleX(1.2);

要素を変形させる

移動させる
-webkit-transform:translateX(10px);
-webkit-transform:translate(10px 10px);

回転させる
-webkit-transform:rotate(45deg);

傾ける
-webkit-transform:skewY(45deg);
-webkit-transform:skew(45deg, 20deg);

アニメーションをつける

div:hover { height: 200px; background-color:red; }

div { -webkit-transition-property:all; -webkit-transition-duration:1s; -webkit-transition-timing-function:ease; -webkit-transition-delay:2s; }

  • property：対象（height.width）
  • duration:かかる時間
  • timing-function：
    ease（開始と終了がなめらか）
    linear（一定の時間で）
    ease-in（開始がゆっくり）
    ease-out（終了がゆっくり）
    ease-in-out：（開始と終了がゆっくり）
  • delay：遅れて開始

一気に指定可能
-webkit-transition: all 1s ease 2s;

キーフレームでアニメーションをつける

アニメーションの設定
div { -webkit-animation: animationTest 5s ease 1s infinite normal; }

右から順番に

  • animation-name:
  • animation-duration:
  • animation-timing-function:
  • animation-delay:
  • animation-iteration-count:
  • animation-direction: normal, alternate（逆に戻る）

キーフレームの設定
@-webkit-keyframes animationTest { 0% { width: 50px; background: orange; } 50% { width: 100px; background: blue; } 100% { width: 150px; background: purple; }

属性セレクタを使う

ある特定のものだけにスタイルをつけたいというとき

a[href="http://dotinstall.com"] { color: yellow; }

部分一致（先頭）
a[href^="http"] { color: yellow; }

部分一致（後方）
a[href$=".jp"] { color: yellow; }

～が含まれているもの
a[href*="dotinstall"] { color: yellow; }

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

子要素のうち、n番目にくる要素にスタイルをあてる方法

html
<div>
   <h1>大見出し</h1>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <h2>中見出し</h2>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <h2>中見出し</h2>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
</div>

2番目にくるp要素を赤に
div p:nth-child(2) { color: red; }
※5にするとh2なので無効

5番目にくる要素を赤に
div *:nth-child(5) { color: red; }

奇数番目の要素を赤に
div *:nth-child(odd) { color: red; }

  • 偶数(even)

  • 3の倍数(3n)

  • 3n+1

  • first-child

  • last-child

  • only-child (子要素が一つだけの場合に適用）　

##ある要素のうち、n番目に来る要素を指定する

div p:nth-of-type(2) { color: red; }

一番初めのp
div p:first-of-type { color: red; }

  • last-of-type
  • only-of-type

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

※フォームなどで使える

html
<div>
<h1>大見出し</h1>
<p>Username: <input type="text" name="user_name" value="taguchi" disabled></p>
<p>E-mail:<input type="text" name="email"></p>
<p><input type="radio" name="opt1" value="1"> <label>iPhone</label>
<input type="radio" name="opt1" value="2"> <label>Android</label>
</p>
</div>

書き込めなくしてあるもの
input[type="text"]:disabled { font-weight: bold; }

書き込めるもの
input[type="text"]:enable { border: 1px solid red; }

ラジオボタンの横の文字をスタイリングする
input[type="radio"]:checked + label { font-weight: bold; }　　　

##CSS3のジェネレータ

サイトを使ってCSS3が書ける

16
19
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
16
19

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?