cssの情報・まとめ - かちびと.net

cssの情報まとめです。ローカル
環境にストックしていた情報を
開放してみますのでシェアして
頂ければ幸いです。内容は
結構偏っていると思いますので
参考程度になさってください。

全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。

ツール

オンラインのcssツール。

CSS Validation Service / W3C検証サービス日本語版
RoundedCornr / 角丸のHTML・CSSコードを生成してくれる
CSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認
CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できる
CSS Builder / オンラインでスタイルを生成可能
Spiffy Box / cssによる角丸を簡単に生成
The Box Office / 画像の周りを無駄なくテキスト配置
Typechart / 視認性を確認して気にいったテキストのcssをコピペ
CSS Sprit.es / cssストライプジェネレーター
CSS3 Generator / css3対応のジェネレーター
CSS3 Gradient Generator / CSS3のグラデーションを作成するジェネレーター

最適化

いろいろ最適化。このブログも無駄ありそうです。

CSS Compressor / 無駄の多いCSSを高圧縮
ie6fixer / 自動でIE6対応にするオンラインサービス
CSS Organizer / 綺麗に見やすくしてくれる
Online CSS Optimizer / cssをオンラインで最適化してくれる
CSS SuperScrub / 無駄なcssの要素を省いて軽量化
CSS Redundancy Checker / 未使用セレクタを教えてくれる
CSS Sprite Generator / 複数の画像を一つにまとめる事で表示スピードアップ
CSS最適化ツール / 国産の最適化ツール
css minify / 国産のcss圧縮ツール。js版もあり

レイアウト関連

グリッドとか枠組みとかを作れるやつ。

CSS frame generator / XHTMLからcssの枠組みを作ってくれる
The 1Kb CSS Grid / 複雑なCSSレイアウトをウェブ上で簡単に作成できる
YAML Builder / マルチカラムデザインを用意に実装
Drawter / CSSレイアウトに対応したサイト製作ツール
Column Layout Generator / 直感的に、レイアウトの枠組みのcssを作成
Blueprint Grid CSS Generator / グリッド幅、数等を指定してcssを自動生成
nP: Grid Generator / グリッドを作成して、cssのソースをコピペ
Primer / HTMLからcss作成

日本国産

嬉しい国産ジェネレータ。

CSS3ジェネレーター / 直感で操作可能なCSS3ジェネレーター
CSS generator / 最初にcssのテンプレートを選択
たぬきのしっぽ / HTMLを入れてからcssを編集
cssez / 各ブログサービス等のcssを作る。WP、MTも。
CSS Maker / 選択してプレビューで確認という流れ
CSSツールラボ / 良く使うスタイルをサクッと作成
CSS Ganerator / 高機能。それなりに分かる人向け
テーブル用CSS設定ツール / テーブル用cssジェネレーター

拡張とか

ブラウザのとかブックマークレットとか便利ツール。

Firebug / chromeもfirefoxもあります。リンク先はfirefox。
Web Developer / Fxアドオン。これ1つ使いこなせれば十分過ぎる。
CSSViewer / Fxアドオン。ページのプロパティを表示
EditCSS / エディタを加えるFxアドオン。速攻反映
googlechrome / 標準デバッグ。ctrl+shift+iか、右クリ→要素検証
Opera Dragonfly / Operaのデバッグツール。かなり良いらしい
Xray / これないときつい。使いやすいブックマークレット
SelectorGadge / セレクタを書くためのブックマークレット
SpriteMe / cssスプライト対応にしてくれるブックマークレット
YAML Debug / cssデバッグブックマークレット

メニュー

ツール

オンラインサービスでらくらくメニュー作り。

CSS Menu Builder / 横、縦、パンくずと3種類の中から選択可能
IzzyMenu.com / スタイリッシュなcssメニューを簡単生成
CSSMenuMaker / cssメニューを作成できる。日本語も入力可
CSS Portal / サンプルから選択してタブメニューを生成
My CSS Menu / 手軽に汎用性の高いメニューを作成
Pure CSS Menu / ドロップダウンメニューを簡単生成、IE6対応

ダウンロード可

+jsは含めてません。機会があれば別の記事で。

Vimeo-like top navigation / 検索窓とドロップダウンの複合
Drop-Down Menu Framework / 6種。FlickrやMTVなどのメニューを実現
Digg Header / Diggのメニューを実現したcss
Matte CSS Menu / 視認性の高いシンプルなメニュー
CSS Sliding Door / 画像を1つだけ使った可愛いメニュー
Navigation Matrix Reloaded / クール＆シンプルなタブメニュー
Free Menu Designs / 汎用性の高いcssメニュー
Woody Css Menu / ナチュラルな手書きデザインメニュー
Advanced CSS Menu / こちらも可愛い手書き風メニュー
Jungle CSS Menu / リンク先の説明の入ったメニューサンプル
Professional / クールなグラス風メニューいろいろ
DKIRを応用した画像ボタンのロールオーバー

サンプル

サンプルですので使うにはソースを見ないとですね。

Multi level dropdown / ハック無しで、不透明パネルをドロップダウン
dropdown menus with CSS only / cssのみでドロップメニュー
beautifully style your lists / liを使ったテクニック集

テクニック

日本語で書かれ、且つソースも書かれている記事のみ

IEでも実装出来るテクニック

記事内に「IE対応」と書いてるテクニックのみなので他の記事でもIE対応のもあります

CSS3

いろいろ話題ですのでそろそろチェックしておくと良いですね。

まとめ

まとめ記事。紹介やコードを記述してくれている記事などなど。

ハック

当然ですけどIE中心です。

ソフトウェア

css関連のソフトウェア。それほど必要性は感じませんが、一応。。

Astyle / 一定のセレクタを選択するcssエディタソフト
TopStyle / W3Cチェックも可能なcssエディタソフト
Free CSS Toolbox / シンプルなcssエディタソフト
Jellyfish-CSS / Mac用のcssエディタソフト
snap{css} / オープンソースのcssエディタソフト
Simple CSS / Mac用のシンプルなcssエディタソフト
Tonttu / cssスプライトを作成するAirアプリ。国産
CSS [vector] / vectorのcss、html、jsツール一覧

ブログ・参考サイト

cssを中心としたブログやサンプル紹介サイトなど。上級者向けのサイトも。

css eblog / 一番好きなブログ。ソース、デモ、DLファイルを提供。
css happylife / cssの役立つ情報満載
CSS HappyLife ZERO / cssの総合まとめサイト
css-lecture / cssのテクニックなどを分かりやすく
Cascading Style Sheets / cssのタグの付いた記事を集約
CSSplay / 海外。尋常じゃないテクニックのサンプル集
designcatalog / cssデザインの実用的な実装サンプルがまとまってる
CSS Library / サンプルコードが山のように。css3も追加された
CSS TIPS / 日本のTipsサイト。分かりやすいし見やすい

リファレンス・チートシート

cssの基礎やカンペ。多すぎるので一部に絞っています。

cssチートシート / PDFで出来たチートシート
CSS Properties Index / CSS1, CSS2, CSS2.1, CSS3の対応プロパティカンペ
CSS Cheat Sheet Wallpaper / 壁紙に出来るチートシート
Visual Cheat Sheet / IE6~8で異なる対応状況をCSS2.1, CSS3ごとに
cssリファレンス / 国内のリファレンスサイト
CSSレイアウト実践講座 / 国内リファレンスサイト。見やすい
CSS 3 / css3のクイックリファレンス

HTML+cssテンプレート配布

フリーで配布されるテンプレート。著作権にはご注意。

Free CSS Templates / シンプルなテンプレからハイクオリティなものまで
FreeCSSTemplates.org / フリーXHTMLテンプレートが400個以上
Free CSS .com / 有料と無料。クオリティの高いテンプレやナビ
templateworld / 数は少ないけど使いやすいテンプレが多い
templatemo / 枠組みが綺麗目なテンプレ多め
csstemplatesforfree.com / 280ものテンプレートを配布
bestfreetemplates / コーポレートサイトに使えそうなレイアウト
Templates Perfect / カテゴリ分けがしっかりされてて見やすい
CssTemplatesFree.Net / やや大き目なサムネイルで探しやすい

ギャラリー

cssベースのサイトを紹介するギャラリー。これも一部。探すならGALLERY GALLERYが便利

CSSBased / 好きなデザインが多い
CSS Beauty / スキルのシェアもしてるギャラリー
CSSclip / かなり見やすく日本サイトも豊富で色分けもされてる
CSS Collection / 少し偏ってるけど大量にストック
CSSElite / クオリティの高めなサイト多し
CSS Import / スッキリしていて見てて疲れない

その他

そのほか、お役立ち記事いろいろ。

initial_value.css / 各プロパティの値を初期値にする
CSSをお手軽にデバッグする方法 / デバックを楽にする
Free Comment Styles / DL可能な「コメント」のスタイルテンプレート
LESS / 変数を使用してcssの記述ルールを拡張
Writing Better CSS / cssを書くのを楽にする10のTips
CSS 基準文字サイズ（px）ごとの相対フォントサイズまとめ
IE6、IE7、IE8におけるCSSの違いまとめ
どんな画像もCDのアルバム風にできるCSSテクニック
Conditional-CSS / cssで条件(if)を使う
真相究明！ CSS都市伝説 / cssの基礎知識と間違った解釈
github cssc.git / スプライト作成、ネスト、変数ツール

cssちゃんと勉強しなきゃ。。逃げてちゃダメですね。

ツール

最適化