ボム君.com

CSS

流行りの UI プレースホルダーを HTML と CSS で作る方法

最近は facebook や instagram などを中心に多くのアプリでも見るようになってきた、読み込み時に表示される UIプレースホルダー。(スケルトンデザインとも言うよう) ページ読み込み時のユーザーの体感速度を高めるための一つとして有効な手段です。 そん…

CSS の @keyframe, animation 属性の使い方

CSS

@keyframe を使ってCSSだけで背景画像を作成しました animation と @keyframe を使用するとCSSで簡単にアニメーションが実装できます。 このサイトを作成する際に animation と @keyframe を使用したのでその使い方を紹介します。 Elastic | A collection of…

CSSだけでインタラクティブなボタンを作る

HTMLとCSSだけで作成したインタラクティブなボタンをまとめたサイトを作成しました。 HTMLとCSSのみで作れるボタン集 | CSS Buttons 個人的に使いやすいと思ったものや面白いものをまとめています。 デザインやアニメーションは全てCSSのみで実装しているも…

CSSだけで複雑な背景画像を作ってみる

CSS3で追加された線形グラデーション linear-gradient と円形グラデーション radial-gradient を使用すれば、さまざまなパターンを表現することが可能です。 これに background-size プロパティを組み合わせれば、CSSだけで背景画像を作成することができます…

webpack で react, scss のコンパイルと ESLint を設定する方法

webpackとは http://webpack.github.io webpackは依存関係のあるJSやCSSなどを、まとめてくれるビルドツールです。 webpackにはLoaderという仕組みがあり、ソースコードに適用する処理を柔軟に設定することができ、 そのLoaderを使うことで、scssやJSXなどで…