[CSS]スタイルシートの実用的なテクニック集:エレメント・CSS3・Tips編
Post on:2009年8月27日
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
![Mastering CSS, Advanced Techniques and Tools](/wp-content/uploads-2009-2d/2009082703.png)
Mastering CSS, Part 2: Advanced Techniques and Tools
- 1. カレンダー・リスト・テーブル・タイムライン関連
- 2. iPhone用のテクニック
- 3. フォーム・検索関連
- 4. データの視覚化
- 5. その他有用なテクニックとTips
- 6. CSS3のテクニック
- 7. CSSのツール
- 8. 他のリソースの紹介
1. カレンダー・リスト・テーブル・タイムライン関連
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-01.png)
jQuery Sequential List
リストをスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-02.png)
Date Display Technique with Sprites
カレンダーの年を垂直表示。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-03.png)
Pure CSS Timeline
タイムライン。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-04.png)
A CSS-based Timeline
タイムライン。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-05.png)
Create astonishing iCal-like calendars with jQuery
iCal風のカレンダー。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-06.png)
Build a Calendar Using PHP, XHTML, and CSS Example
カレンダー。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-07.png)
CSS: Menu List Design
リストを値段メニュー風に。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-08.png)
Pure CSS Scrollable Table with Fixed Header
ヘッダを固定したテーブル。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-09.png)
Date Badges and Comment Bubbles
日付のスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-10.png)
Styling tables with CSS
テーブルのスタイリング。
2. iPhone用のテクニック
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-11.png)
iPhone Application UI Design Patterns
iPhoneのUIパターン。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-12.png)
Serving iPhone Specific CSS
iPhone用のCSSの設定。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-46.png)
Safari on iPhone Graphics, Media, and Visual Effects Coding How-To's
iPhoneのコーディングのリファレンス。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-13.png)
Web Development for the iPhone
開発者向けのiPhoneの情報。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-14.png)
How to Get Started with iPhone Dev
iPhone開発に役立つリソース集。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-15.png)
6 Tips to Optimize Your Website for iPhone
既存サイトをiPhone対応する6つのTips。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-16.png)
jPint
iPhoneをシミュレート。
3. フォーム・検索関連
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-17.png)
Create Custom Search Bars with Image Replacement using CSS
検索フォーム。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-18.png)
Fancy Form Design Using CSS
ユーザビリティ・デザインに優れたフォーム。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-19.png)
Theming The Search Submit Button
Submitボタンのスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-20.png)
Making Forms Convert Through Awesome Inline Labels
インラインにラベルを表示。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-21.png)
CSSG Collections: Web Forms
フォームの実装例。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-22.png)
45+ Really Essential Free HTML [Form] Enhancements
フォームのフリーのリソース集。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-23.png)
minimal form layout
ミニマルなフォームのレイアウト。
4. データの視覚化
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-24.png)
Simple CSS shiny progress bar technique
プログレスバー。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-25.png)
20+ CSS Data Visualization Techniques
データを視覚化したテクニック集。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-26.png)
Accessible Data Visualization with Web Standards
アクセシブルなグラフやチャート。
5. その他有用なテクニックやTips
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-27.png)
CSS Star Rating Part Deux
スターレイティング。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-28.png)
Two Techniques for CSS Transparency
透過処理に関するテクニック。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-29.png)
Placing a CSS background image horizontally right on an h2 using a span element
背景を右寄せにするテクニック。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-30.png)
Snazzy Pullquotes for Your Blog
プルクォートの実装例。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-31.png)
Cross-browser semi-transparent backgrounds
半透明の背景。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-32.png)
How to: CSS Large Background
大きい背景の使い方。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-33.png)
Creating Thumbnails Using the CSS Clip Property
画像をクリップしてサムネイル表示。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-34.png)
CSS image replacement for... images? It makes sense for print.
印刷対応の画像置換。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-35.png)
Text Blocks Over Image
画像の上にテキストブロックを配置。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-36.png)
Internet Explorer & CSS issues
IE対策。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-37.png)
Disabling Deprecated HTML Using CSS
CSSで非推奨のHTML要素を不能に。
6. CSS3のテクニック
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-38.png)
Mixing CSS3 and jQuery
CSS3とjQueryのコラボ集。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-39.png)
CSS Gradients in Action
CSS3でグラデーション。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-40.png)
The Shadow effect in CSS3
CSS3でシャドウのエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-41.png)
CSS3 Exciting Functions and Features: 30+ Useful Tutorials
CSS3のチュートリアル集。
7. CSSのツール
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-42.png)
SlickMap CSS
リストでサイトマップ。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-43.png)
Phoenix
Firefoxのアドオン。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-44.png)
Juicer - a CSS and JavaScript packaging
CSSとJavaScriptを圧縮化。
![サイトのキャプチャ](/wp-content/uploads-2009-2d/2009082703-45.png)
Boks
AIRのアプリケーション。
8. 他のリソースの紹介
CSSに関する他のリソースも多数、紹介されています。
Mastering CSS, Part 2
sponsors