CSS

SVGアニメーション

2015/11/12CSS

ブログをリニューアルするにあたって画像やアイコンをSVG化しました。今回はSVGのアニメーションに挑戦します。

FlexboxがAndroid4.2.x系のとある端末で効かなかった時の処置

2015/06/04CSS

とある案件でCSS3のFlexboxがAndroid4.2.x系のとある端末で効かなかった時の処置です。(非推奨やと思います)

devicePixelRatioの値によってimgタグのファイル名を書き換えるjQueryスニペット

2012/05/23CSS

CSSの背景画像はMedia Queryで分岐する事ができますが、HTMLに直接記述するimgタグでもdevicePixelRatioの値によって書き換わるjQueryスニペットです。

スマートフォンで解像度ごとに最適な画像サイズにするdevicePixelRatioの設定

2011/08/31CSS

スマートフォンでは機種によって解像度がことなるのは周知のとおり。
100px×100pxの画像をiphone3で表示すると100px×100pxで表示されるが、iPhone4では解像度が2倍なので50px×50pxになってしまいます。

Webkitがおもしろそう

2008/06/05CSS

webkit.jpg

Webkitが何かというと、アップルが開発したSafariやMacOSXのダッシュボードやWigetといったアプリケーションやiPhoneのOSのインターフェースの基盤を担っているフレームワークがWebkitです。Googleの携帯用OSであるアンドロイドのブラウザもSafariと同様にWebkitが採用されています。

イメージ画像をCSSで装飾するサンプル

2008/05/30CSS

cmsphoto.jpg

イメージの上にCSSでPNG画像を被せて装飾するサンプルの紹介サイトをご紹介します。これCMSを使っている場合、かなり便利ですよ。

IE6向けの便利なCSSハック

2008/03/25CSS

IE6でのロールオーバー時の背景画像のちらつきを解消するためのハックとIE6でmin-heightやmin-widthを効かせるためのCSSハックです。

CMSで便利なCSSを使った画像をリサイズする方法

2008/02/22CSS

僕は仕事ではCMSを使用した案件がメインになっているのですが、CMSを使用した際に頭を悩ませる問題として、クライアントが縦横比率の違う画像を使用することによってレイアウト崩れを起こすことがあります。

その問題をスクリプトを使用せずにCSSだけで解決できそうな方法を見つけたのでご紹介しようと思います。

offspring.js

2008/02/06CSS

追記
指摘がありました。 offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。 このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{....}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。

今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加してくれるoffspring.jsをご紹介いたします。

サーバーサイドでJSとCSSをバンドルする方法

2007/11/09CSS

How To Minimize Your Javascript and CSS Files for Faster Page Loadsという海外のブログでJSとCSSを最小限に抑えてページの読み込みを高速化する方法。具体的にはファイル自体を圧縮する方法と外部読み込みをバンドルする方法がある。今回はその中のサーバーサイドでバンドルする方法を紹介します。