Webデザイナーに絶対覚えておくべきCSSトリック15選
2009/01/29 15:04Update
TAGS: CSS | 小技 | トリック | テクニック | Web | デザイナー | position | z-Index | margin | padding | text-indent | float
Webデザイナー/開発者には、絶対に覚えておくべきCSSトリック15選をピックアップします。
原文:In the Woods - 15 CSS Tricks That Must be Learned
次のようなテクニックを紹介しています。
1. Absolute positioning inside a relative positioned element.
(相対位置の要素 の中に 絶対位置の要素の配置)
* PositionisEverything
* W3 Specifications
2、Z-Index and positioning.
(ページ要素の配置位置におけるz-Indexプロパティに概要、使い方)
* Z-index Screencast
* W3 Specifications
3、Margin Auto
(自動マージンの設定)
* Margin auto described
* W3 margin specs
4、Use Padding Carefully and Appropriately
(paddingプロパティは慎重・適切に使うべし)
* W3 Padding Properties
5、Hiding text using text-indent
(text-indentプロパティでテキストを非表示)
* SitePoint-Using text-indent
6、IE Double Float Margin Bugs
(IEのダブルFloatマージン不具合対策)
* Doubled Margin-Causes and Fixes.
7、Using CSS to Fight Spam
(CSSでスパムを防ぐ?)
* Fighting spam with CSS
8、PNG in IE 6 Fixes
(IE6 透過PNG表示)
* SuperSleight Fix
* Twin Helix Fix
* Google’s IE 7.js
9、CSS Cross Browser Transparency
(CSSでクロスブラウザの透過)
* CSS Opacity Settings1.
* CSS Opacity Settings2.
10、Use CSS Image Sprites
(CSS Spriteを利用。複数のイメージを1個にまとめてリクエストを減らす高速化する手法)
* A List Apart-CSS Sprites
* How to use image sprites
* David Walsh on CSS Sprites
・・・
詳細は原文まで。

次のようなテクニックを紹介しています。
1. Absolute positioning inside a relative positioned element.
(相対位置の要素 の中に 絶対位置の要素の配置)
* PositionisEverything
* W3 Specifications
2、Z-Index and positioning.
(ページ要素の配置位置におけるz-Indexプロパティに概要、使い方)
* Z-index Screencast
* W3 Specifications
3、Margin Auto
(自動マージンの設定)
* Margin auto described
* W3 margin specs
4、Use Padding Carefully and Appropriately
(paddingプロパティは慎重・適切に使うべし)
* W3 Padding Properties
5、Hiding text using text-indent
(text-indentプロパティでテキストを非表示)
* SitePoint-Using text-indent
6、IE Double Float Margin Bugs
(IEのダブルFloatマージン不具合対策)
* Doubled Margin-Causes and Fixes.
7、Using CSS to Fight Spam
(CSSでスパムを防ぐ?)
* Fighting spam with CSS
8、PNG in IE 6 Fixes
(IE6 透過PNG表示)
* SuperSleight Fix
* Twin Helix Fix
* Google’s IE 7.js
9、CSS Cross Browser Transparency
(CSSでクロスブラウザの透過)
* CSS Opacity Settings1.
* CSS Opacity Settings2.
10、Use CSS Image Sprites
(CSS Spriteを利用。複数のイメージを1個にまとめてリクエストを減らす高速化する手法)
* A List Apart-CSS Sprites
* How to use image sprites
* David Walsh on CSS Sprites
・・・
詳細は原文まで。
Sponsored Link
Comments
- Relative Articles
- CSSとは - (2008/05/24 11:40)
- CSSの基本文法 - 入門 - (2008/05/24 19:05)
- CSSの基本文法 - セレクタの組み合わせ - (2008/05/24 20:24)
- CSSの利用方法 - (2008/05/24 22:02)
- CSSの利用方法 - 外部スタイルシート - (2008/05/24 22:26)
- CSSの利用方法 - 内部スタイルシート - (2008/05/24 23:38)
- CSSの利用方法 - インライン・スタイル - (2008/05/25 15:19)
- CSS基本文法 - 擬似クラスと擬似要素 - (2008/05/25 22:49)
- CSS基本文法 - CSSダイナミック・擬似クラス - (2008/05/25 23:23)
- CSS基本文法 - CSS :target擬似クラス - (2008/05/26 11:59)