勉強会の概要は
- cssだけで三角を描く方法
- cssアニメーションでパラパラアニメを作る方法について
- position:absoluteのおさらい
- Webデザインのセオリーを学ぼう
cssだけで三角を描く方法
もっとも初期に考えられた、cssだけで三角を描く方法はborderを使ったもの。これはcss3より前からある。
css 三角 borderで検索すると容易に見つかるはず。いくつかのアイデアを書いておこう。どのパターンでも、before（afterでも良い）疑似要素で描画している。疑似要素とは、実際にhtmlには書かれていないのに要素のような振る舞いをするので、マークアップを汚さずに装飾できる利点があるからだ。
マークアップはこう。
|
1 2 3 4 |
<div class="sankaku border">borderを使う</div> <div class="sankaku transform">css3のtransformを使う</div> <div class="sankaku gradient">css3のlinear-gradientを使う</div> <div class="sankaku content">「▲」という文字をcontentする</div> |
共通のcssはこれ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.sankaku { position:relative; background:#eee; line-height:1.5; margin:2em; text-indent:1em; z-index:1; } .sankaku:before { content:""; width:0; height:0; display:block; position:absolute; top:0; left:-2em; } |
|
1 2 3 4 5 |
.sankaku.border:before { border:1em solid red; border-width:0.7em 1.0em; border-color:transparent red transparent transparent; } |
|
1 2 3 4 5 6 7 |
.sankaku.transform:before { background: none repeat scroll 0 0 orange; height: 1em; width: 1em; z-index: -1; transform: rotateZ(45deg) translate(1.3em, -0.9em); } |
|
1 2 3 4 5 6 |
.sankaku.gradient:before { width:1em; height:1em; left:-1em; background-image:linear-gradient(45deg,transparent 50%,blue 50%); } |
|
1 2 3 4 |
.sankaku.content:before { content:"▲"; color:green; } |
cssアニメーションでパラパラアニメを作る方法について
複雑なアニメは単純なアニメに分解したものを組み合わせよう
flashを勉強した人はmovie clip = mc という仕組みを思い出して欲しい。
flashでは複雑なアニメーションを複数の単純なアニメーションのmcに分解し、それらをパーツとして組み合わせることができて、そこが便利だった。cssのアニメーションでも、同じように「単純なアニメ」を組み合わせることで、多様なアニメーションが作れる。
keyframesは使い回そう
@keyframesの記述は長くなりがちで、ベンダープレフィックスをつけると更に数倍の記述になる。制作者としては、出来るだけ使い回したい。
同じ@keyframesでも、要素に指定するanimetionプロパティを工夫するだけで済む場合も多いので、@keyframesを追加する際には、どんどん利用したい。どんなプロパティが使えるかはここを参照して欲しい。
サンプルとしてアナログ時計を作ってみた。
時計の針のアニメーション
アニメの指定に関係する所だけ抜き出すと以下の通り。
|
1 2 3 4 5 |
<div class="clock"> <div class="second hand"></div> <div class="long hand"></div> <div class="short hand"></div> </div> |
cssのanimation部分は以下の通り（ベンダープレフィックスは省略）。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.clock .hand { /*秒針は 60秒 で1アニメ*/ /*動きは不連続（steps）で60分割*/ animation:tickTack 60s steps(60,end) infinite; } .clock .long { /*分針は 3600s＝60分 で1アニメ*/ /*動きは等速度（linear）*/ animation-duration:3600s; animation-timing-function:linear; } .clock .short { /*分針は 3600s＝60分 で1アニメ*/ /*動きは等速度（linear）*/ animation-duration:43200s; animation-timing-function:linear; } @keyframes tickTack { /*1アニメにつき1回転*/ 100% { transform:rotateZ(1turn); } } |
positionプロパティのおさらい
position:relativeかabsoluteかfixedを指定するとleft,right,top,bottom,z-indexの位置指定プロパティが有効になる。それぞれで基準になるボックスが変わる。
基準になるボックス
- absolute
- 基準になるボックスは「祖先の要素をたどって、position:relativeかabsoluteかfixedの要素」があれば、その要素。なければブラウザの表示領域。
- 元々、出現するはずだった位置に、ボックスの面積が確保されない。
- relative
- 基準になるボックスは「その要素自身」が元々、出現するはずだった位置。
- 元々、出現するはずだった位置に、ボックスの面積が確保される。
- fixed
- 基準になるボックスはブラウザの表示領域。
- 元々、出現するはずだった位置に、ボックスの面積が確保されない。
そして、それぞれの基準になるボックスとleft,right,top,bottom,z-indexの関係は以下の通り。
- left
- 基準ボックスの左端と、要素自体の左端の距離
- right
- 基準ボックスの右端と、要素自体の右端の距離
- top
- 基準ボックスの上端と、要素自体の上端の距離
- right
- 基準ボックスの下端と、要素自体の下端の距離
leftとrightの両方に距離が指定されている場合は、leftが優先になり、これはcssの指定の優先度ではコントロールできない。leftをrightで上書きしたい時は、left:autoを指定する必要がある。topとbottomでも同様で、topが優先される。
Webデザインのセオリーを学ぼう
こちらのスライドを見て勉強しました。
- グリッドレイアウト
- clubringoのサイドバーが見にくいのはなぜか？
- 見出しが小さい
- チャンク＝かたまりが弱い –> line-height < margin である方が良い。
パンクズメニュー
top>ブランド>bag