プログラミングメモ

HTMLの要素のレイアウトを指定するにはCSSのfloatプロパティを利用したりしますが、その他にFlexboxを用いてレイアウトを指定できます。FlexboxとはFlexible Box Layout Moduleの事でフレキシブルにボックスモデルを指定できるCSSの機能です。このFlexboxはHTMLの要素に適用するとその要素を並列して横方向に並べるスタイルになります。シンプルにFlexboxを適用するには、適用するHTMLの要素にCSSでdisplay:flexと指定すれば適用さ...

続きを読む

CSSでアニメーションを作成できるプロパティは前回紹介したtransitionプロパティの他にもanimationプロパティというものがあります。今回はanimationプロパティを用いたCSSのアニメーションを紹介したいと思います。animationプロパティはtransitionプロパティとは違い、ポインタを乗せたりクリックなどで動くアニメーションではなく、そのまま動くアニメーションを作りだします。animationプロパティによるアニメーションは@keyfr...

続きを読む

HTMLでアニメーションを作るにはCanvasやSVGの他にもCSSを利用する方法もあります。今回はCSSでアニメーションが実装できるtransitionプロパティについて紹介したいと思います。transitionプロパティで実装されるCSSのアニメーションは要素に何らかの変化や動作があったときにCSSのプロパティを変化させるものです。単純で短時間のアニメーションに用いられることが多いです。transitionプロパティで用いられるプロパティは以下の...

続きを読む

SVGのアニメーションについてSVGは静止画だけではなくアニメーションとして描写を動かすこともできます。SVGのアニメーションにはSMIL(Synchronized Multimedia Integration Language)を用います。SMILとはXMLによって時間による動的な描写やレイアウトなどを記述する言語です。今回はSMILのanimate要素を使ってSVGの描写を動かしたいと思います。animate要素の使い方animate要素は時間経過によってSVGを描写する属性の値を変化さ...

続きを読む

SVGはXMLで様々な描写ができます。今回は主だった描写について記したいと思います。直線直線を描写する書式は次の通りです。<line x1= y1= x2= y2=/>x1y1からx2y2までの間に直線を描写します。矩形矩形を描写する書式は次の通りです。<rect x= y= width= height=/>xyの位置からwidthの幅とheightの高さの矩形を描写します。多角形多角形を描写する書式は次の通りです。<polygon points="x1 y1, x2 y2, x3 y3,&...

続きを読む