回答WAVE立川校卒業生へブログお問い合わせカレンダー2013-5-17勉強会コメントをどうぞ勉強会の概要はcssだけで三角を描く方法cssアニメーションでパラパラアニメを作る方法についてposition:absoluteのおさらいWebデザインのセオリーを学ぼうcssだけで三角を描く方法もっとも初期に考えられた、cssだけで三角を描く方法はborderを使ったもの。これはcss3より前からある。borderで検索すると容易に見つかるはず。いくつかのアイデアを書いておこう。どのパターンでも、before(afterでも良い)疑似要素で描画している。疑似要素とは、実際にhtmlには書かれていないのに要素のような振る舞いをするので、マークアップを汚さずに装飾できる利点があるからだ。content">「▲」という文字をcontentする</div>共通のcssはこれ。いう仕組みを思い出して欲しい。flashでは複雑なアニメーションを複数の単純なアニメーションのmcに分解し、それらをパーツとして組み合わせることができて、そこが便利だった。cssのアニメーションでも、同じように「単純なアニメ」を組み合わせることで、多様なアニメーションが作れる。keyframesは使い回そう@keyframesの記述は長くなりがちで、ベンダープレフィックスをつけると更に数倍の記述になる。制作者としては、出来るだけ使い回したい。同じ@keyframesでも、要素に指定するanimetionプロパティを工夫するだけで済む場合も多いので、@keyframesを追加する際には、どんどん利用したい。どんなプロパティが使えるかはここを参照して欲しい。サンプルとしてアナログ時計を作ってみた。時計の針のアニメーションアニメの指定に関係する所だけ抜き出すと以下の通り。hand"></div></div>cssのanimation部分は以下の通り(ベンダープレフィックスは省略)。}}positionプロパティのおさらいposition:relativeかabsoluteかfixedを指定するとleft,right,top,bottom,z-indexの位置指定プロパティが有効になる。それぞれで基準になるボックスが変わる。基準になるボックスabsolute基準になるボックスは「祖先の要素をたどって、position:relativeかabsoluteかfixedの要素」があれば、その要素。するはずだった位置に、ボックスの面積が確保されない。relative基準になるボックスは「その要素自身」が元々、出現するはずだった位置。出現するはずだった位置に、ボックスの面積が確保される。するはずだった位置に、ボックスの面積が確保されない。それぞれの基準になるボックスとleft,right,top,bottom,z-indexの関係は以下の通り。left基準ボックスの左端と、要素自体の左端の距離right基準ボックスの右端と、要素自体の右端の距離top基準ボックスの上端と、要素自体の上端の距離right基準ボックスの下端と、要素自体の下端の距離leftとrightの両方に距離が指定されている場合は、leftが優先になり、これはcssの指定の優先度ではコントロールできない。leftをrightで上書きしたい時は、left:autoを指定する必要がある。topとbottomでも同様で、topが優先される。Webデザインのセオリーを学ぼうこちらのスライドを見て勉強しました。ついて顧問と講師をやってます。designerでマークアップ原理主義者の傾向があります。好きな要素は::before、::afterの疑似要素。好きなcssはanimationです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。DESIGNERの集まりです。ヘッダー画像をトップページにだけ表示させたい。