HTML / CSS

ページ遷移の時にフェードインしながらコンテンツが表示されるアニメーションの実装です。遷移時に演出をつけたい、でも大げさなものは要らないという時にピッタリの表現です。 See the Pen Untitled by MxGRAIN (@mxgrain) on CodePen. ※右下の『Rerun』をクリックすると遷移アニメーションを確認できます。 animationアニメーションの設定は、3秒3s…

円グラフをCSSで実装する方法です。画像より優れているのは後ほど編集する際CSSの値を偏光するだけと手間が省ける点です。運用の手間を考慮するならCSSでの円グラフをおすすめします。 中心から放射状にグラデーションするconic-gradientを利用して円グラフを表現していきます。 円グラフ内の割合は％で指定。例では、円グラフの起点0%から60％を赤#d5525f 0% 60%、60％から100％…

画像を横にスライドさせて一箇所で複数の画像を見せることができるカルーセルスライダー。複雑な機能を実装するにはjQueryが必要ですがシンプルなものであればCSSだけで実装することができます。 カルーセルの実際の動きを確認 デモを用意したのでご確認ください。 See the Pen CSS Carousel Slider by MxGRAIN (@mxgrain) on CodePen. コンテンツ…