Little BoxesですごくシンプルなCSSを公開されています。

ベースレイアウトのお手本にするといいかもしれません。ここのところテンプレート集ってあんんまり探してないんですけど、シンプルなものは知っておくと便利ですよね。

私自身は2カラム、3カラムのものは自分で使いやすいのをテンプレート化してしまっているので、あまり他のテンプレートを使うことがないのですが、人によってCSSの組み方もいろいろあるので勉強になります。

マウスオーバーしたときに画像が入れ替わるロールオーバー効果って昔はJavascriptを使っていたことが多かったけど、最近ではCSSでその効果を演出することは当たり前になってきてますよね。

CSSによるロールオーバー効果っていうのもいろいろと格好いいものが多くてそのスクリプトも公開されていますが、今回のはちょっと変わってて格好いいです。久しぶりにあれこれ触ってサンプルまで作ってしまいました。

Advanced CSS Menu Trick - Web Design Marketing Podcast & Blog

普通、マウスオーバーした画像だけを入れ替えるのですが、このスクリプトはマウスオーバーしている以外の部分の画像も入れ替えてしまいます。マウスオーバーされているところが、クローズアップされていてナビゲーションとしてもとてもいいんじゃないでしょうか？

コーディングコンテスト Vol.1 ～Coder's High～なるものが開催されていると知り、CSS HappyLifeさんのところへいって早速課題をDLさせてもらいました。しかも、CSS Nite LP, Disk 3との連動企画とのこと。審査員の顔ぶれも本屋さんでお名前を見かけるような豪華陣です。

課題のデータを見て驚きましたね。すっごい素敵なデザインではございませんか、大盤振る舞いですよこれは。こんな素敵なデザインをコーディングさせてもらえるなんてめったとないことなのでウキウキワクワク。コーディングの基礎自体まともに勉強したわけでもないけど、これまで独学で学んだことがどこまで通用するのか試してみたくて取り掛かったものの、やっぱ難しいです。

先週末、データをダウンロードしたおかげで、週末3日間一睡もできず。仕事でもないから別に根をつめてやらなくてもと思いつつも、パソコン落として布団に入ったとたん閃いた！の連続で結局眠ることなしに仕事に行く羽目に。。。好きなことってやめられないや。

スタイルシートを使ったメニューのサンプルを公開されています。シンプルなものからJavascriptを使った少し変わったものまでダウンロードもできます。

roScripts-8 web menus you just can't miss

Example6はIE7.0で動作確認できましたが、IE6.0ではダメでした。Mac風味のExample7はIEでは全くダメでFireFoxでなら動作します。せっかくなのに使えないのがかなり残念です。

｢CSSFｌｙ｣は気になるサイトの,html構造とcssを自動で書き出してくれるサイト。結構使えるかもしれない。これまでソース表示をさせてcssのURLを見つけてブラウザで表示させてたりしてたけど、これを使えば一度に両方確認できる。

｢Faux Column CSS Layouts｣ではシンプルなスタイルシートを使ったレイアウトのテンプレートをフリーでダウンロードできます。ベーステンプレートとして使うのにも最適です。

スタイルシートは制作者によってクセがでることもあり、人の作ったテンプレートは使いにくいことが多いのですが、このテンプレートは非常にわかりやすいです。スタイルシートの書き方はもちろん、.htmlファイルにもコメント書きがあるのでわかりやすいです。海外はこういったベーステンプレートの無料配布が多いので助かります。

その名の通り、CSSデザインのテンプレートを無料で提供してくれているサイトです。非常にきれいなデザインが多く、そのまま使用するもよし、ソースを見て自分自身のデザインの参考にするもよしです。

もちろん、CSS+XHTMLでValidされています。

Open Source Templates