101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋

  • 2008/01/17
  • このエントリーをはてなブックマークに追加

スポンサーリンク

101 CSS Techniques Of All Time- Part 1

CSSにおける技術を学べる素敵なまとめエントリ。
しばらくここでお勉強してみようかと思いましたので記事にしておきます。

あらかじめ言っておくと、リンク先のタイトルにあるような101個のリンクがあるわけではない。
これから続くと言っているので続きに書くのか・・・それともリンク先のまとめもその数に入れているのか。
計算すると40個もないので不明ですがあらかじめご了承ください。
IT/Web業界に強い転職サイトGreen

CSSその技術


ダウンロードして学ぶものやチュートリアルなどもあり、英語がダメダメな方でも何かと使えるものが豊富です。

101 CSS Techniques Of All Time- Part 1

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!

どうやら2部目も準備しているようで目がはなせませんね。

とりわけ私は英語苦手なので、こういうチュートリアルには弱いですが、ある程度見た目と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ボックス

CSSによって素敵なメッセージボックスを表現する方法。
『download it 』というリンクからバックグラウンドで使われている画像のPSDファイルが提供されている。



A List Apart: Articles: CSS Drop Shadows
CSSで影

CSSによる影の付け方の細かなチュートリアル。
英語はよくわからないけど画像を使ってわかりやすくなってるのがポイントですね。
尚、このチュートリアルには2があります。
A List Apart: Articles: CSS Drop Shadows II: Fuzzy Shadows(英語力多少必要かも?)



Showing Hyperlink Cues with CSS (Ask the CSS Guy)
iconCSS

リンク先の拡張子によって、リンクの横にアイコンを表示しようとするCSSのチュートリアル。
classに対してアイコンを付加する方法も同時に掲載されています。
英語ですが、かなりわかりやすい。



Iconize Textlinks with CSS - pooliestudios
CSSアイコン

上記アイコンチュートリアルすら学ぶ時間が無い人向け?
アイコンとCSSがフルセットでダウンロードできます。


以上です。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

ne-design 参考になります!

はじめまして。ne-designと申します。
いつもYamadaさんのウェブデザイン関連の記事を楽しみにしております。

どうやら記事タイトルにPart1と書いてあるので、後々Part2やPart3がでて合計で101となるのではないでしょうか?分けたのは101となると、かなりの量になるからだと思います。

それでは短いですが今後も期待しています!

2008/01/17 Thu 14:10| |

CSSへたれ わかりやすいエントリが出てますね

初めまして。
英語が苦手なシリーズがDSで出てますが、これもその流れをうまく利用した感じでほんと参考になります。
私の個人的な発言になりますけど、上のコメント同様、こうしたwebデザインネタを拾ってくるのを前は楽しみにしていました。
なので文章系記事はあまり読んでないのですが、この絶妙な情報提供バランスがこのブログのすごいところだと思っています。
最近は情報だけでなく、Yamadaさん個人に興味を持つようになり、文章系記事も読むようになってきました。
まさしくYamadaさんの手のひらの上で踊っている感じですが、それが楽しく思えてきました。
これからもちょくちょく見させてもらいます!

2008/01/17 Thu 14:20| |

- 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2008/01/17 Thu 15:20| |

440 はじめまして

はじめまして、440と申します。いつも楽しく読ませていただいてます。何があっても大人な対応のYamadaさんを尊敬している一人です。
今日は私も同じ記事を先日エントリーさせていただいたので、宣伝に来ました(すいません)。URL貼っときますので、よかったらのぞいてやってください。101ない件ですが、たぶん、今後Part2、3と続くんだと思いますですよ。

これからも更新楽しみにしてます。

2008/01/17 Thu 15:45| |

tk はじめまして。

101は基礎、基本とかの意味で使ってるのではないでしょうか。

http://eow.alc.co.jp/101/

2008/01/17 Thu 17:51| |

440 tkさん

おおー、恥ずかしながら101にそういう意味があるとは知りませんでした!念のためネタ元のNoupeさんにメールしてみたら、確かにそっちの意味だそうです。ありがとうございます~。

2008/01/17 Thu 23:46| |

ごろ太郎 我々目線だからいい

こちらのブログが読みやすいのは、
私のような初級者レベルの目線で記事を書いてくれているからですね。
そしてその人たちがどんなことで悩んでいるのか的確にとらえてらっしゃる。

英語が苦手な人向けに・・・

記事の中身もさることながら、語りかけるターゲット層を明確に意識してらっしゃるところに影響を受けました。

2008/01/18 Fri 10:57| |

名前を名乗れない人 海外ニート

いつも読んでます。
良質の記事が多くて参考になります。見つけて来て、試して、自分なりにまとめて記事にする、という作業をされてると思いますが、結構な時間がかかるだろうな、と感心します。自分もちょっとウエブデザインとかするんですが、いつも英語で情報は探しています。やはり情報量が違いますし、フォーラムやコミュニティーも充実してて聞きやすいですし。ここでは自分が知らないのもたくさんでてくるので、嬉しいです。これからもぜひよろしくお願いします!

2008/01/22 Tue 17:33| |

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html