CSSの記事一覧
HTML/CSS/JavaScriptを改善してWebサイトのパフォーマンスを向上しよう「DOM Monster」
DOM MonsterはDOMやテキストノードをチェックし、Webサイトのパフォーマンス改善を提示するブックマークレット。/s2IfDOM MonsterはJavaScript製のオープンソース・ソフトウェア。JavaScriptを活用したWebサイトが増えている。インタラクティブなWebサイト構築にあたって、Java...
これは便利！ブラウザ/レンダリングエンジンごとのCSS設定をJavaScriptで解決する「CssUserAgent」
CssUserAgentはJavaScriptを使ってブラウザ/レンダリングエンジンごとのクラス定義を生成する。/s2IfCssUserAgentはJavaScript製/Web用のオープンソース・ソフトウェア。CSSは便利だが、ブラウザによって指定が異なってしまうケースに対応しようと思うと途端に煩雑になってしまう。特...
ヘッダーに仕込んでおくと幸せになれるJavaScript「Head JS」
Head JSはヘッダーに組み込み、JavaScript/CSSの管理を補助するライブラリ。/s2IfHead JSはJavaScript製のオープンソース・ソフトウェア。HTMLのヘッダーで行うべき処理は多い。SEO対策としてキーワードの設定や説明文の追加、さらにJavaScriptファイルを読み込んだりCSSを設定...
HTML、CSSのリファレンス集「CodeBurner」
CodeBurnerはFirefox/Adobe AIR/Mac OSX用のフリーウェア。Webデザイナー、プログラマーであれば開発中にリファレンスが見たくなることが多いはずだ。都度Webサイトを検索しても良いが、手軽に使えるリファレンスが手元にあると便利だ。HTMLタグの検索 特にブラウザ間の誤差があるプロパティなの...
Webブラウザ上でデザインを調整する「Brosho」
BroshoはjQuery/JavaScript製のオープンソース・ソフトウェア。WebサイトのデザインはWebブラウザを使って微調整を行わないと分からない部分が多い。特にシステムがらみで実際にデータを当ててみないとどうなるか分からない時はそうだ。その場でCSSを修正して確認できる 実際にデータベースのデータを入れてみ...
iPad用Webサイトを構築するの使えるテンプレート「jQPad」
jQPadはHTML/JavaScript製のオープンソース・ソフトウェア。iPadはPCを使うほどでないライトやネット利用者や逆にギークを軸に売れている。毛嫌いする人も多いが、個人的には気に入っているデバイスだ。iPhoneとは違って大きな画面でWebブラウジングできるのが良い。iPadに最適化されたサイトを構築する...
JavaScriptだけで画像イフェクト「PaintbrushJS」
PaintbrushJSはJavaScript製のオープンソース・ソフトウェア。写真は撮ったそのままよりも加工した方がより印象深くなることがある。ただ、撮りためた数百枚という写真をすべて加工するのは大変だ。そのためにオンラインで画像加工を行うサービスも存在する。横並びの写真はすべて同じもの だが元々は同じ写真だ。加工す...
IE6〜IE8でもCSS3の機能を使う「CSS3 PIE」
CSS3 PIEはCSS/JavaScript製のオープンソース・ソフトウェア。技術は日々進化しており、新しい機能が追加されている。だが、過去の資産から対応しなければならない場合そうした新しい試みは取り入れることができない。CSS3を使いたくともIE6から対応となれば利用できないだろう。IEでもCSS3の恩恵を そんな...
罫線を重視したCSSフレームワーク「Atatonic」
AtatonicはCSS製のオープンソース・ソフトウェア。HTMLのデザインにおける柔軟性は非常に高い。だが柔軟性はあっても見やすいデザインにできるかどうかと言うと話は別だ。読みやすさで言えばむしろ画一的なデザインの方が良かったりする。罫線に沿った綺麗なデザイン 整ったデザインを各種ブラウザに合わせて作り込むというのは...
軽量なCSSフレームワーク「Invisible」
InvisibleはCSS製のオープンソース・ソフトウェア。CSSはブラウザによって解釈が異なる部分があり、そのために一つのブラウザで整っても、別なブラウザでは崩れてしまうということがよくある。そうした誤差を吸収する意味でもCSSフレームワークを利用するメリットは大きい。グリッドデザインが容易に CSSフレームワークと...
HTML5製のWebベースウィンドウライブラリ「ChromeKit」
ChromeKitはHTML5/CSS3/JavaScriptによるフリーウェア（ソースコードは公開されている）。HTML5の登場によってWebブラウザの可能性があがれば、おのずとWebアプリケーションに対するニーズも高まっていくはずだ。その過程にはWeb OSのような可能性もある。ローカルアプリケーションのようなウィ...
CSS3だけでアクションを実現するフレームワーク「CSS3 Action Framework」
CSS3 Action FrameworkはCSS3製のオープンソース・ソフトウェア。HTML5に注目が集まっているが、同時に見逃せないのがCSS3だ。良く角丸やドロップシャドーがCSSだけでできるようになると言われているが、他にも様々な効果がCSSのみで可能になる。CSSだけでオブジェクトの回転 これまでは同様の効果...
iPhoneで使えるWebアプリケーションキット「TouchScroll」
TouchScrollはiPhone（予定ではAndroidやPalm Preも）用のフリーウェア（ソースコードは公開されている）。iPhoneにはWebサイトをブックマークとして保存する機能がある。その時、ホーム画面に追加をすればネイティブアプリのようにアイコンから起動できるようになる。コンテンツだけスクロールする ...
Sitemap.xmlを見やすく表示する「Google Sitemaps Toolbox」
Google Sitemaps ToolboxはJavaScript/CSS/XSLTによるオープンソース・ソフトウェア。ロボット型検索エンジンがサポートするSitemap.xml。SEOを専門とする方はもちろん、Webサイトへ効率的にユーザを呼び込みたいと考える人にとっては必須の技術だろう。Sitemap.xmlを見...
先進的。HTML5/CSS3対応のデザインフレームワーク「52Framework」
52FrameworkはHTML/JavaScript/CSS製のオープンソース・ソフトウェア。これまでのWebデザインが今後、大きく変わっていく可能性を秘めているのがHTML5やCSS3だ。まだ実験段階というイメージが強いが、GoogleやYoutubeをはじめとする大手サイトでも取り入れられ始めている。Safari...
サイトのデザイン微調整に。ブラウザ上でCSS修正「Brosho Plugin」
Brosho PluginはJavaScript製jQueryプラグインのオープンソース・ソフトウェア。Webサイトのデザインを調整する時には、ローカルのテキストエディタでCSSを修正し、Webブラウザで再読込するというのが一般的だ。だが切り替えの手間がかかる。オンラインでデザイン修正 そこでFirefoxであればFi...
整ったレイアウトのWebサイトを手早く作るためのCSSフレームワーク「Markercss」
MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。こんな感じのデザインも容易に Firefoxで見栄え...
CSS/JavaScriptのサイズ縮小、結合ライブラリ「Juicer」
JuicerはRuby製のオープンソース・ソフトウェア。jQueryやPrototype.jsなどJavaScriptでリッチなインタフェース、操作を可能にするライブラリは多い。特に本体は軽量に、多彩なプラグインが提供されるjQueryは人気が高い。ヘルプ だが多数のプラグインを使うとスクリプトタグがたくさん並び、コネ...
複数のCSS/JavaScriptを結合＆圧縮「phpFlair」
phpFlairはPHP製Webベースのオープンソース・ソフトウェア。jQueryなどのJavaScriptフレームワークやCSSフレームワークを用いていると、ついつい一度のアクセスで多数のコネクションが張られるようになる。これではサーバの負荷はもちろんクライアントでも表示が遅くなってしまう。利用するサンプル（公式サイ...
Google製、JavaScript/CSSの難読化＆キャッシュ「Reducisaurus」
ReducisaurusはJava製/Google App Engine用のオープンソース・ソフトウェア。Webアプリケーションが隆盛になり、JavaScriptを多用したシステムやCSSによる凝ったデザインのサイトが増えてきた。それぞれフレームワークを使ったりして複数のファイルを扱うケースも多い。設定方法 JavaS...