cssの情報・まとめ

Ads

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

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

ツール

オンラインのcssツール。

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

最適化

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

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

レイアウト関連

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

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

日本国産

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

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

拡張とか

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

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

メニュー

ツール

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

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

ダウンロード可

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

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

サンプル

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

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

テクニック

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

  1. ちょっと凝ったパンくずリスト
  2. bodyに設定しておくと便利な5つのポイント
  3. CSSだけでフレームを作るテクニック
  4. テキストに影を付け印象的にする
  5. コンテンツのみ印刷するようにCSSで制御
  6. 文字列を省略して「・・・」を付けて表示
  7. ピンバルーンを作成するチュートリアル
  8. コンテンツとサイドバーの高さを同じにする
  9. 便箋のようなデザイン
  10. CSS のみで吹き出し
  11. テキストを画像の下に回り込ませないようにする
  12. Pure CSSな吹き出し
  13. クロスブラウザ用の不透明度の指定
  14. 一行のスタイルシートでグリッドレイアウトを実装
  15. cssのみでマウスオーバー時に噴出しも実装するナビゲーション
  16. 2行で終わるclearfix
  17. これで決まり?な画像置換 – DKIR
  18. ページ送りナビゲーションには display:inline-block が超便利
  19. CSS で table に斜線を引く方法
  20. どのブラウザでもフォントサイズを「%」で統一させる

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

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

  1. CSSだけで作れる吹き出しボックス
  2. IE6にも対応したテキストリンクをPNG画像に置換
  3. 角丸を使用しないで、四隅をすっきりみせる
  4. IE8にも対応したクロスブラウザ用の不透明度の指定方法
  5. floatを解除する「clearfix」のIE6/7に対応した改良版
  6. IE6では実現できない点線を画像を使って表現する
  7. 注目させたいリンクでカーソルを目立たせてみる
  8. IE6でもCSSのみでmax-widthを実現する
  9. 背景が透けるカラムを実装するスタイルシート
  10. li要素の装飾におけるちょっとした小技
  11. js無しでツールチップを実装Easy CSS Tooltip

CSS3

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

  1. アニメーション機能を使ったロールオーバーやフェードインの設定
  2. CSS3だけで丸いボタンを作る方法
  3. border-image を利用したボックスデザイン
  4. 変形処理「transform」の基礎
  5. -moz-border-radius
  6. border-radiusを使って角丸を作る

まとめ

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

  1. コーディングするのが楽になるかも?と思うCSSテクニックのまとめ
  2. 覚えておいて損はない CSS の定番テクニック
  3. クロスブラウザのためのCSSのテクニック10選
  4. 初心者のためのコピペできるCSSまとめ
  5. 知っておくといいかもしれないCSS、8つの小技
  6. とっても使えるoverflowプロパティ。その使い方色々。
  7. CSSグラデーションのちょっとしたテクニック #2
  8. 知っておきたい使えるCSSテクニック25
  9. CSSの実装状況で変わるボックスのデザイン方法
  10. 検索フォームを素敵なデザインするスタイルシート集
  11. リンクをデザインするCSSいろいろ
  12. CSSレイアウトが崩れている時に試す10の処方箋
  13. ちょっと使えるかもしれないCSS(1) – 見出しを飾る
  14. もう、class名やid名で悩まないんだからっ!!

ハック

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

  1. IE共通の9つのCSSバグを解決する方法
  2. IE6問題に対処する10のテクニック
  3. IE 6とIE 7のCSSハック16選
  4. IEの各Ver.だけに対応させるCSS条件指定
  5. IE6の頻出CSSバグいろいろと、ハック
  6. IE 6で泣かないための、9つのCSSハック
  7. IE6、IE7、IE8におけるCSSの違いまとめ
  8. IE6でよく遭遇する6つのバグと解決法
  9. テキストリンクをPNG画像に置換するcss
  10. 改行タグが連続で表示されないバグの原因と解消
  11. セレクトボックスにおけるマウスホイール対策
  12. float指定で発生する「余白2倍」を解決の法
  13. IE6でのXML宣言バグ対処
  14. IE6にmin-widthを疑似的に指定
  15. IE6で背景が表示されない際にチェックする事
  16. IEで表示されない!?faviconを完璧に表示
  17. モダンブラウザでも使えるCSSハック18選
  18. セレクタでのCSSハック一覧表
  19. IE7 を含むモダンブラウザ向けの CSS ハックまとめ
  20. IEで透過PNGを扱う為のまとめ

ソフトウェア

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

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

ブログ・参考サイト

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

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

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

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

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

HTML+cssテンプレート配布

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

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

ギャラリー

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

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

その他

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

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

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