TECH BOX

Technology developer's blog

#CSSの一覧

GridsomeでStylusとPostCSSを使う

altCSSであるStylusとPostCSSをGridsomeで使う場合の設定は最初から用意されているため比較的簡単に導入ができます

CSSでスケルトンスクリーンを表現する

カード要素の時はスピナーのような画一的なローダーより、スケルトンスクリーンにするとちょっとかっこよくなるよ

Chrome拡張「Web Maker」を使って気軽に実験する

プライベートでコードをたくさん書いて実験したい…そんなあなたに。

アスペクト比計算ツールをリリース

画像サイズから整数比のアスペクト比と最大公約数を計算するツールを公開。利用している技術などもすべて公開

iframeやvideoをCSSだけでレスポンシブに対応する

アスペクト比が分かっていれば計算することでCSSのみでレスポンシブに対応させることだって可能です。

属性セレクタや疑似要素を使って無駄なタグやクラスの付与などを減らす

CSSの属性セレクタを使い、HTMLに無駄なクラスの付与を減らす方法

CSS3のみで時間差を使いアニメーションを作成する

複雑なアニメーションを考える時、動く物体単体だけではなく、要素を隠して時間差で作成するという考え方もあります。

疑似要素でリスト整形

疑似要素を使ってリストをちょっと整形してみる

Google Material Design Lite風ボタンアクション

Google Material Design Lite風のボタンアクションを作ってみた

よく使う実体参照一覧

よく使う実体参照の備忘録(CSSのcontent用もあり)

iOSでfixed/absolute切り替え時のバグ対応

iOSで発生するpositionバグを解消させる方法

Stylusノススメ。

イチオシのプリプロセッサ「Stylus」の話。学習コストも低いのでオススメ。

ローディングの実装

ウェブサイトで画像の読み込みやajaxでのデータ取得などを処理する場合、ノータイムでの表示は理想的ですが、どうしても多少なりとも時間がかかります。 そういった場合には、処理をしているということを知らせるローディングを実装 […]