Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 1. スライドのアニメーションがとても滑らか・ちらつかない 2. ボタンの反応にストレスを感
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
IE7.js登場 - IEのCSS/HTML非準拠はこれで対応 | エンタープライズ | マイコミジャーナル
Dean Edwards氏は7日(米国時間)、IEの動作をW3C標準仕様へ準拠させるためのライブラリIE7.jsの最新版を公開した。IE7.jsはJavaScriptで開発されたMS Internet ExplorerのHTML/CSS表示を調整するライブラリ。IE7.jsを使うことでMSIEのHTML/CSSまわりの表示処理をよりW3C標準規約に準拠したものにする。IE5やIE6で透過PNGを表示できるようにもなる。 IE7.jsは基本的にMSIE5/6向けに用意されていたライブラリをIE7に対応させたもの。これまでのモジュール構造は廃止され、IE7.jsやIE8.jsといったように個別のファイルに分離されている。ホスティング先もGoogle Codeへ変更された。IE7.jsはサイズも縮小され、圧縮した状態で11KBほど。またbase2.DOMのセレクタエンジンを使うことでより高速に動
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
CSSとButtonタグを使ったクールなボタンサンプル集:phpspot開発日誌
Digital Web Magazine - Push my button If there’s one element I think doesn’t get enough respect, it’s gotta be button. It’s played second fiddle to input in tutorials and form examples for as long as I can remember. CSSとButtonタグを使ったクールなボタンサンプル集。 Formのsubmit ボタンを作る場合、<input type="submit" value="送信"> の形式が最も使われていますが、 <button type="submit"></button> タグを使い、その内部にHTMLを入れこんでCSSでデザインすることでリッチなボタンが作れる実例。 <in
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssrefresh.frebsite.nl/
[CSS]Media Queries（メディア クエリ）を使用したデバイスごとの指定方法のまとめ