101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋
スポンサード リンク
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がフルセットでダウンロードできます。
以上です。
新ブログ：ITクオリティもよろしく。
この記事のコメント (8)
スポンサード リンク
 |
 |
 |
 |
» タッチパネルWindows7のデモビデオ
» webサイト作成時にサイトカラーを決められない人の為のwebサービスいくつか
» セキュリティソフトのカスペルスキーがいかに強気なのかを確認できる一覧[ネタ]
» [これすご]70のphotoshop修正テクニック
» 旭川で行われたMicrosoftのセミナーに壮大に釣られた
» ブロガーは2クリック以内にワンクリック詐欺サイトに到達する可能性が高い
» Adobe Fireworks（8)のweb2.0なレイヤースタイル131＋48個＋おまけ
» アメブロのブログマナー定義がどうも腑に落ちない
» FLASHベースのリッチテキストエディタ『obedit』
» 画像にメッセージを埋め込むflickr見たいな機能のJavaScript
» ７月と言えば『まとめ祭り』ということで、まとめエントリーをまとめました
» 『こんなwebサイトは嫌だベスト20』をチェックシート化して現場に持っていこうと考えてPDF形式で作った
» 『YouTubeを見ている全てのユーザー視聴情報をバイアコムへ』米国法廷が裁決。
» [ゲーム脳]DS版ディスガイアが本当にヤバイ理由を懇々と説明するよ
» 相手サイトのサムネイル画像を簡単にブログにはるタグを作るeパレット2
Comment
わかりやすいエントリが出てますね
初めまして。英語が苦手なシリーズがDSで出てますが、これもその流れをうまく利用した感じでほんと参考になります。
私の個人的な発言になりますけど、上のコメント同様、こうしたwebデザインネタを拾ってくるのを前は楽しみにしていました。
なので文章系記事はあまり読んでないのですが、この絶妙な情報提供バランスがこのブログのすごいところだと思っています。
最近は情報だけでなく、Yamadaさん個人に興味を持つようになり、文章系記事も読むようになってきました。
まさしくYamadaさんの手のひらの上で踊っている感じですが、それが楽しく思えてきました。
これからもちょくちょく見させてもらいます！
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できますはじめまして
はじめまして、440と申します。いつも楽しく読ませていただいてます。何があっても大人な対応のYamadaさんを尊敬している一人です。今日は私も同じ記事を先日エントリーさせていただいたので、宣伝に来ました（すいません）。URL貼っときますので、よかったらのぞいてやってください。101ない件ですが、たぶん、今後Part2、3と続くんだと思いますですよ。
これからも更新楽しみにしてます。
はじめまして。
101は基礎、基本とかの意味で使ってるのではないでしょうか。http://eow.alc.co.jp/101/
tkさん
おおー、恥ずかしながら101にそういう意味があるとは知りませんでした！念のためネタ元のNoupeさんにメールしてみたら、確かにそっちの意味だそうです。ありがとうございます〜。我々目線だからいい
こちらのブログが読みやすいのは、私のような初級者レベルの目線で記事を書いてくれているからですね。
そしてその人たちがどんなことで悩んでいるのか的確にとらえてらっしゃる。
英語が苦手な人向けに・・・
記事の中身もさることながら、語りかけるターゲット層を明確に意識してらっしゃるところに影響を受けました。
海外ニート
いつも読んでます。良質の記事が多くて参考になります。見つけて来て、試して、自分なりにまとめて記事にする、という作業をされてると思いますが、結構な時間がかかるだろうな、と感心します。自分もちょっとウエブデザインとかするんですが、いつも英語で情報は探しています。やはり情報量が違いますし、フォーラムやコミュニティーも充実してて聞きやすいですし。ここでは自分が知らないのもたくさんでてくるので、嬉しいです。これからもぜひよろしくお願いします！
参考になります！
はじめまして。ne-designと申します。いつもYamadaさんのウェブデザイン関連の記事を楽しみにしております。
どうやら記事タイトルにPart1と書いてあるので、後々Part2やPart3がでて合計で101となるのではないでしょうか？分けたのは101となると、かなりの量になるからだと思います。
それでは短いですが今後も期待しています！