440design

CSSがテーマの面白いTシャツ

440 — Fri, 25 Jan 2008 21:18:41 +0900

9 Awesome CSS Themed T-Shirts

CSS-Tricksさんの2007年のまとめ記事で知ったCSSがテーマのTシャツ9選。こういうのってたまらなく好きです。CSS-Tricksさんでは3番目に人気の記事だったそうですので、私のような人が多いんだろうなあ。

もしかして実際に欲しい方もおられるかもしれないので、わかるものは値段もつけておきました。タイトルクリックでショップに飛びます。

‘Styled’ Black T-Shirt $21.99

CSS Sucks $24.99
これが一番欲しい。tdなのが素敵。

IE bugs me $19.49

Geeks have no style
これはもう売ってないみたいです。

Semanticist $24
私はサイト作りに関してもうちょっとSemanticにならないといけないのでこれはまだ着れない…。

No Comment $14.99 - $16.99
Think Geekは面白いグッズがたくさんあるので見てるだけで楽しいです。

I’m only here because my server is down T-Shirt $14.95 - $16.95
これは特にCSSとは関係ないですね。

-9999px;
こちらは売り切れ…。

Panic $19
これはちょっと面白さがわからなかったんですが、わかる人いたら教えてください。

使えるCSSテクニック101選 part2

440 — Fri, 25 Jan 2008 00:08:07 +0900

101 CSS Techniques Of All Time- Part2

Noupeさんのポストより、前回part1と同じく、便利なCSSのテクニックをいくつかご紹介します。サンプルが違うページにある場合はそのページへのリンクも付けてみましたので、どうぞ。

ブロックごと選択できるリンク

Block Hover Effect Links

インタラクティブデザインの基本原則のひとつが、リンクの場合クリックできる場所が大きければ大きいほど使いやすいということ。たとえばナビゲーションバーでも、クリックできるところはできるかぎり大きい方が良いですよね。テキストだけでなく、ブロック全体をクリックできるようにするテクニックです。

リンクのリストにblock hover効果を適応する方法
How to Create a Block Hover Effect for a List of Links
サンプル

クリックできる範囲をより広くする方法
How To Make Clickable Areas Bigger

ブロック要素のための”a”タグ
Anchor Tags for Block Elements
サンプル
A~Zのインデックスのスタイリング

Style an A to Z Index

A〜Z（日本語なら「あ」〜「を」？）などの長いインデックスを見やすく整理するテクニックです。

CSSでAtoZのインデックスをスタイリングする方法
How to Style an A to Z Index with CSS
サンプル
タイポグラフィテクニック

Typography Techniques

フォント・タイポグラフィに関するテクニックです。文字を雑誌のように格好良くスタイリングしたいときに。

雑誌スタイルの秘密ほか
Secrets of Magazine Style

CSSフォント・タイポグラフィ
CSS Fonts, CSS Typography
フォント関系のテクニックへのリンク集です。
CSSでページネーション

CSS Pagination

ページネーションの見せ方テクニック。

CSSページネーションリンク
CSS Pagination Links

ページネーションの基本
Pagination 101
サンプルやコードはなし。ページネーションの基本について、具体例を挙げて解説しています。

ページネーションのためのスタイル
Some styles for your pagination
たくさんのサンプルがあって、全部CSSがダウンロードできます。
CSSタブインターフェイス

CSS Tabs

タブインターフェイスを使うと、ひとつのウィンドウでいくつものコンテンツを表示できます。Ajaxベースで即読み込まれるのも良いですね。

横長CSSメニュー
Horizontal CSS Menus
背景画像を使って選択されたタブが「光る」ような効果を出しています。

CSSとDOMスクリプトを使ったタブナビゲーション
Navigation tabs with CSS and DOMscripting
上のページそのものがサンプルになってます。CSS、.js、サンプルページがダウンロードできますが、商用利用したいときは一声かけてください、とのことです。

タブコントロール
Control.Tabs
ページ右上のボタンで.jsをダウンロードできます。
CSSでリード文を飾る

CSS Pullquotes

Pullquoteとは本文から一部抜粋したリード文のことです。通常雑誌や新聞などで見かけるデザインですが、CSSを使ってWebでも同様のスタイルに。

シンプルなCSS引用文
Simple CSS Blockquotes and Pullquotes
通常の引用文（blockquote）と抜粋リード文（pullquote）について。シンプルなデザイン。

CSSリード文
CSS Pull Quotes
こちらもシンプル。

javascriptとCSSを使った自動リード文
Automatic pullquotes with JavaScript and CSS
本文中ので囲んだ部分をjavascriptで自動的に取り出して表示する方法。スクリプトのダウンロードもできます。
CSSで引用文を飾る

CSS Blockquote

ブロッククォートのスタイリング。通常他のサイトや記事から引用するときに使われます。

引用文について
Quotations and citations: quoting text
inlineでことたりるような短い引用文（qを使用）から長い文章の引用（blockquote）まで。

画像なしでできる「しゅっ、くるん」な引用スタイル
Swooshy Curly Quotes Without Images
「しゅっ、くるん」…苦しい訳ですいません。画像を使わない、きれいなブロッククォートの見せ方を丁寧に紹介しています。

CSSを使った引用文のスタイリング
Styling blockquotes with CSS
画像の引用符を使ったブロッククォート
Blockquotes with Image Quotes
上の二つは画像を使う方法です。
スターレーティング（評価）テクニック

Star Rater Techniques

星が5つくらいある簡単な評価システム、最近youtube他あちこちで見かけますよね。

CSSスターレーティング
CSS Star Rate Redux
サンプルページとCSS、画像がダウンロードできます。

CSSレーティングセレクタ
CSS Ratings Selector

スターボックス
Starbox
CSSと.js、画像がダウンロードできます。他にprototype.jsが必要。

Ajax　スターレーティングバー
Unobtrusive AJAX Star Rating Bar
CSS、.js、.phpと画像がダウンロードできます。
CSSイメージポップアップ

CSS Image Pop-Up

CSSだけで画像のポップアップを実現するテクニックいろいろ。

クールなCSSイメージポップアップ
Cool CSS Image Pop-up

CSSポップアップイメージビューワー
CSS Popup Image Viewer

インラインのリンクにポップアップイメージを
Pop-up images on inline links
文章中のリンクにマウスオーバーでサムネイル画像を表示する方法。snapみたいな感じですね。商用に利用するときは寄付してもらえると嬉しいな、とのこと。

Hoverbox Image Gallery
サンプル
サンプル等ダウンロードできます。いわく、「ミニlightbox」。でもjavascriptは不要です。
CSSサイトマップ

CSS Sitemaps

CSSでサイトマップをきれいに見せるテクニック。ただ羅列するよりずっと見やすくなりますね。

破線を使った階層式サイトマップ
Hierarchical Sitemap with Dashed Lines
サンプル

サイトマップスタイラー：CSSとjavascriptでサイトマップをスタイリング
Sitemap Styler: Style your Sitemaps with CSS and Javascript
サンプル1
サンプル2
サンプル3
クリックで下の階層を表示するタイプ。javascript使用。上のサンプル全部のダウンロードができます。個人的にはクリックするまで下の階層があるのがわかりにくい、テキストのクリックが効かない等、あまりユーザビリティに優れてはいないように思います。

サイトマップを整えよう
Spruced-Up Site Maps
サンプル
こちらも上と同じようなタイプですが、ずっとわかりやすいです。

サイトマップセレブレーション
Sitemap Celebration
シンプル・クリーンなサイトマップ。

CSSサイトマップ
CSS Sitemap
サンプル（バニラ）
サンプル（チョコレート）
jQuery使用。たたんだり広げたりできるサイトマップです。本筋と全く菅家ないんですが、サンプルに「バニラ」とかちょっと可愛いくていいな、と思いました。
縦・横のセンタリングテクニック

Horizontal and Vertical Centering

CSSで縦方向にセンタリング
Vertical Centering in CSS
サンプル
ネストされたdivで実現しています。

CSSで縦・横どちらもセンタリング
Horizontal and vertical centering with CSS
ウィンドウのサイズを変えても、要素を常にど真ん中に配置。

縦・横センタリング
Horizontal And Vertical Centering
サンプル
上と同様、ど真ん中に。

CSSで縦方向にセンタリングする方法
How to: vertical centering with CSS

[part1]使えるCSSテクニック101選 part1

[記事タイトルについて] 前回Part1に追記したように、実は101コのTipsというわけではなくて「101」というのが「ベーシックな」という意味があるそうで（知らなかったorz）、実のところ「101選」じゃないんですが、前回と今回で結局リンクが100コ近くあるのと、part1と同じタイトルにしたかったので、あえて「101選」にしました。ご了承ください。

ウェブデザインに役立つフリーのIE用アドオン Best3

440 — Tue, 22 Jan 2008 21:51:10 +0900

The best free web development add-ons for IE 6 and 7

Dustin Brewerさんのポストより、IEで使えるウェブデベロッパーのためのアドオンをご紹介。

Internet Explorer Developer Toolbar(IE6/IE7)

Firefoxの「Web Developer」と同じような機能をIEで実現するツールバー。Dustinさんが探した無料のアドオンでは一番多機能だそうです。各エレメントをチェックしたり、ソースを見たり、Divやオブジェクトのアウトライン表示、CSSやjavascriptを無効にすること等々が可能。ルーラーやカラーピッカーもついてます。早速インストールしてみましたが、これはホントに使えそう。

The DebugBar(IE6/IE7)

CSSやjavascriptの開発に役立つ手軽なアドオン。CSSの編集もある程度ですができるみたいです。また、DOMスクリプティングに役立つオプションが多数。

Aardvark(IE7 Firefox Safari)

こちらはアドオンではなくてブックマークレット。各要素にマウスオーバーするとアウトライン表示してくれて、id名やclass名も教えてくれます。

本記事では他にIE7 Proも紹介されてましたが、こちらは特にデザインや開発に特化しているわけではないようなので、割愛します。
他にもよいアドオンをご存じだったら教えてくださいね。

CSSハックなし! 究極のマルチカラムリキッドレイアウト

440 — Mon, 21 Jan 2008 22:33:28 +0900

Ultimate multi-column liquid layouts

すばらしいCSSテンプレートを発見したのでご紹介。

Matthew James Taylorさんのブログより「究極のリキッドレイアウトテンプレート」。これはホントにすごい。なぜ究極かというと…

■CSSハックなし！

IE用のコンディショナルコメント処理が一行だけ必要ですが、100%正しい（W3CのCSS Validatorで正当と判断される）CSSで書かれています。しかもモダンブラウザだけでなくIEでもちゃんと動作(IEで問題になりがちな横方向のpaddingやmarginを使ってないため）。

■正しいHTML構文

デモページのマークアップはW3CのMarkup Validatorで正当と判断されています(XHTML1.0 strict)。

■SEOフレンドリー

サーチエンジンはHTMLで上に記述されているものほど重要と見なすので、サイドバー等はメインのコンテンツの下に記述、CSSで位置を変えています。

■高さが揃ったカラム

それぞれのカラムの内容量がたとえ極端に違っても、同じ高さに揃ったカラムを実現。

■画像やjavascriptは使用しない

カラムの高さを揃えるためだけに、本来必要のない画像やスクリプトを使用する必要はありません。javascriptも全く使用していないので、offにされている環境でも大丈夫。

■テキストのリサイズにも対応

テキストを拡大してもレイアウトが崩れません。

■モダンブラウザだけでなくIEでもちゃんと表示

確認できている対応ブラウザは以下。

Windows: Firefox 1.5 & 2; Safari; Opera 8.1 & 9; Explorer 5.5, 6 & 7; Netscape 8
Mac: Firefox; Safari; Opera; Netscape
iPhone & iPod Touch: Safari

■無料！

デモページのCSSとHTMLをコピーして自由に使って良いそうです（ただし、CSSは外部ファイルにするよう勧めておられます）。リンクを貼ってくれると嬉しいなとのことですが必須ではありません。使用した場合はMattさんに連絡すれば、サンプルサイトのリストに加えてくれるそうです。

昨日公開されたときには、ウィンドウ幅を極端に小さくするとレイアウトが崩れてしまってましたが、Mattさんにメールしてみたらすぐに修正してくれました。なんていい人なんだ…。

というわけで以下がサンプルページです。divの図解等もあって、とてもわかりやすいですよ。それぞれサイドバーのサイズが可変のパーセンテージ版と、固定のem版、ピクセル版があります。

万が一なにか動作がおかしい等を見つけられたら、作者のMattさんに教えてあげてください。私に連絡くださっても結構です。

すばらしいテンプレートをシェアしてくださったMattさんに感謝！

ひとりごと: 風邪ひいて頭が割れるように痛い…。ほぼ一日寝てました。ブログも休もうと思ったんですが、せっかくMattさんが速攻で対応してくださったので根性でアップ。みなさん風邪には気をつけてくださいね〜。

脱Web2.0! グランジなサイトデザイン 20選

440 — Mon, 21 Jan 2008 04:07:53 +0900

Web2.0っぽいサイトデザインといえば、グラデーション、ガラスっぽいボタン、床？に反射する画像、バッジなどなど、クリーンで清潔なイメージですが、さすがにそんなサイトが増えすぎてきた気がする今日この頃。最近海外サイトでよく話題にのぼるデザインの傾向がふたつあるように思います。

ひとつはミニマルですっきりとしたデザイン。ホワイトスペースを生かしたベーシックなサイトが増えてきているようです。もうひとつは、それとは正反対のグランジっぽいデザイン。テクスチャや汚れ、かすれたような効果などを使ったリッチなビジュアルです。今回は後者についてまとめてみました。

Snap2ObjectsのmaoさんはHow to Destroy the Web 2.0 look（いかにWeb2.0っぽいデザインを破壊するか）で、「Ｗeb2.0なデザインは確かにクリーンでこざっぱりとしてるけど、人気がですぎて、もはや個性がない。クローンされた無菌っぽい今のデザインに対する答えがこれだ」として、グランジなサイトを多数紹介しています。

また、Modern LifeのStuartさんは More Web design Trends and Cliches(ウェブデザインのトレンドとありがちな表現）で、今のウェブデザインの6つの傾向を示しています（「ありがちな表現」というのは皮肉であって、1年後にはこれらも古びてるだろうからね、とのこと）。話題になった記事なのでご存じの方も多いかと思いますが、以下彼の指摘する新しい「トレンド」。