clock

2013-5-17勉強会

勉強会の概要は

  • cssだけで三角を描く方法
  • cssアニメーションでパラパラアニメを作る方法について
  • position:absoluteのおさらい
  • Webデザインのセオリーを学ぼう

cssだけで三角を描く方法

もっとも初期に考えられた、cssだけで三角を描く方法はborderを使ったもの。これはcss3より前からある。
css 三角 borderで検索すると容易に見つかるはず。いくつかのアイデアを書いておこう。どのパターンでも、before(afterでも良い)疑似要素で描画している。疑似要素とは、実際にhtmlには書かれていないのに要素のような振る舞いをするので、マークアップを汚さずに装飾できる利点があるからだ。
マークアップはこう。

共通のcssはこれ。

borderを使う

css3のtransformを使う

css3のlinear-gradientを使う

「▲」という文字をcontentする

cssアニメーションでパラパラアニメを作る方法について

複雑なアニメは単純なアニメに分解したものを組み合わせよう

flashを勉強した人はmovie clip = mc という仕組みを思い出して欲しい。
flashでは複雑なアニメーションを複数の単純なアニメーションのmcに分解し、それらをパーツとして組み合わせることができて、そこが便利だった。cssのアニメーションでも、同じように「単純なアニメ」を組み合わせることで、多様なアニメーションが作れる。

keyframesは使い回そう

@keyframesの記述は長くなりがちで、ベンダープレフィックスをつけると更に数倍の記述になる。制作者としては、出来るだけ使い回したい。
同じ@keyframesでも、要素に指定するanimetionプロパティを工夫するだけで済む場合も多いので、@keyframesを追加する際には、どんどん利用したい。どんなプロパティが使えるかはここを参照して欲しい。
サンプルとしてアナログ時計を作ってみた。
clock

時計の針のアニメーション

アニメの指定に関係する所だけ抜き出すと以下の通り。

cssのanimation部分は以下の通り(ベンダープレフィックスは省略)。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA