[B! css][note] igrepのブックマーク

HTML/JavaScript/CSSをシェイプアップ！·Patu Digua MOONGIFT

HTMLやJavaScript、CSSを構造化して見やすく書こうと思うとインデントやスペースを使うだろう。確かに見やすいが、ブラウザへのレンダリングを行う上では特に意味はない︵中には意味のあるスペースもあるが︶。できるだけ転送量を抑えようと思うと、このスペースをなくしていくという作業が大事になる。 HTML/JavaScript/CSSのサイズを軽減そのためのツール︵難読化ツール︶はいくつか存在するが、HTML/JavaScript/CSSのいずれにも対応したものは多くない。そこでPatu Diguaだ。今回紹介するオープンソース・ソフトウェアはPatu Digua、HTML/JavaScript/CSSからスペースやコメントを排除するソフトウェアだ。 Patu DiguaはJavaで作られたソフトウェアで、Windows/Mac OSX/Linuxで動作する。指定したファイルからコメ

igrep 2009/09/11

リンク

整然とライン上で表示されるCSSフレームワーク·Baseline MOONGIFT

大学ノートには横線が引かれている。これを使って文字を書けば、斜めになったり一部だけ文字の大きさが変わって読みづらくなったりしない。整然と並んで書かれていれば後で読み返す時にもきっと分かりやすいはずだ。ある一定の基準に沿っていると安心感があり、情報を受け入れやすくなるのだ。グリッドコンテンツを重視したWebサイトではそのような読みやすさの観点も考える必要がある。そのためのフレームワークがBaselineだ。今回紹介するオープンソース・ソフトウェアはBaseline、グリッドに沿ったCSSフレームワークだ。 Baselineはまるで大学ノート、と思わせるような横線が引かれた背景画像にぴったりと合わせて文字が書かれている。カラムも1〜4カラムで調整でき、幅も3カラム分使ったり、2カラムずつで等分することもできる。統一された、均質的なデザインが組めるのが特徴だ。フォームテキストの表示の他

igrep 2009/08/30

リンク

Rubyによる構造化CSSライブラリ·Less MOONGIFT

CSSのメンテナンス性の悪さは言うに及ばないだろう。どうとでも書けてしまう手軽さはあるが、ファイルが分かれていたり、ネストしている場所としていない場所があったりするともう管理ができなくなる。ちょっとした変更がどこに影響するかも分からず、もはや触るのが怖くなる。 Lessの記述例そんな訳でCSSは慣れれば慣れるほど使い方が難しい代物だ。そこでLessを使って分かりやすく管理してみよう。今回紹介するオープンソース・ソフトウェアはLess、プログラミング的に記述するCSSライブラリだ。 Lessはコマンドラインのツールで、lesscというコマンドを利用する︵lessは別コマンドで既に存在するので︶。そして専用ファイルの.lessを変換し、.cssファイルを生成する。デザイナの方はCSSファイルを直接触らないようにする必要がある。変換例利用できる機能としては変数、階層構造、Mixin、計算

igrep 2009/06/21

リンク

CSSのプロパティを見ながら指定できる·Simple CSS MOONGIFT

CSSを常日頃から使わないと、ちょっとしたプロパティを忘れてしまう。例えばcursorプロパティに設定できる文字は何があっただろうか、といった具合だ。ネットを使って調べても良いが、オフラインの場合に困ってしまう。テキスト設定そんな時に使えるのが、CSSエディタだ。シンプルなものが良ければSimple CSSが便利だ。今回紹介するフリーウェアはSimple CSS、Mac OSX向けのCSSエディターだ。 Simple CSSはCSSの設定ごとに一覧し、プロパティを一つ一つ設定できるCSSエディタだ。テキスト、表示、ボーダー、寸法と設定項目がグルーピングされているので分かりやすい。設定項目は自由に入力できる場合はテキストボックスだが、項目から選択する場合はドロップダウンから選ぶだけで良い。ボーダー一覧テキストの色もピッカーから選ぶだけで良い。意外と忘れがちな項目名や設定方法もSim

igrep 2009/06/14

リンク

FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる「Firefinder」:phpspot開発日誌

FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる﹁Firefinder﹂ 2009年05月25日- Firefinder for Firebug :: Firefox Add-ons FirebugでXpathやCSSセレクタによってエレメントを高速に検索できるようになる﹁Firefinder﹂。 Firebugの拡張として動作し、インストールすると Firefinder タブが表示されます。まずは css セレクタによって探してみます。 div.content で検索すると、<div class="content">がマッチします。 divだけで検索するとすべてのdivを探すことが可能です。 XPathｄｅ検索してみたところ、同じように検索が可能マッチしたエレメントは赤色でハイライト表示されます Firebug標準の検索機能は、1個1個検索して

igrep 2009/05/25

リンク

高速なJavaScript CSSセレクトエンジン·Sizzle MOONGIFT

Prototype.jsやjQueryなどのJavaScriptフレームワークではHTMLのクラス名やIDなどを指定して要素を取得できるようになっている。とは言え、簡単な要素の取得のためにフレームワーク全体を読み込むというのはちょっと面倒だ。次世代版のCSSセレクタエンジンそこでもっと手軽に使えるCSSセレクタとしてSizzleを紹介しよう。jQuery開発者の方が開発している次世代版のCSSセレクタエンジンだ。今回紹介するオープンソース・ソフトウェアはSizzle、高速＆多機能なCSSセレクタエンジンだ。 SizzleではCSS3のサポート、not指定による要素の除外指定、ポジション︵最初、最後、偶数、奇数など︶指定など多彩な機能が実装されている。単体で用いることもでき、わずか4KBという軽量さだ︵難読化+GZip圧縮した場合だが︶。 Firefox3 for Mac OSXの場合