GIGAZINE - 使えるCSSコードいっぱい「Dynamic Drive CSS Library」
CSSを使ったタブ型の各種メニューとか、CSSによる画像のポップアップとか、ドロップシャドウやページカールの作り方などのコードが実際の例と一緒に置いてあります。実例を見てから選ぶことができるので、希望通りのものが手に入りやすいです。 Dynamic Drive CSS Library- Practical CSS codes and examples http://www.dynamicdrive.com/style/ RSSもあるので新しいコードが追加されればすぐにわかります http://www.dynamicdrive.com/style/csslibrary/rss/ コードの種類としては以下のような感じでカテゴリ分けされています。 横型のメニュー http://www.dynamicdrive.com/style/csslibrary/category/C1/ 縦型のメニュー h
CSSのレイアウト40種類を集めた「Layout Gala」 - GIGAZINE
サイトのコンテンツのレイアウトを考える場合、コンテンツをどのようなレイアウトでは位置すればいいのか悩む場合が多々あります。2コラムにするのか3コラムにするのか、それぞれのコラムの下にさらに子コラムを入れるのか否か、右サイドに置くのか左サイドに置くのか、などなど。 そんな場合に参考になるのがこの「Layout Gala」。CSSによるレイアウトの例が40種類あるので、自分の作りたいサイトのスタイルに近いレイアウトを実際に見てから、CSSファイルをダウンロードできます。Layout Gala http://blog.html.it/layoutgala/ 全部のレイアウトのファイルを詰め込んだファイルのダウンロードは以下から。 http://blog.html.it/layoutgala/allLayouts.zip また、「Yahoo! UI Library」にも単一のCSSファイルで100
GIGAZINE - よく見かけるあの小さなボタンバナーを作る「Button Maker Online」
上記画像のような小さなボタンバナー画像に見覚えはないでしょうか？これを簡単にオンライン上で作成できるのが無料サービス「Button Maker Online」です。80×15か88×31サイズの画像が簡単に作成できます。 Dynamic Drive online tools: Button Maker http://tools.dynamicdrive.com/button/ 使い方は以下の通り。 「Base Color is Transparent」：背景色を透過色にする 「Base Color」：背景色を決める。「Base Color is Transparent」のチェックを外すと選択できる 「Font」：文字のフォント。SilkscreenとSans-Serifの2種類。 「Border Color is Transparent」：境界線の色を透過色にする 「Border Colo
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
ブログのCSSデザイントップ20 - GIGAZINE
CSS BloomというブログなどのCSSデザインをみんなで評価するサイトにて、高評価のデザイントップ20です。 日本のブログデザインのコンセプトとちょっと違うのが多く、見ているだけでも面白いです。ブログデザインの展示会といった感じ。また、どんなデザインのブログにしようかな～と思っている場合にはかなり参考になります。 Top 20 Blog Designs | Blog http://silentbits.com/?p=339 http://silentbits.com/?p=385 以下、上記サイトで出てきたトップ20のサイト第1弾。 Veerle's blog 2.0 - Webdesign - XHTML CSS | Graphic Design Avalonstar. The Aries Project. By Bryan Veloso. Matt Brett Joshuaink
CSSデザイン格付けサイトいろいろ - GIGAZINE
CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ
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
ファイルサイズを最適化する無料サービス「Online Image Optimizer」
そもそも画像フォーマットでネットで使われる代表的なものは「GIF」「JPEG」「PNG」の3種類なわけですが、それぞれ特性があるわけで。何も考えずなんでもかんでもJPEGにするのは考え物です。 まず一般的にべた塗りのアニメみたいな画像であれば「GIF」か「PNG」が最適。GIFは256色まで、PNGはフルカラーで利用可能。例えばソフトウェアのスクリーンショットの場合、GIFかPNGの方がキレイです。また、いずれも減色するとファイルサイズがどんどん落ちていきます。なので、白黒2色の画像の場合は巨大な画像であってもファイルサイズは極端に小さくなったりします。 次、JPEGの場合は一般的に写真のような画像に最適。画像を間引く感じで圧縮するのでべた塗り画像だとにじんだりノイズが出てきたりします。JPEGのファイルサイズを小さくするには、圧縮する割合を増やすか、あるいは画像全体を適度にぼかすと効果的
Photoshop級のフリーなフォトレタッチソフト「Portable GIMP」 - GIGAZINE
Adobe Photoshopと言えば泣く子も黙ってまた泣き出してそのまま号泣するというくらいに超有名なプロフェッショナル御用達のフォトレタッチソフト（写真や画像を加工するソフト）なわけですが、問題点は高いこと。大体10万円ほどします。だがしかし、そんな10万円クラスのソフトと同じような基本機能を持ったフリーソフトが存在するわけです。その名は「GIMP」（じんぷ）。そのGIMPをUSBメモリなどで持ち歩けるようにしたのが今回の「Portable GIMP」というわけ。 Portable GIMP | PortableApps.com 使い方の日本語マニュアルはこちらから http://www.geocities.jp/gimpfile/gum_jp/content.html 実際にこういう感じの凝ったロゴとかがサクサク作れます。 NET_SHOOTER [GIMP]
いろいろなフィルム効果を施すPhotoshop用プラグイン「PixelSampler」
手持ちの写真にいろいろなフィルムエフェクトを施すことができる無償のプラグイン集です。Photoshop用だけでなく、これ単体でも実行可能ですので、Photoshopを持っていなくても利用できます。 収録されているのは「Black and White」「Contrasting Levels」「Duotone」「Starlight」「Starpoint」「Grain」「Monotone」「Tonal Streak」「Warm Cool」の9種類。どれもこれもシンプルですが既存の写真を簡単かつお手軽にいかにもそれっぽくすることができます。かなり便利です。 詳細は以下の通り。 PixelSampler Details ダウンロードは以下から。Windows版とMac版があります。右下にあるPixelSamplerからダウンロード可能。 TwistingPixels 体験版ダウンロード 「Black
GIGAZINE - Photoshopに膨大な量のリソースを追加する「22Pixels Flock」
153種類のフォント、100種類以上のブラシ、14種類のカスタムシェイプ、17種類のスタイル、30種類のテクスチャ、アイコン形式のフォーマット、プラグイン1つ、さらに7000種類ぐらいの各種プリセットが無料で一気にインストールされます。 22Pixels Flock - Reviews and free downloads at Download.com http://www.download.com/22Pixels-Flock/3000-2192_4-10504543.html ファイルサイズは88.4MB、フルインストールするには153MB必要。これひとつでかなりいろいろできるようになりますね……。 Macintoshの方は中身だけを抽出したこちらをダウンロードすればいいかも。 http://rapidshare.de/files/19238330/22Pixels_Flock_ju
Photoshopのウェブアプリ版、無料で半年以内にリリース予定
あのアドビの定番画像編集ソフトウェア「Photoshop」が無料で提供されるかも知れないということで大騒ぎになりつつあります。アドビストアにおける現在の最新バージョン「Photoshop CS2」のお値段は税込み10万800円。これが無料、しかもネット経由で利用可能になるかもしれないとはどういうことなのでしょうか？ 詳細は以下の通り。 Scoop: Adobe to offer Web-based Photoshop | Webware : Cool web apps for everyone AdobeのCEOであるBruce ChizenがCNET News.comのシニアライターであるMartin LaMonicaとの会話で明かしたところによると、6ヶ月以内にウェブバージョンのフォトショップ、言うなれば「Photoshop Online」とでも言うべきバージョンをリリース予定だそうで
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
統一された色彩を自動的に作るサイト「EasyRGB」 - GIGAZINE
奇抜で独創的な色の組み合わせではなく、あくまでも統一された色彩を作りたい場合に非常に便利。いわゆる色見本帳を見ながら行う一種の「カラーハーモニクス」をウェブサイト上で簡単に実現できます。 EasyRGB - Color harmonies, complements and themes. http://www.easyrgb.com/harmonies.php 例えばR:255、G:171、B:32と入力して「Start」をクリックすれば、自動的に入力した色と色彩的にあまり違和感のない統一された他の色の組み合わせを表示してくれます。RGBの範囲も指定できるので、あまりにもかけ離れた色は使いたくないという場合でも柔軟に対応が可能。 さらに便利なのがこちらのカラーマッチング。 EasyRGB - Match your RGB and color data with paint, inks, c
ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配
無料でドメイン名が取得でき、サイトが構築できる「Office Live Beta」 - GIGAZINE
無料でcom, net, orgのいずれかのドメインが一つ無料で登録できます。1年目だけ無料とかそういうのではなく、サービスを利用し続ける限りは毎年マイクロソフトが代わりにドメイン代金を支払ってくれます。サービスを途中でやめた場合はそのドメイン名は自分のものになります。その場合は自分で払うことに当然なりますが…。また、自分の持っているドメインを持ち込むことも可能です。なお、有償でJPドメインも利用可能。 で、これは一体どういうサービスかというと、個人事業主とか小規模事業所向きのオンラインサービスで、無料版の「Microsoft Office Live Basics Beta」の場合、独自ドメイン1つ・電子メールアカウント25個（1カウントの容量は2GB）・Webサイトホスティング（容量500MB）・Web デザインツール（AJAXを使っているとのこと）・トラフィックレポートツール・データバ
フォトレタッチ・ビフォーアフター - GIGAZINE
雑誌やパンフレットなどの画像は加工されているというのはわかっていてもどれぐらいまでフォトレタッチされているのか？というのはまた別問題。というわけで、加工後と加工前を見比べて、昨今のフォトレタッチの実態に驚愕してみましょう。しみ、しわ、胸の大きさ、ウエストの細さ、なんでもレタッチして美しく仕上げます。 衝撃の展開必須の各種フォトレタッチ済み画像比較サイトは以下から。一応簡単なフォトレタッチ方法の解説もあります。 例その1、ブロンド美女。マウスを上に載せると本当の姿が浮き彫りに http://homepage.mac.com/gapodaca/digital/blonde/blonde1.html アップにするとさらによくわかる。 http://homepage.mac.com/gapodaca/digital/blonde/blonde2.html http://homepage.mac.c
無料でダウンロードして利用できるBGMや音楽ファイルあれこれまとめ - GIGAZINE
Flash作成、ポッドキャスト、自作ムービーなどなどで合法的に利用できる無料の音楽ファイルを集めてみました。 完全にロイヤリティフリーなものから、「クリエイティブ・コモンズ」ライセンスのものまでいろいろあります。商用利用を許可しているモノもあるので、仕事で困ったときなどにも便利。無料で使えるからと言ってレベルが低いなんて事はありません。 リストは以下から。 Diesel-U-Music（むちゃくちゃハイクオリティな曲が2006年5月10日から毎週追加されています、レベル高すぎ） Dance-Industries - Copyleft MP3 music the right way!（各種コピーレフトを指示するアーティストの曲があります） Hits - CC Hits（投票形式でいい曲が並んでます、かなり使えるかっこいい曲が多い。ボーカル付きもあり、クオリティが高い） Welcome to
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptは使わずCSSだけで作られたイメージギャラリー - GIGAZINE
CSSでチェックボックスとラジオボタンをスタイリッシュに
