プラカンブログSTAFF BLOG

2017.02.09

いい加減使いたい!CSS3プロパティまとめ

こんにちは、デザイナーのSUGIYAMAです。

CSS3が登場してだいぶ経ちますが、出た当初は対応していないブラウザの影響でどうしてもフルに活用しずらい印象でしたが、そろそろ使いやすい環境が整ってきたかと思います。
今回は比較的頻度の高いと思われるプロパティをご紹介します。

テキスト系プロパティ
ボックス要素系プロパティ
transform系プロパティ

text shadow

text-shadow: 3px 3px 3px #000;

text-shadow: 0 3px 3px #000;

text-shadow: 3px 0 3px #000;

text-shadow: 0 0 3px #000;

.type01 {
    text-shadow: 3px 3px 3px #000;
  }

.type02 {
    text-shadow: 0 3px 3px #000;
  }

.type03 {
    text-shadow: 3px 0 3px #000;
  }

.type04 {
    text-shadow: 0 0 3px #000;
  }

テキストに影をつけてくれるプロパティです。 ボックス要素に影をつける場合は「 box-shadow 」プロパティを使用します。 

none 影をつけない(初期値) h-offset, v-offset, blur, color, inset スペース区切りで「水平方向の距離」「垂直方向の距離」「影のぼかし半径」「影の色」を指定します。

※カンマ「, 」区切りで複数指定ができます。

text stroke

text stroke

.font {
    -webkit-text-stroke-color: #88BF94;
    -webkit-text-stroke-width: 1px;
    color: #fff;
}

文字の輪郭線を指定することが出来ます。 webkitのプレフィックスつきで利用します。
※現在はwebkit系のブラウザしか対応されていません。 

-webkit-text-stroke-colo 色を指定 -webkit-text-stroke-width: 縁取りの幅を指定します。

※代用方法として「text shadow」を使用することで、縁取りを表現する事も可能です。

@font-face

Halo world (font:Bungee)

Halo world (font:Pacifico)

Halo world (font:Monoton)

〇html

<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Bungee|Monoton|Pacifico" rel="stylesheet">

〇CSS

.type01 {
  font-family: 'Bungee',   cursive;
}

.type02 {
  font-family: 'Pacifico',   cursive;
}

.type03 {
  font-family: 'Monoton',   cursive;
}

@font-faceはCSSでフォントを指定することができる規則です。 ユーザーのフォント環境に依存せず、意図通りのフォントでサイトを表示する際に使用します。

font-family フォントファミリー名を指定 src フォントのURLとフォントの形式を指定オプション 「font-style」「font-weight」「font-stretch」「font-variant」「font-feature-settings」「unicode-range」があります。

※ローカル環境から指定も可能ですが、「Googlefont」等のwebサービスも 多数あります。


box shadow

box-shadow: 3px 3px 3px #000;
.box {
  -moz-box-shadow: 3px 3px 3px #000;
  -webkit-box-shadow: 3px 3px 3px #000;
  box-shadow: 3px 3px 3px #000;
}

ボックス要素に影をつけてくれるプロパティです。 

none 影をつけない(初期値) h-offset, v-offset, blur, color, inset スペース区切りで「水平方向の距離」「垂直方向の距離」「影のぼかし半径」「影の色」「inset(内側)」を指定します。

※カンマ「, 」区切りで複数指定ができます。

opacity

opacity (0.3)
opacity (0.6)
opacity (0.9)
#blog_content #box05 .type01 {
  opacity: 0.3;
}

#blog_content #box05 .type02 {
  opacity: 0.6;
}

#blog_content #box05 .type03 {
  opacity: 0.9;
}

要素の透明度を指定するプロパティです。

透明度の値 0.0(完全に透明)~1.0(完全に不透明)の範囲で指定します。(初期値は1)

※透明効果をオブジェクト全体ではなく、背景色やボーダー色に個別に適用したい場合には、rgba()で指定することができます。

border radius

左上:8px, 右上:16px, 右下:32px, 左下:0px
.box {
  -webkit-border-radius: 8px 16px 32px 0;
  border-radius: 8px 16px 32px 0;
}

要素の各コーナーを角丸を指定するプロパティです。

border-top-left-radius 「左上」のコーナーを絶対的な長さかパーセンテージ値で指定します。
border-top-right-radius 「右上」のコーナーを絶対的な長さかパーセンテージ値で指定します。
border-bottom-right-radius 「右下」のコーナーを絶対的な長さかパーセンテージ値で指定します。
border-bottom-left-radius 「左下」のコーナーを絶対的な長さかパーセンテージ値で指定します。

※まとめて記述することも可能です。 その場合は左から順に 左上 右上 右下 左下 となります。

box sizing

box-sizing: content-box; を指定
width:300px、height:150px、padding:20px、border:10px

box-sizing: border-box; を指定
width:300px、height:150px、padding:20px、border:10px

.box {
  width: 300px;
  height: 150px;
  padding: 20px;
  border: 10px solid #006822;
}

.content-box {
  box-sizing: content-box;
}

.border-box {
  box-sizing: border-box;
}

ボックスサイズ(width, height) の算出方法を指定する際に使用するプロパティです。

値にcontent-boxを指定すると、 widthとheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはpaddingとborderは含まれません。
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。 内容領域にpaddingとborderを含んだ範囲に対して幅と高さが適用されるため、 paddingとborderの分だけボックスサイズが小さくなります。

 


 

transform

transformプロパティは、要素に2D変形、または、3D変形を適用する際に使用します。 transformプロパティの値に、用意されているtransform関数を指定することで、 要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用することができます。

rotate

rotate(25deg)
rotate(-25deg)

.type01 {
  transform: rotate(25deg);
}

.type02 {
  transform: rotate(-25deg);
}

rotate 要素を回転表示するプロパティです。

rotate(deg) 指定した角度(deg)で2D回転を指定します。
rotateX(deg) X軸を軸とする角度(deg)によって時計回りの回転を指定します。
rotateY(deg) Y軸を軸とする角度度(deg)によって時計回りの回転を指定します。
rotateZ(deg) Z軸を軸とする角度(deg)によって時計回りの回転を指定します。
rotate3d(num, num, num, deg) 最初の3つの数値で[x, y, z]ベクトル(数値)の指定し、最後に角度(deg)によって時計回りの回転を指定します。

scale

scale(1.5)

scale(0.5)

scale(0.5, 1.5)

.type01 {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.type02 {
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.type03 {
  -webkit-transform: scale(0.5,   1.5);
  transform: scale(0.5,   1.5);
}

scale 要素を拡大、または、縮小表示するプロパティです。

scale(num, num) 2つの数値で2D縮尺比率を指定します。 1つ目の数値はX方向、2つ目の数値はY方向の比率です。 2つ目の数値は省略することができますが、この場合には最初の値と同じになります。
scaleX(num) X方向の縮尺比率を指定します。Y方向とZ方向の比率は1となります。
scaleY(num) Y方向の縮尺比率を指定します。X方向とZ方向の比率は1となります。
scaleZ(num) Z方向の縮尺比率を指定します。X方向とY方向の比率は1となります。
scale3d(num, num, num) 3つの数値で3D縮尺比率を指定します。 1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率です。

skew

skewX(20deg)

skewY(20deg)

skew(-20deg, -20deg)

.type01 {
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}

.type02 {
  -webkit-transform: skewY(20deg);
  transform: skewY(20deg);
}

.type03 {
  -webkit-transform: skew(-20deg,   -20deg);
  transform: skew(-20deg,   -20deg);
}

skew 要素を傾斜変形させるプロパティです。

skewX(deg) 角度(deg)によってX軸に沿った傾斜変形を指定します。
skewY(deg) 角度(deg)によってY軸に沿った傾斜変形を指定します。
skew(deg, deg) 2つの角度(deg)によってX軸とY軸に沿った傾斜変形を指定します。 最初の角度はX軸の傾斜、2番目の角度はY軸の傾斜です。 2番目の角度は省略することができますが、この場合には0となりY軸は傾斜しません。

translate

translate(50px, 20px)

translateX(50px)

translate3d(50px, 20px, 10px)

.type01 {
  -webkit-transform: translate(50px,   20px);
  transform: translate(50px,   20px);
}

.type02 {
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
}

.type03 {
  -webkit-transform: translate3d(50px,   20px,   10px);
  transform: translate3d(50px,   20px,   10px);
}

translate 要素の表示位置を移動させるプロパティです。

translate(tx, ty) X方向とY方向の距離で2D移動を指定します。 Y方向の距離は省略することができますが、この場合のY方向の距離は0となります。
translateX(tx) X方向の距離で移動を指定します。 translateY(ty) Y方向の距離で移動を指定します。 translateZ(tz) Z方向の距離で移動を指定します。
translateZ()関数にはパーセンテージ値を指定することができないので注意してください。 もし、パーセンテージで値を指定しても0と同じになります。
translate3d(tx, ty, tz) X方向とY方向とZ方向の距離で3D移動を指定します。 Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。
※使用する値は各種長さの単位、パーセンテージのいずれかです。

perspective

perspective
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

.box {
  -webkit-transform: translate(-50%,   -50%) perspective(1200px) rotateX(60deg);
  transform: translate(-50%,   -50%) perspective(1200px) rotateX(60deg);
}

奥行きの深さを指定するプロパティです。
他のtransformの値と組み合わせると、より豊かな表現ができるようになります。

perspective(num) 奥行きの深さを数値で指定します。
※単体のperspectiveプロパティもあり、基本的には同じ変形効果となりますが、perspectiveプロパティを指定した要素自身ではなく、 その子要素で位置や変形を指定されたものにだけ適用される点が異なります。

まだまだあるぞ!CSS3

今回はCSS3でも比較的よく使いそうなプロパティをまとめましたが、他にもたくさんのプロパティが存在します。今まで画像等で対応していたことがCSSだけで表現できるようになり、コーディングもやりやすくなったと思います。 ただし、いまだにIE9、IE8が…なんていう場合もあるので、使用する前に対象ブラウザは確認しておきましょう。

この記事は、SUGIYAMA が書きました。