[CSS] 40 Outstanding CSS Techniques And Tutorial – CSSに関する、40のチュートリアルやテクニック
CSSに関する40のチュートリアルやテクニック、という記事。CSSを使ったギャラリー、ナビゲーション、ボタンやリスト、テーブルに関する装飾、その他のエフェクトというようにカテゴリ分けされて紹介されてます。40個もあるので自分もまだザっと斜め読みした程度ですが、なかなか実用的なTipsが満載な感じですな。今度ちゃんと読んでおこっと。
Tag Archives: CSS
[CSS] The Mystery Of CSS Sprites: Techniques, Tools And Tutorials – CSSスプライトのテクニックやチュートリアル
CSSスプライトとはなんぞやから始まり、この技術を使ってるウェブサイト（AmazonやApple、YouTubeなど）の紹介、チュートリアルや便利サイトの紹介がされてます。これからCSSスプライトを使ったサイト制作を始めようという人にはちょうどイイ感じっすね。かく言う自分も、いつか使うためのサンプルソースなら組んだ事があっても、実際の仕事ではまだ書いた事ありません。というわけで有名サイトの前例にならうのもイイかもしれません。
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials >>
[WEB DESIGN] How to skin HTML form elements in seconds – サクっとフォームの見た目をカスタマイズする方法
フォームの見た目をサクっとカスタマイズする方法が2例紹介されてます。niceformsは以前にも紹介しましたが、jqTransformは知らなかった。どちらもJavascriptを使って行うカスタマイズなので、導入してるライブラリとかそのへんは若干注意が必要です。
[CSS] Variable Grid System – グリッドレイアウトのジェネレーター
グリッドのジェネレーターと言っても何のこっちゃ分かりませんね。まぁ早い話がCSSを使ってグリッドレイアウトを行う際に、基準となる最小カラムのWidth、数、溝の幅の3つを入力するだけで、CSSソースを吐き出してくれるというものです。また生成されるCSSソースは、グリッドレイアウトを行う際のCSSフレームワークとして有名な960 Grid Systemがベースになっています。簡単にグリッドのベースCSSを吐き出してくれるので、これはめっちゃ重宝しそうな感じ。久しぶりにエクセレントなサイトです。
[WEB SERVICE] Sprite Creator 1.0 – CSS Spriteのコードジェネレーター
これは便利！ CSSスプライト用のソースをはき出してくれるジェネレーター。方法は簡単で、ボタン類の画像を1枚にまとめたJPGをアップロードすると、サイト内に表示されます。あとは座標を指定したい場所をドラッグすれば、その範囲を指定するCSSが右側にリアルタイムに表示されます。あとはそのソースをコピペして使えばいいだけ。範囲指定の微調整は、キーボードの十字キーを使って1px単位で操作できます。最近じゃすっかりメジャーな技術になったCSS Sprite。ソース書き慣れた人には逆に面倒かもしれませんが、これからって人にはイイ感じのサイトなんじゃないでしょうか。
[WEB TEMPLATE] 101 High Quality CSS And XHTML Free Templates And Layouts: Part 1 – フリーの素晴らしいテンプレート
フリーで配布されている、CSS & XHTMLのウェブテンプレートまとめ。101個という数に圧倒されますが、どれもデザイン的にもコード的にも「スキルたけぇー」といった感じ。何か作る時の素体にもよし、単純にデザイニングやコーディングの勉強用にDLするもよし。他人からのフィードバックって色々とためになりますね。
101 High Quality CSS And XHTML Free Templates And Layouts: Part 1 >>
[WEB DESIGN] 11 Excellent Solutions for Creating Tooltips – エクセレントなTool Tip
エクセレントなTool Tipがまとめられた記事。各紹介は、それを実現するためのチュートリアルにリンクしてます。中でも個人的にアツいのがPanicのCodaのアレ。チュートリアルが紹介されてるので、こりゃいつか使ってやろうなんて思ってます。どれもCSSとJavascriptで作られてるので、わりと簡単に導入できそうです。いやー助かるなぁ。
[CSS] Beautiful Forms – Design, Style, & make it work with PHP & Ajax – クールで便利な入力フォーム
CSSとPHP、Ajaxなどを使って作られた、クールな入力フォームが紹介されてます。見た目だけでなく、予測入力など使い勝手の上でもエクセレントなものがあります。入力フォームって言ってみればサイト内でも地味な部分だけに、気の利いた事してくれるサイトってイイ感じですよね。
Beautiful Forms – Design, Style, & make it work with PHP & Ajax >>