PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
高速な CSS セレクタエンジン「Sizzle」「Peppy」を試す - WebOS Goodies
最近のほとんどの JavaScript フレームワークには、 CSS セレクタによる DOM エレメントの取得機能が実装されています。複数の要素を柔軟な条件で取得できるので、 DOM ツリーの操作がシンプルに記述でき、とても便利です。しかし、単に CSS セレクタを使いたいだけなのに、フル機能のフレームワークを読み込むのはちょっと抵抗がありますよね。 そんな悩みを解決してくれるのが、本日ご紹介する Sizzle, Peppy という 2 つのライブラリです。これらは他のフレームワークに依存しない独立した CSS セレクタエンジンで、しかも jQuery 等の既存のエンジンより数倍高速に動作します。 unobtrusive な Web ウィジェットの開発や、独自フレームワークの開発に最適ですね。その他にも広範な用途に使えるでしょう。 以下でこれらのライブラリの使い方や動作速度等の検証結果を掲
Stylishがどのようにして再起動なしでCSSを適用しているか調べてみた - きれいさっぱり、逝くぜ！
Firefoxの拡張であるStylishを使用すると、再起動なしでスタイルシートを適用してWebページだけでなくFirefoxのインターフェースも変更することが出来る。 この動作がわかれば、Foxdieのようなサブスキンを内蔵したテーマで、再起動なしにサブスキンを試すことが出きると考え、その動作の仕組みを探ってみた。 とりあえず、タブの高さを40pxにするスタイルをStylishに書く。 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); tab.tabbrowser-tab { height: 40px; } DOM Inspectorで調べると「プレビュー(W)」ボタンは「chrome://stylish/content/edit.js」の「doPreview関数」を呼び出している
製品を効果的にPRするためのPRページを作成するチュートリアル:phpspot開発日誌
NETTUTS - Create a Simple, Powerful Product Highlighter with MooTools 製品を効果的にPRするためのPRページを作成するチュートリアル まず、デモを見てみましょう。アイコンにカーソルを合わせると、吹き出しがクールに切り替わります。 JavaScript、マークアップ、CSSが公開されており、カスタマイズで簡単に調整できます。 ソースがダウンロードできますので、遊んでみましょう。商品のＰＲページを作っていた人は活用してみるのもよいかも。 関連エントリ Prototype.jsとScript.aculo.usで作るクールなアコーディオンＵＩ jQueryでクールにアニメーションするメニューを実装するチュートリアル
スクリプトとスタイルシートの順番でロード時間がどう変わる？
Cuzillionは、ページ内に配置する外部・インラインのスクリプト・スタイルシート、画像、iframeの順番によって、ページのロード時間がどのようになるかをシミュレートできるサービスです。 Cuzillion ロード時間は、最初のパケットからonloadイベントまでを算出しており、HTMLドキュメントのロード時間は含まない、と記載してあります。 シミュレートできるコンポーネントは、６つとなっています。 外部スクリプト インラインスクリプト 外部スタイルシート インラインスタイルシート 画像(image) iframe Cuzillionで、「外部スクリプト」「外部スタイルシート」、「外部スタイルシート」「外部スクリプト」と入れ替えたものを試しただけでも、ロード時間が違いました。 ロード時間による順番に気をつけたことはなかったのですが、ロード時間が短縮させるのであれば、気をつけた方がいいな
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
fontやcenterなどの指定を無効化する方法
サイトの更新時に、管理者や制作者の意図せぬ使い方で、<font>や<center>などの要素を更新者に使用されてしまうことがあります。 それを防ぐ方法の紹介です。 Disabling Deprecated HTML Using CSS 上記サイトでは、<font>, <basefont>, <center>, <strike>, <s>, <u>, bgcolor, border, align, vspace, hspace, valign, width, heightについて、CSSやJavaScriptを使用して、それらの指定の一部を無効化する方法が紹介されています。 example: <font>, <basefont> <textarea name="code" class="css" cols="60" rows="5"> font, basefont{ color:inheri
CodeZine：Aptana 「HTML、CSS、JS、PHP、Ruby、AIR」 フリーの開発環境Aptana 1.0リリース（エディタ, ツール）
Web関連の言語に対応した統合開発環境Aptanaの正式版がリリースされた。単体で提供される「Aptana IDE」とEclipseプラグイン版の2つが用意されている。Eclipseの場合は更新機能に以下のURLを登録することで入手できる。 http://update.aptana.com/install/3.2/ AptanaはHTMLやJavaScript、CSSなどに対応した統合開発環境で、プラグインの追加によりPHP、Ruby、AIRなどの開発にも利用できる。プラグインの追加はIDE起動時に表示される「Aptana Start Page」より、関連プラグインの「install」ボタンを押すことで行える。なお、プラグインの実行にあたっては各言語の実行環境を用意する必要がある。 Eclipseベースのツールのため、強力なエディタやソースコード管理システムを利用することができる。主な
XRAY :: for web developers
These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us [email protected]. XRAY: look beneath the skin XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (inc
CSS レイアウト切り替えスイッチ | WWW WATCH
Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレ... Web サイトのレイアウトに関しては、横幅を固定した固定レイアウト、ブラウザのウィンドウサイズと連動するリキッドレイアウト、文字サイズと連動するエラスティックレイアウトの 3種類がよく使われますが、どのレイアウトが一番文章が読みやすかったり、利便性が高いのかって考えたときに、当然好みは人それぞれ。 じゃあ、その人の好みで、3つのレイアウトを切り替えられるようにしたらいいじゃんということで、そんな CSS 切り替えスイッチを作ってみました。 サンプルはこちらで確認できます 全ファイルのダウンロードはこちら （zip ファイル / 10KB） デフォルトでは横幅固定のレイアウトになっています。スイッチを押すたびにレイアウトが選択
Autopopulating text input fields with JavaScript | 456 Berea Street
For both accessibility and usability reasons, all input fields and other form controls except buttons should have an associated label that clearly states what the purpose of the control is, or what kind of input the user is expected to fill it with. Sometimes the visual design places restrictions on those labels, in some cases to the extent that there is no room for a label. Perhaps one of the mor
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」:phpspot開発日誌
HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」 2007年10月10日- Welcome to Tablecloth Tablecloth is lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements. HTMLテーブルに分かりやすいカーソルハイライト機能を付けられるJSライブラリ「Tablecloth」。 テーブルにカーソルを合わせると次のように、現在位置がハイライトされます。クリックすると、その位置のハイライトを固定します。 シンプルな効果ですが、データが多くある際、現在位置の確認や、チェックしておきたい部分をハイライトさせておくことが出来るなど、ユーザビリティ向上が期待できますね。 使い方は次
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」:phpspot開発日誌
サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 2007年10月11日- Css Globe - Sitemap Styler: Style your Sitemaps with CSS and Javascript I believe that it isn't necessary to point out the benefits of having a sitemap somewhere on your site.サイトのサイトマップページをCSSとJavaScriptで分かりやすくツリー状にする「Sitemap Styler」 スタイルなしの状態のリストを美しくツリー状に整形できます。 JavaScript によってツリーがクリックで開閉できます。 3種類の違うスタイルのサンプルが公開されているのでお好みのサンプ
Beering.be
Wheel Bearings - AWD AWD, China Professional Factory ISO9001 & 14001 Ensured! Choose AWD WD-Bearing.Com
マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記
はじめに このエントリはマークアップエンジニアに対する批判ではありません。不快な想いをした方がいましたら、申し訳ありません。 きっかけ ライブドア & サイボウズラボの数人でお昼ご飯を食べにいって、いろいろ話しながら考えたことを昼食後に Twitter に書き込みました。 濃い昼飯だた、(X)HTML+CSS しか出来ない人は真剣に第二の何かを探したほうがいいと思た。(X)HTML+CSS ではもうこれ以上すごいと呼ばれる人なんて増えないと思う。 http://twitter.com/amachang/statuses/191256222 「CSS 道」は道が短すぎるんだ。マーケティングの為に長く見せてるけど、実際覚えることは少ない。「デザイン」か「JavaScript」を職業に出来るくらいにしとかないとヤバいと思う。 http://twitter.com/amachang/statuse
PNG Behavior (WebFX)
Introduction This behavior adds support for the most powerful raster graphic format available to Internet Explorer. It is of course our all beloved PNG format I am talking about. This format can have an 8 bit alpha channel which allows the images to be semi transparent. Transparency allows images to have antialiased edges and this makes the images look more professional. Implementation The secret
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - mrclay/minify: Combines. minifies, and serves CSS or Javascript files
JavaScript と CSS を自動圧縮してくれるプラグイン | Tips Community
linkのhrefを変えるとCSSをダイナミックに読み込んでくれる - 素人がプログラミングを勉強していたブログ
:-moz-drag-over - CSS | MDN