1ページだけのウェブサイトって最近たまに見ますね。ここではそんなシングルページのクールなサイトを紹介してます。シングルページとは言っても、実際にはJavascriptを使ってタブ切り替えやスライド、アコーディオンなどの見せ方で、数ページ分のコンテンツがあったりします。JSがメジャーになった事で、コンテンツの見せ方も多様化したといったところでしょうか。

30+ Inspirational and Creative Single Page Website Designs

ウェブ制作において、デザインを起こす際にフォトショップを使う人は多いと思います。この記事では、作例を用意してそこに至るまでのフォトショップチュートリアルが紹介されてます。各リンク先のチュートリアルそのものも興味深いんだけど、単純にウェブデザインのネタ帳としてもなかなか使えます。いいアイデアを求めてる時なんかに良さそうです。

20 High Quality Photoshop Web Design Tutorials

CSSに関するトリックやTipsをまとめた記事。もちろん時期的にCSS3に関する内容も含まれます。縦方向のセンタリング、ショートハンド記述、角丸、IEハック、ベースフォントサイズの指定、縦方向100％、リンククリック時の点線の消去、CSSリセット、透明化、ClassとIDの優劣、テキストのイメージ置換、印刷時のページ切り替えなどがその内容の一部。CSSを使ったウェブ制作が当たり前になってきた今、ちょっと突っ込んだコーディングができると現場で重宝されそうです。

47 CSS Tips & Tricks To Take Your Site To The Next Level

CSS3を使って表現する、ちょっと進んだナビゲーションメニューのまとめ記事。動きを使って表現するもの、丸角やグラデーションを使って画像なしで作ったもの、ドロップダウン、奥行きを持たせたメニュー表現などがあります。こうして見ると、CSS3を使う事で今まで表現するのが難しかった事がわりと簡単にできるようになるので、今後凝ったナビゲーションとか色々出てきそうです。

15 CSS3 Navigation and Menu Tutorials and Techniques

CSS3で描画するOperaロゴ。これなかなか興味深いです。CSS3の新要素として、角丸ボーダー、グラデーション、ボックスシャドウの3つを使って描画に挑戦。出来上がったソースを各種ブラウザで表示してみるとこうなるYO、という一覧付きです。ちなみにSafariのWebkit環境では問題なく表示できました。けどOperaは微妙ですね。IEについては何も言うまい、といったところでしょうかｗ

Opera Logo with CSS

CSS3を使って表現する、各種ソーシャルメディアのアイコン。興味深いのが、これらのアイコンがCSS記述だけで表現されている点で、画像は1点も使ってません。デモサイトはこちら。ただしどのモダンブラウザでもオッケーというわけではなく、Safariでは角丸の表現が欠けており、またFirefox3.5ではグラデーションがうまく表示されませんでした。Firefox3.6環境で初めて作例のように表示されます。CSS3を思いっきり使った表現が、まだまだ実用的でない事が分かる作例です。けどFlickrやDeliciousのアイコンとかなかなか気合いが入ってます。

Create Social Media Icons in Pure CSS

トランジションがモザイク状に行われるスライダー。通常これ系の動きって、横にスライドするんだけど、これはボックスエリア内を複数のパーツに分けてモザイク状に切り替わります。なかなか手が込んでます。他とはちょっと違うスライドの見せ方をしたい時に使えそうです。ちなみに中身の画像ファイル自体は、特別切り刻んだりする必要はないようです。

Making a Mosaic Slideshow With jQuery & CSS

もいっちょJSガラみの記事。Ajaxフォームのまとめ記事です。Ajaxを使ったフォームというと、いわゆるページ遷移なしのエラー表示や入力の補完機能がメインですが、他にもパスワードの脆弱性チェッカー、フォーム装飾（パーツ置換）、アップローダーなどがあります。一手間かけたフォーム制作の際に便利なまとめ記事。

Astounding Ajax/CSS Forms: 30+ Modern Trends , Tips and Techniques

デザイナーやビギナーのためのjQueryまとめ記事。ガリガリのコーダーでなくても実装できちゃうYO！というのが趣旨のようなので、わりと導入に関しては簡単なものが紹介されてます。各リンク先ではチュートリアルも紹介されているので、JSの導入に不慣れなパイロットの方でも色々安心です。

20 Best And Highly Useful jQuery Tutorials For Designers And Beginners

テクスチャの使い方がうまいウェブサイトが50集められた記事。テクスチャ系のネタ帳となると、わりとコッテリな印象のサイトばかりかと思ったらそうでもない。シンプルで上品なデザインのサイトもいくつか紹介されてます。うまい見せ方できないかなー、って時のネタ調に是非。

50 Inspiring Textured Web Designs

フリーで配布されているウェブテンプレートのまとめ記事。どれもXHTML + CSSでコーディングされたもので、わりと最近のものばかり揃っているようです。中にはJavascriptを使ったスライド表現を行うものもあり、わりとモダンな印象。この手の記事はテンプレートそのもの以外にも、ネタ帳としてデザイナーに好まれそうです。

30 Latest High-Quality Free (X)HTML/CSS Templates Must See Now

デザインのネタ帳の宝庫とも言えるDeviantartに上がっているウェブデザインを批評してみる、という内容の記事。批評の内容についてはともかく、紹介されているデザインのどれもが相当キテます。クオリティの高いものが多く、単純にネタ帳として素晴らしく機能しそうな記事です。英語圏のデザインらしく、日本のウェブサイトと比べるとかなりコッテリ気味で、あっさりトリガラスープが好きな人には胸焼けしそうな物が多いんですが、個人的にツボったデザインが多かったのでちょっとハッピーな気持ちになりました。あ、けど俺ラーメンはトリガラが好きです。

40 Exclusively Reviewed And Criticized Deviantart Designs