CSS3
今回は、CSS3のジェネレータについて書きます。 CSS3のジェネレータは、たくさんあります。使えそうなものをピックアップして、ここにまとめます。 （※ジェネレータって何？という人は、こちらを見てください。） ①CSS3.0 Maker http://www.css3maker.com/in…
今回は、CSS3のセレクタを使い、少しだけフォームを改良する方法を書きます。 このような簡単なフォームを作りました↓ <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> </head> <body> <div> <h1>h1</h1> <p>名前:<input type="text" name="name" value="tanaka" disabled></p> <p>メールアドレス:<input type="text" name="email"></p> <p> </p></div></body></html>
今回は、CSS3の「nth-of-type」について書きます。 「nth-of-type」は、ある要素のうち、n番目に来る要素を指定するときに使います。 実際にやったほうがはやいので、さっそくプログラムを書きます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div p:nth-of-type(3){ color : red; } </style> </head> <body> <div> <h1>h1</h1> <p></p></div></body></html>…
今回は、CSS3 のセレクタ「nth-child」について書きます。 「nth-child」を使うと、親要素の何番目かの子要素にスタイルをあてることができます。実際にやったほうがはやいので、さっそくプログラムを書きます。 <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div p:nth-child(2){ color : red;</style></meta></head></html>…
今回は、CSS3のキーフレームアニメーションについて書きます。 キーフレームアニメーションを使うと、高度なアニメーションが作れます。 細かくアニメーションを設定できると言ったほうが、わかりやすいかな・・・CSS3のアニメーションを初めて知る方は、こ…
今回は、CSS3の属性を使った指定について書きます。 CSS3では、セレクタに属性の指定ができるらしいので、その使い方を書いていきます。ちなみに、セレクタというのは、「{}」の前にあるやつの事です。 h1 { color:blue; } ↑このコードで言うと、「h1」がセ…
今回は、CSS3の「transition」について書きます。 「transition」を使うと、要素に簡単なアニメーションをつけれます。transitionには、４つのプロパティがあります。 transition-property・・・アニメーションさせる対象 transition-duration・・・変化に掛…
今回は、CSS3の「transform」について書きます。 以前に、transformの「拡大・縮小（transform:scale）」と「移動（transform:translate）」を書きました。 今回は、「回転」,「傾斜」,「遠近効果」について書きます。「回転」などを書く前に、「transform」…
今回は、CSS3の「transform」について書きます。 「transform」を使うと、要素を拡大,回転,移動など色々変形させる事ができます。 まず、はじめに「拡大・縮小」から書いていきます。やり方は、 -webkit-transform:scale(2.6,2); こんな感じです。（※「webki…
今回は、CSS3の「radial-gradient()」について書きます。 「radial-gradient()」は、円形グラデーションを指定するときに使います。 基本的な所は、線形グラデーションの「linear-gradient()」と同じです。 基本の使い方は、こちらです。 <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { wi</meta></head></html>…
今回は、CSS3の「linear-gradient()」について書きます。 linear-gradient()は、線形グラデーションを指定するときに使います。 グラデーションは、上の写真のように、徐々に色が濃くなり薄くなる感じものです。 基本的にこのように使います。 linear-gradie…
今回は、CSS3の「text-shadow」について書きます。 「text-shadow」を使うと、テキストに影をつける事ができます。 基本的なところは、「box-shadow」と同じです。 「text-shadow」は、このように使います。 text-shadow:10px 10px 3px rgba(51,51,51,0.6); …
今回は、CSS3の「box-shadow」について書きます。 box-shadowを使うと、ボックス要素に影をつける事ができます。 基本的な使い方は、こんな感じです。 box-shadow: 20px 30px; /*box-shadow: 水平方向の長さ 垂直方向の長さ;*/ １番目の「20px」は、水平方向…
今回は、CSS3の「色の指定方法（RGBA）」と「要素の透明化（Opacity）」について書きます。 CSS3では、RGBAカラーモデルが使えます。 RGBAカラーモデルは、RGBカラーモデルのred ,green ,blueに、alphaが加わったものです。 alphaは色の透明度を表します。RG…
今回は、CSS3で枠線に角丸をつける方法について書きます。 角丸をつけるには「border-radius」というものを使います。このように使います。 border-radius: 20px; 「ピクセル」で指定する以外に、「％」で指定する方法もあります。 border-radius: 50%; 具体…
