CSS3でドラえもん
今日はJavaScriptじゃなくてCSSなんですが…。
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
出てきたプロパティを以下に全部列挙してみます。登場順なのでカテゴリ的にはバラバラです。ちなみに今回はこちらのサイトを参照させて頂きました。
- background
- 背景に関する指定をまとめて行う際に使用する
- position
- ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する際に使用。
- static(指定なし。default値)
- relative(相対位置への配置)
- absolute(絶対位置への配置)
- fixed(絶対位置への配置だが、スクロールしても同じ位置に配置される)
- margin
- 上下左右のマージンをまとめて指定する。
- width
- 横幅を指定。
- height
- 縦幅を指定。
- transform
- 要素に2D変形、または、3D変形を適用する際に使用。「-webkit」「-moz」「-o」「-ms」はそれぞれブラウザ別の指定。
- none
- 要素に変形を適用しない。default値。
- transform関数
- 素に適用する変形をtransform関数で指定。
- rotate()
- 引数に与えた値に応じて2D回転する
- box-shadow
- ボックスに1つまたは複数の影をつける
- border-radius
- ボックスの４つのコーナーの角丸をまとめて指定する。それぞれの角丸コーナーは４分の１楕円になる。楕円の形状は水平方向と垂直方向の２つの半径の組み合わせで決定される。
- top
- ボックスを配置する場合の、上からの配置位置(距離)を指定する。
- left
- ボックスを配置する場合の、左からの配置位置(距離)を指定する。
- opacity
- 要素の透明度を0.0〜1.0で指定する
- linear-gradient()
- 線形グラデーションを指定。
- 第一引数：開始位置
- 第二引数：角度
- 第三引数：開始色
- 第四引数：途中色
- 第五引数：終了色
- border
- ボーダーのスタイル・太さ・色をまとめて指定する際に使用。
- ボーダースタイル
- none
- ボーダーは表示されず、太さも0になる。default値。
- hidden
- ボーダーは表示されず、太さも0になる。
- solid
- 1本線で表示。
- double
- 2本線で表示。
- groove
- 立体的に窪んだ線で表示。
- ridge
- 立体的に隆起した線で表示。
- inset
- 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示。上下左右の一部だけに指定しても立体感は出ない。
- outset
- 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示。上下左右の一部だけに指定しても立体感は出ない。
- dashed
- 破線で表示。
- dotted
- 点線で表示。
- ボーダー太さ
- 数値(px, dpi, em)
- キーワード(thin(細い), medium(普通), thick(太い))
- ボーダー色
- 色(#000000 - #FFFFFF)
- transparent(透明)
- z-index
- ボックスの重なりの順序を指定。
- @-webkit-keyframes
- アニメーションキーフレームの定義
- clip
- ボックスを切り抜き表示(クリッピング)する
- 値
- auto(切り抜きを行わない。default値。)
- rect()(ボックスの左上端を起点に切り抜きを行う。引数は上,右,下,左。)
- border-top-left-radius
- ボックスの左上の角丸を指定。
- border-bottom-left-radius
- ボックスの左下の角丸を指定。
- border-top-right-radius
- ボックスの右上の角丸を指定。
- border-bottom-right-radius
- ボックスの右下の角丸を指定。
- padding
- 上下左右のパディング(領域内の端からのスペース)をまとめて指定
- border-bottom
- 下ボーダーのスタイル・太さ・色を指定。
- color
- 文字色を指定
CSSだけで700行もあるんで、結構な種類のプロパティ使ってるかなぁと思いきやそれほどでもありませんでした。オレは正直CSSを今までちゃんと勉強したことがなかったんですけど、こういう風に自力で書き出すと結構覚えますね。実際にカリキュラムに加えても面白そう。
CSSで絵を描くこと自体は仕事ではなんも役に立たないけど、これを2〜3回写経して別の絵柄で自力で書ければ結構CSSについて覚えられるんじゃないかなぁとか思ってます。ただ、実際に業務で使用するようなWeb画面の作り方とかはちゃんとやんなくちゃダメでしょうね。
ドラえもんの他、まどマギのキュウべえをCSSで書いたのもあります。そっちはそのうち写経してみたいですね。みんな無茶するなぁと思ってたらもっとすごいのがありました。ただでさえ複雑な曲線なのに、その上アニメーションまでするんですよ。無茶苦茶だ！！ソースコード覗いてみたらとんでもないことになってました。これを書き切る根気は凄いなぁ。愛だな、愛。
