読者です 読者をやめる 読者になる 読者になる

Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

CSS3 ジェネレータを使って楽に作る

今回は、CSS3のジェネレータについて書きます。 CSS3のジェネレータは、たくさんあります。使えそうなものをピックアップして、ここにまとめます。 (※ジェネレータって何?という人は、こちらを見てください。) ①CSS3.0 Maker http://www.css3maker.com/in…

CSS3 セレクタを使い、少しフォームを改良する

今回は、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」

今回は、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」

今回は、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 animation キーフレームアニメーション

今回は、CSS3のキーフレームアニメーションについて書きます。 キーフレームアニメーションを使うと、高度なアニメーションが作れます。 細かくアニメーションを設定できると言ったほうが、わかりやすいかな・・・CSS3のアニメーションを初めて知る方は、こ…

CSS3 属性を使った指定

今回は、CSS3の属性を使った指定について書きます。 CSS3では、セレクタに属性の指定ができるらしいので、その使い方を書いていきます。ちなみに、セレクタというのは、「{}」の前にあるやつの事です。 h1 { color:blue; } ↑このコードで言うと、「h1」がセ…

CSS3 transition アニメーション

今回は、CSS3の「transition」について書きます。 「transition」を使うと、要素に簡単なアニメーションをつけれます。transitionには、4つのプロパティがあります。 transition-property・・・アニメーションさせる対象 transition-duration・・・変化に掛…

CSS3 transform 要素を変形させる part2

今回は、CSS3の「transform」について書きます。 以前に、transformの「拡大・縮小(transform:scale)」と「移動(transform:translate)」を書きました。 今回は、「回転」,「傾斜」,「遠近効果」について書きます。「回転」などを書く前に、「transform」…

CSS3 transform 要素を変形させる part1

今回は、CSS3の「transform」について書きます。 「transform」を使うと、要素を拡大,回転,移動など色々変形させる事ができます。 まず、はじめに「拡大・縮小」から書いていきます。やり方は、 -webkit-transform:scale(2.6,2); こんな感じです。(※「webki…

CSS3 radial-gradient() 円形グラデーション

今回は、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()

今回は、CSS3の「linear-gradient()」について書きます。 linear-gradient()は、線形グラデーションを指定するときに使います。 グラデーションは、上の写真のように、徐々に色が濃くなり薄くなる感じものです。 基本的にこのように使います。 linear-gradie…

CSS3 text-shadow テキストに影をつける

今回は、CSS3の「text-shadow」について書きます。 「text-shadow」を使うと、テキストに影をつける事ができます。 基本的なところは、「box-shadow」と同じです。 「text-shadow」は、このように使います。 text-shadow:10px 10px 3px rgba(51,51,51,0.6); …

CSS3 box-shadow ボックス要素に影をつける

今回は、CSS3の「box-shadow」について書きます。 box-shadowを使うと、ボックス要素に影をつける事ができます。 基本的な使い方は、こんな感じです。 box-shadow: 20px 30px; /*box-shadow: 水平方向の長さ 垂直方向の長さ;*/ 1番目の「20px」は、水平方向…

CSS3 OpacityとRGBA 要素の透明化と色の指定方法

今回は、CSS3の「色の指定方法(RGBA)」と「要素の透明化(Opacity)」について書きます。 CSS3では、RGBAカラーモデルが使えます。 RGBAカラーモデルは、RGBカラーモデルのred ,green ,blueに、alphaが加わったものです。 alphaは色の透明度を表します。RG…

CSS3 角丸をつける

今回は、CSS3で枠線に角丸をつける方法について書きます。 角丸をつけるには「border-radius」というものを使います。このように使います。 border-radius: 20px; 「ピクセル」で指定する以外に、「%」で指定する方法もあります。 border-radius: 50%; 具体…