CSSのレイアウト作成に役立つ便利なリソースいろいろ
最近のページやサイト作成に欠かすことのできない「CSS（カスケーディング・スタイル・シート）」ですが、そのレイアウト作成を行う際に便利なリソース22種類です。ゼロから作るよりは楽に製作できるはず。 詳細は以下の通り。 40種類のCSSレイアウトがそろっています。 Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! CSSのフレームワーク blueprintcss - Google Code 16種類の異なるCSSベースのレイアウト intensivstation :: CSS Templates :: Templates 12種類のCSSによるレイアウト Dynamic Drive CSS Layouts- CSS Frames CSSのレイアウトを作成する
2007年度のCSSデザインベスト50発表
CSSとFlashのデザインでインスピレーションを得るためのサイト「Best Web Gallery」が選んだ2007年度のCSSデザインベスト50が発表されています。どれもこれもなかなか秀逸なデザインなので、来年度の新しいデザインに向けて、今年度の総復習を行って新たなインスピレーションの糧を得たい人や、ウェブサイトやブログのデザインを新しくしたいので参考になるデザインを探している人に最適です。 というわけで、ベスト50は以下から。 Capture the Valley - A project to benefit Habitat for Humanity http://capturethevalley.com/ Squawk http://www.squawkdesign.com/ Emeril's Holiday to Go : Home http://www.emerils.com/
5000枚以上の全画像が無償で利用可能な「PUBLIC-DOMAIN-PHOTOS.com」
個人利用も商用利用も可能で、全部で5000枚以上の画像がパブリックドメインで用意されているというすばらしいサイトです。用意されているのは写真だけでなくクリップアートもあるので、いろいろな用途に使用可能。 詳細は以下の通り。 Top Rated - Free Stock Photos http://public-domain-photos.com/ ※時々、転送量過多で一時的に見えなくなるようです。見えなくなっている場合はここからどんなサイトだったのか確認できます。 写真は以下のジャンルがあります。 Animals Buildings City Drinks Flowers Food Insects Interiors Landscapes Miscellaneous Objects Ocean Panoramas People Plants Space Travel Vehicles なお
無料で利用できる600個以上のアイコン集「Crystal Clear」 - GIGAZINE
16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。 ダウンロードは以下から。 Everaldo.com : Crystal Icons http://www.everaldo.com/crystal.html アイコンの一覧は以下から見ることができます。 Crystal Clear - Wikimedia Commons http://commons.wikimedia.org/wiki/Crystal_Clear もともとは以下の画像のように、LinuxのKDEのために作られたアイコンセットと言うことで、そのライセンスが適用されているようです。
無料で200個以上のウェブサイトテンプレートを配布する「OpenDesigns.org」 - GIGAZINE
現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック
1万3000個以上のフリーフォントを検索できる「Search Free Fonts」 - GIGAZINE
全部で25個のカテゴリに分類されており、それ以外にもフォント名や頭文字で探すことも可能。フリーフォントだけでなく、商用のフォントも2万3000個以上用意されており、「こういうフォントが欲しい」と思った際に的確に発見できるように作られています。 詳細は以下の通り。 Search Free Fonts - over 13,000 free fonts available for download http://www.searchfreefonts.com/ 25個のカテゴリはこんな感じ。 Fonts by category: Script fonts 例：Atmosphere Fonts by category: Military fonts 例：Crass Fonts by category: 3D fonts 例：Knockout Fonts by category: Antiques
自由に改造できるPSDファイル同梱の「I Love」Faviconセット
非常に高品質で商用利用可能なアイコンやベクターアートを配布していることで有名な「N.Design Studio」が今月からおもしろいFaviconのセットを配布し始めました。元素材となったPSDファイルも入っているので、自分好みのFaviconを作ることも可能です。 ダウンロードは以下から。 I Love Favorite Icon 中にはGIFファイルとICO形式のファイルが入っており、名前を変更するだけですぐに利用可能です。中に入っているPSDファイルは「I」とハートマークがそれぞれレイヤーになっており、背景画像の上に乗っている形式です。なので、配布されているミニアイコンをレイヤーに貼って追加することで、好きなデザインのFaviconが仕上がるというわけ。 同じサイトから商用利用可能なアイコンセット「Mini Pixel Icons」がダウンロードできるので、これと組み合わせても面白い
5000枚以上の写真やイメージ画像が無料で利用できる「Stockvault.net」
ダウンロードできる画像数は現時点で5425枚、カテゴリ数は93、全合計で3432MB（約3.4GB）もの大容量のフリーストックフォトギャラリーです。解像度は1280x960から1800x1200までとなっており、全体的に割と高め。個人利用に限りフリーで、自由に使うことができます。 さらに今は「The Best Stock Photo of 2006」という賞金1000ドルのコンテストを行っており、そこにノミネートされた高品質な画像も自由にダウンロードできるようになっています。 ダウンロードの仕方などは以下の通り。 free stock photos and images - stock photo resource - stockvault.net http://www.stockvault.net/ 全カテゴリには以下からアクセスできます。 Categories / Descriptio
自分のサイトがほかのブラウザでどう見えるか試す「browsershots.org」 - GIGAZINE
1年ぐらい前からある無料サービスで、自分の作ったサイトやブログなどがほかのブラウザから見ると正常に見えているかどうかを画像として見せてくれるサービスです。特に自分が普段使っているOS以外の環境下での見え方がわかるので重宝します。 対応しているブラウザは、WindowsはFirefox1.0/1.5/2.0、K-Melon 1.0、MSIE 6.0/7.0、Mozilla 1.7、Navigator 4.8、Netscape 6.2/7.2/8.1、SeaMonkey 1.0。MacはSafari 2.0。LinuxはDillo 0.8、Epiphany 2.14、Firebird 0.7、Firefox 1.0/1.5/2.0/3.0、Flock 0.7、Galeon 2.0、Konqueror 3.3/3.4/3.5、Mozilla 1.7、Navigator 4.8、Opera 8.5
リンクサムネイルの作り方 - GIGAZINE
外部サイトへのリンク文字列の上にマウスが来ると、自動的にリンク先のページをサムネイルで表示するという面白いスクリプトです。 例と設置方法は以下から。 例としてはこんな感じです。 http://lab.arc90.com/tools/linkthumb/ コードのダウンロードと使い方などは以下の通り。 arc90 lab : tools : Link Thumbnail http://lab.arc90.com/2006/07/link_thumbnail.php 互換性はInternet Explorer 6.0以上、Mozilla Firefox 1.5以上、Apple Safari 2.0、Opera Version 8.51以上であるそうです。 ちゃんと外部サイトのみ判別し、自サイト内ではいちいちサムネイルを表示しないようにできます。
GIGAZINE - ファイルサイズわずか3KBのオーバーレイ効果「Litebox」登場
オーバーレイ効果を作り出す「Lightbox」というスクリプトの超軽量版です。 実際の例やダウンロードは以下から。 Litebox- Same great taste, less calories http://www.doknowevil.net/litebox/ 上記ページの画像をクリックするとどういう効果なのかがよく分かります。 Liteboxで使われているのがこの「moo.fx」という軽量なJavaScriptエフェクトライブラリ。 moo.fx - the next small thing http://moofx.mad4milk.net/ また、類似品としてはこんなのもあります。 GIGAZINE - オーバーレイ効果を作り出す軽量スクリプト「iBox」
GIGAZINE - いろいろな効果を追加できるJavaScriptライブラリ「jQuery」
ファイルサイズわずか10キロバイト、CSSの1から3、XPathをサポートし、Internet Explorer、Firefox、Safari、Operaで動作します。「JavaScriptのコードを書くのが楽しくなる」というのがモットーらしい。 ダウンロードや実際の例、使い方などの各種取り扱い説明は以下の通り。 jQuery: New Wave Javascript http://jquery.com/ 上記ページの「Run」をクリックするとその機能の一端を垣間見ることができます。面白い効果です。 その他のデモとしてはこんな感じでいろいろなところに使えます。特に一番下の「Example G」のボタンをクリックしてから本文の上にマウスを乗せると色が変わり、フェードしながら元に戻るというのはシンプルながら面白い。 JQuery http://codylindley.com/blogstuff
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとJavaScriptでチェックボックスなどをグラフィカルにする「formStyle」
映画のタイトルロゴを模したフォント集