[CSS]スタイルシートの実用的なテクニック集:レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
Post on:2009年8月7日
スタイルシートの実用的なテクニックをSmashing Magazineから紹介します。
![Mastering CSS, Styling Design Elements](/wp-content/uploads-2009/2009080701.png)
Mastering CSS, Part 1: Styling Design Elements
1. レイアウト関連
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-01.png)
The simplest way to horizontally and vertically center a DIV
天地左右の真ん中に配置。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-02.png)
New CSS Sticky Footer - 2009
要素が少なくても、フッタを最下部に配置。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-03.png)
Simple Page Peel Effect with jQuery & CSS
ペロッと、雑誌をめくるようなエフェクト。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-04.png)
Equal height boxes with CSS
要素の量に関係なく、divの高さを揃える。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-05.png)
Adaptable view - how do they do it?
リストの表示形式を変更。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-06.png)
CSS: The All-Expandable Box
拡大に対応したボックス。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-07.png)
Four Methods to Create Equal Height Columns
divの高さを揃える4つの方法。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-08.png)
Vertical Centering With CSS
天地の中央に配置。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-09.png)
CSS vertical centering using float and clear
floatやclearを使用せずに、天地の中央に配置。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-10.png)
Cross-Browser Inline-Block
inline-blockのクロスブラウザ対応のお作法。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-11.png)
The CSS "Ah-ha!" Moment
CSSの概念を簡単に説明。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-12.png)
An Indepth Coverage On CSS Layers, Z-Index, Relative And Absolute Positioning
z-indexを使用した相対と絶対配置。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-13.png)
The CSS Overflow Property
overflowのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-14.png)
Absolute, Relative, Fixed Positioning: How Do They Differ?
potisionのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-15.png)
display: inline-block
display: inline-blockのチュートリアル。
2. ナビゲーション関連
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-16.png)
Create dropdown menus with CSS only
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-17.png)
Simple scalable CSS based breadcrumbs
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-18.png)
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-19.png)
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-20.png)
The Tabbed Breadcrumb Navigation
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-21.png)
Apple's Navigation bar using only CSS
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-22.png)
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-23.png)
Nice CSS menu with feed reader icons list
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-24.png)
Multi-level Menus with jQuery and CSS
ナビゲーション集。
3. 画像関連
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-25.png)
Centering images with CSS
画像のセンタリングのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-26.png)
Add a Custom "Trendy" Border Around Blog Images With CSS & JavaScript
画像のボーダーのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-27.png)
Sexy Music Album Overlays
ジャケ写のスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-28.png)
Create CSS pin balloons with ease
ピンバルーン。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-29.png)
Create an Image Rotator with Description (CSS/jQuery)
パネルをスライド表示。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-30.png)
5 Popular CSS Speech Bubbles
スピーチバブル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-31.png)
How to Make a Threadless Style T-Shirt Gallery
見せ方が面白いギャラリー。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-32.png)
CSS image replacement for... images? It makes sense for print.
スクリーン用とプリント用のイメージ。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-33.png)
Schönes neues CSS: box-shadow
box-shadowのチュートリアル。
4. タイポグラフィ関連
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-34.png)
Truetype, Font Variants and Antialiasing
TrueTypeフォントのアンチエイリアスのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-35.png)
Sexy Ordered Lists with CSS
ol要素をセクシーにスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-36.png)
beautiful fonts with @font-face
@font-faceのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-37.png)
Забытые возможности :first-letter
first-letterのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-38.png)
8 Definitive Web Font Stacks
Webフォントのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-39.png)
CSS: Perspective Text
フォントで奥行き。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-40.png)
Fonts for web design: a primer
タイポグラフィの概念。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-41.png)
CSS text-shadow Fun: Realtime Lighting Demo
テキストのスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-42.png)
Rendering Quotes With CSS
クォートのチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-43.png)
Six Ways to Style Blockquotes
引用のスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-44.png)
Make OL list start from number different than 1 using CSS
CSSで開始番号を変更。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-45.png)
Use CSS to Override Default Text Selection Color
ハイライト時のカラーを変更。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-46.png)
CSS Drop Cap Effect
Drop Capのチュートリアル。
5. アイコン・ボタン・リンク関連
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-47.png)
Add Progressive Icons to Your Site Using :after pseudo-element
リンクの後ろにファイルタイプ別のアイコン。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-48.png)
Super Awesome Buttons with CSS3 and RGBA
ボタン風にスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-49.png)
Scalable CSS Buttons Using PNG and Background Colors
拡大縮小に対応したスタイリング。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-50.png)
Add File Type Icons next to your links with CSS
リンクにファイルタイプ別のアイコン。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-51.png)
22 CSS Button Styling Tutorials and Techniques
ボタンのスタイリング集。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-52.png)
CSS Tricks' Link Nudge
ホバー時横移動するチュートリアル。
![サイトのキャプチャ](/wp-content/uploads-2009/2009080701-53.png)
Sanscons
CSSで色変更するアイコン素材。
sponsors