Windows Internet Explorer 8 オンザフライでCSSを調整してブラウザの表示に反映させるツールはいくつもある。WebデザイナやWebデベロッパにとって、WebサイトやWebページを制作する段階において欠かせないツールといえる。主要ブラウザにはそれぞれデバッグツールが付属しているか、付属していなくてもFirebugのように実質的にデファクトになっているツールが提供されおり、そうしたツールを使うことが多い。 このようにCSSをチューニングするためのツールは数多く提供されているが、逆にCSSで使われていないセレクタを特定して削除するといった機能を提供するものは少ない。IEBlog : CSS Crunch: new IE Extension for developersにおいてSelectors API Level 1で規程されているdocument.querySelec
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。 設定方法 JavaScriptやCSSのファイルを複数読み込むにはその分だけコネクションを行う必要があり、負荷がかかってしまう。そこで使ってみたいのがReducisaurusだ。ローカルファイルやリモートのファイルを読み込んで一つにまとめてアクセスできるようになる。 ReducisaurusはGoogleのエンジニアでJaikuの開発にも関わっているプログラマによるソフトウェアだ。実行はGoogle App Engine上で可能になっている。自分でサーバを立てることもできるし、Reducisa
CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」 2009年01月22日- Selector Shell CSSハック等に応用できそうなブラウザが解釈しているCSSがわかる「Selector Shell」。 ボックスにCSSを入力して「Test It」を押せば解釈されているCSSが分かります。 これを使えば、どんなCSSがちゃんと利いていて作用するかっていうのが分かりますね。 たとえば、次のようなCSSがサンプルで最初からはいってます。 Gecko, IE用や, Webkit 用などさまざまなハックを使っていますが、各種ブラウザで「Test It」してみれば何が利いているかが一目瞭然です /* Some example CSS */ body .class1 { border-color: black; } /* Gecko hack. *
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
Webサイトをデザインをしていて、どうにもサイズがずれる事があるかも知れない。そうした時、いちいちソースを表示してCSSのクラスを確認して、CSSファイルと照らし合わせていないだろうか。非常に手間ひまのかかる作業だ。 表示されているそのものを確認できれば便利だ。そしてそれを実現するソフトウェアがこれだ。 今回紹介するフリーウェアはXRAY、CSSレイアウトの情報をフローティング表示するソフトウェアだ。現在ライセンスは明記されていないが、将来的にはオープンソース化される予定との事だ。JavaScriptなので、ソースは現状でも見ることが可能だ。 XRAYはBookmarkletとして導入するソフトウェアで、公式サイトのブックマークをツールバーに登録すればインストール完了だ。後は任意のサイトでBookmarkletを実行すればいい。 Bookmarkletを実行すると、ブラウザ上にフローティン
CSSははじめこそきちんと定義しながら進めるのだが、修正が重なったり、日々の運用の中で徐々に肥大化していく。HTMLと同じで多少間違っていたり、不要な情報が紛れ込んでいてもそれなりに表示されるので気にならないのだ。 だが不要な情報が紛れ込んでいると、ちょっとした修正が全く無関係と思われる場所に影響を及ぼしたり、管理しきれなくなってくる。そこで使ってみたいのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはCSS Redundancy Checker、不要なCSSチェッカーだ。 CSS Redundancy CheckerはRubyで作られている、CUIベースで動作するアプリケーションだ。また、gemでhpricotをインストールする必要がある。そのため、若干敷居が高いかも知れないが、便利なアプリケーションだと思うのでぜひトライしてみて欲しい。 使い方は簡単で、CSSファイル
グリッドレイアウトブックマークレットを作りました 2007-03-08 グリッドレイアウトのためのちょっと便利な背景画像 | S i M P L E * S i M P L Eが便利そうだったので、ブックマークレットを作ってみました。 ブックマークレットをを実行すると、背景画像がWeb Page Layout Grid | Smiley Cat Web Designで使われている画像に切り替わります。 ブックマークレットは以下からどうぞ。 [背景をグリッドレイアウトにする] 背景画像を切り替えてるだけなので、他にも応用がききそうです。 コメント / トラックバック コメント / トラックバック 3 件 *LOVE IS DESIGN* より: 2007-03-10 00:35 実用的！レイアウトで悩んだときに頼れるツール 計算された余白やレイアウト。美しいと感じるものには何か法則があるはず
Hairy Spider Blog - Announcing DOM Helper: A new and improved CSS Editor Well I've finally got round to producing the inline CSS editor that I wanted to do in the first place. IE上でDOMやCSSを書き換え可能な拡張「DOM Helper」。 サイトのDOM構造を表示し、DOMの属性を自由に書き換えることが出来ます。 CSS Editor によってCSSの編集も可能な模様。 インストールは少々面倒で、次の手順で行う。 DOM Helperをダウンロード Cドライブ以下、DomHelper というディレクトリを作り、そこに解凍 コマンドプロンプトで次のコマンドを実行 "%windir%/Microsoft.Net/F
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
