101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋
2008年01月17日 公開
CSSにおける技術を学べる素敵なまとめエントリ。
しばらくここでお勉強してみようかと思いましたので記事にしておきます。
あらかじめ言っておくと、リンク先のタイトルにあるような101個のリンクがあるわけではない。
これから続くと言っているので続きに書くのか・・・それともリンク先のまとめもその数に入れているのか。
計算すると40個もないので不明ですがあらかじめご了承ください。
CSSその技術
ダウンロードして学ぶものやチュートリアルなどもあり、英語がダメダメな方でも何かと使えるものが豊富です。
101 CSS Techniques Of All Time- Part 1
どうやら2部目も準備しているようで目がはなせませんね。Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy!
とりわけ私は英語苦手なので、こういうチュートリアルには弱いですが、ある程度見た目とCSSをかじった程度の知識があればとりあえず勉強できそうなものを抜粋してご紹介いたします。
英語ダメダメでもお勧めできる厳選7本
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them - CSS-Tricks
アイコンをバックグラウンド化して整えることで見栄えはもちろんですが、読み込みに関するイライラも解消できますよという説明。
サンプルデモ
Even More Rounded Corners With CSS - Schillmania.com
いわゆる丸角ですが、CSSと1つの画像で作るユニークな技術。
サンプル＆ダウンロードページ
上記リンクの青いバックグラウンドフィールドの『Download examples』というリンクからダウンロードできます。
PhotoShopなどで開けるPSDファイルも同梱されていますので、色々とカスタマイズできますね。
Rounded corners in CSS :: Adam Kalsey
丸角作成の基本的チュートリアルの中でもわかりやすい見本みたいなもの。
The ThrashBox
CSSによって素敵なメッセージボックスを表現する方法。
『download it 』というリンクからバックグラウンドで使われている画像のPSDファイルが提供されている。
A List Apart: Articles: CSS Drop Shadows
CSSによる影の付け方の細かなチュートリアル。
英語はよくわからないけど画像を使ってわかりやすくなってるのがポイントですね。
尚、このチュートリアルには2があります。
A List Apart: Articles: CSS Drop Shadows II: Fuzzy Shadows（英語力多少必要かも？）
Showing Hyperlink Cues with CSS (Ask the CSS Guy)
リンク先の拡張子によって、リンクの横にアイコンを表示しようとするCSSのチュートリアル。
classに対してアイコンを付加する方法も同時に掲載されています。
英語ですが、かなりわかりやすい。
Iconize Textlinks with CSS - pooliestudios
上記アイコンチュートリアルすら学ぶ時間が無い人向け？
アイコンとCSSがフルセットでダウンロードできます。
以上です。