Twitterを見ていて気になるツイートを見かけた場合、☆をポチってお気に入りに入れている方も多いと思います。自分もちょいちょい☆をポチっているのですが、後で見返そうと思っていても忘れていたり、数が多くなって管理できなくなってしまったりという状況になっている為、ここで一度見直して整理しておこうかと思います。

色々な種類のツイートをお気に入りに入れているため、以下のようにカテゴリー分けして整理することにしました。

■Tips系
便利なjQeryやHTML/CSSのテクニック関連をまとめています。

■Webサービス・Webサイト
便利なWebサービスや注目しておきたいWebサイト、また読んでおきたい記事などまとめています。

■名ツイート集
個人的に心に残ったツイートをまとめています。

■ネタ的ツイート集
面白かったツイートをまとめています。

これらの内容はTwitterに有益な情報をアウトプットして頂いている方々から得た物なので、最初はその方達のユーザー名も一緒に記載した方が良いのではと考えましたが、許可無く勝手に他人のユーザー名を晒すのもどうかと思ったので記載しないことにしました。

いつも情報を提供して頂いてる方々にお礼申し上げます。

Tips系

・IE6/7/8でもCSS3が使えるようになるスクリプト
コリスさんの記事。個人的にはCSS3使うならIEは無視しでいいんじゃないかなあと思う。プログレッシブエンハンスメントっていう考えもあるんだし。そうも言ってられない現場の事情があるんですかね。あまっちょろい学生の意見ですいません。

・メモ IEのクラスの指定に注意！
クラスを二つ以上指定してスタイルをあてた場合、IEでおこるバグを防ぐ方法。

・bodyにtext-shadowをものすごく小さな値で指定 →XPなどアンチエイリアスオフ時にシャギーが目立ちにくくなる

・ruby { ruby-position: inline; }
テキストにフリガナをふるHTML要素のruby。IEでもフリガナを横並びにする方法です。

・{word-wrap: break-word;}
収まりきらない単語を途中で改行させる為の方法。CSS3でありながらIE5.5から対応しているという優れもの。

・webkitに限ってですが、input type="search" に results="5"と書くと自動で虫眼鏡マークがつくそうです。

・疑似3Dでぐるぐる回るjQuery:「jQuery Circulate」
jQueryで疑似3Dを可能にするライブラリです。面白いですが使いどころが難しそうです。

・{position:relative; z-index:1;}
上に書いたIEでCSS3を使う為のie-css3を使用し、IEでborder付きの角丸を指定したと、この記述が無いとborderが消えてしまうというバグが発生します。

・たった一行のコードでここまでインパクトのあるフォントを表現
画像を使わずtext-shadowをうまく使うことでインパクトのあるフォントに！！これは真似してみたい！

・Firefoxでもtext-overflowを実現するテクニック
テキストが表示範囲からはみ出た場合、直前の文字を「・・・」で表記する為のtext-overflowプロパティ。まだFirefoxではサポートされていませんが、擬似的に表記するためのテクニックが紹介されています。

・AltTranslate
Altキーを押しながらテキストを選択する事でポップアップで翻訳してくれるSafariの拡張機能


・swfの上にhtmlの画像をのせる
タイトル通り。embedにはCSSが効かないと初めて知りました。

Webサービス・Webサイト

・中村勇吾氏インタビュー記事
ZGAInfoというサイトに掲載された中村勇吾さんのインタビュー記事です。リンク先からダウンロードして読むことが出来ます。

・からだ巡り茶：メゾメグ
からだ巡り茶のプロモーションサイト。イメージキャラクターの広末涼子さんがたまらんです。このサイトが公開されたときTL上の多くの男性が悶絶しておりました。サイト自体も奇麗にすっきりとまとまったデザインになっていると思います。

・Fireworksで崩れた角丸を元に戻すコマンド。
タイトル通り。記事が英語で読めなかった・・・。

・多数の壁紙をそろえたiPhoneアプリ
カテゴリーの種類には当てはまらないかもしれませんが、かっこいいものや奇麗な壁紙がそろっているので紹介。

・高解像度フリー写真素材を無料で。「PHOTO STOCKER」
商用可能な高解像度の画像を無料でダウンロードできる国内サイト。制作者様に感謝。

・就活に打ち勝つポートフォリオWebサイト
Webクリエイターボックスの記事。Web関係の仕事に就きたいと考える学生、また現役の方も必見の内容。本当にこのサイトにはお世話になっています。

・Firefox高速化
アドオンとか便利だけど重いのがネックなFirefox。そんな悩みを解決してくれるかもしれない方法。重いと感じている方は試してみてはいかがでしょうか。

・IE9はHTML5を強力サポート
Web制作をする上で何かと問題となっているIE。そんなIEも次期バージョンではHTML5を強力にサポートしているという話。IEの名誉挽回となるか。ただこの記事タイトルの最後が気に入らない。

・a-blog cmsのモジュールでワイヤーフレームを描く時に役立つFireworksの共有ライブラリ
このブログでも使用させて頂いているa-blogcmsのモジュールを図形化してFireworksの共有ライブラリにしてみた、という内容の記事。ワイヤーフレームを書く時にとても便利そうです。自分はCS4を持っていないので試していませんが、詳しい使い方など記事と動画で紹介されていてかなり分かりやすいです。

・canvas実装実験
HTML5のcanvasを使ってブラウザ上で線が描けるサイト。線と言っても様々なタイプがあるので一度ご覧になってみてはいかがでしょうか。すごいっす。

・CSS3とHTML5の主要ブラウザの対応状況一覧
コリスさんの記事。CSS3とHTML5の主要ブラウザの対応状況をまとめたサイトの紹介。コリスさんにもいつもお世話になっています。

・html5 ざっくりメモ
CSS HappyLifeさんの記事。HTML5で新しく用意されたいくつかの要素の使いどころをざっくりと紹介されています。かなり参考になりました。CSS HappyLifeさんにもいつもお世話になっています。

・Japan - The Strange Country
確かどこかの大学生が卒業制作で作った動画、だったと思いますが（間違っていたら申し訳ありません）日本という国を面白おかしく、そしてちょっと皮肉って紹介している動画です。クオリティーが高くかなり起訴力があります。

・Fireworksのテクスチャを無料で
約300ものFireworksのテクスチャを商用でも無料でダウンロードできるサイトです。Fireworks使いには嬉しいですね。制作者様に感謝。

・WebデザイナーはCSSとともにSVGが必須科目に
SVG自体は何年も前に勧告を受けているのにIEが対応していなかったため普及しなかった。しかしIE9からはサポートされるため今後SVGが普及する可能性が大きい。そうなるとWebデザイナーにはSVGに関する知識も必要となる、という話。要チェック。

・背景デザインに使える継ぎ目のないPhotoshop無料パターン素材
タイトル通り。このサイトは海外サイトで紹介されてるチュートリアルを日本語に直して紹介してくれていたりと親切です。

・Fireworksの機能拡張でCSS Sprite(CSSスプライト)に適したCSSと画像を生成
こちらもCS4とCS5を持っていないので試していませんが、使うとかなり便利だそうです。

・CSS3アニメーション 50選

CSS3で実装されたアニメーションが紹介されています。どれもこれもすごいものばかりですが、その中でも3D表現がひときわ目を引きます。早く各ブラウザで実装状況が進むといいですね。

・CSS3に関するスライド資料
東京で行われたCSSniteLP9で、高津戸壮さんがプレゼンされたときに使われていたスライド資料。この資料自体もCSS3とjavascriptでブラウザで見ることが出来ます。

・SOHTANAKAがリニューアル
サンフランシスコで活躍されている日本人WebデザイナーのSOH TANAKAさんの個人サイトがリニューアルされていました。グリッドを意識したレイアウトながら背景のデザインがそれをうまく崩していると思います。ノイズを細かく入れるなどして質感も表現されています。

・ウェブデザイナーにおすすめ Google Chromeエクステンションいろいろ
DesignWalkerさんの記事。ただ自分はFirefox派です。

・HTML5でRPG風ゲーム
HTML5で作られたドラ○エ風RPGゲーム。ドラッグ＆ドロップで遊べます。すごい。

・アメリカの日産LEAFのサイト
映像部分はFlash。それ以外はSVGで描画されているそうです。

・適切なaltの入れ方
altに入れる内容に関しては結構議論されてるところですよね。ここで一度確認しておくといいかもしれません。HTML5になるとaltに入れる内容はかなり細かく厳密になるのでそちらも合わせて確認しておくといいかも。

・外人も読めるカタカナフォント
これは面白いアイデア。

・今更聞けないcanvasの基礎の基礎
面白法人カヤックのブログより。最近javascriptを学ぶ人が増えてきましたね。覚えた方が良いのだろうか・・・。ちなみにこのサイトの背景のひかりもcanvasで実装されていて、ページを更新するたびにランダムで色が変わります。デザインもとてもかっこいい。透明感のあるサイトが増えてきてるように思うのですがトレンドなんですかね？

・HTML5 Video Destruction
canvasとvideoのデモ。すごいとしか言いようが無い。

・WEB屋は何でもできると思ってるクライアント
web屋に対するクライアントの認識。やはりweb制作というものが一般には知られていないんですね。専門職だからしょうが無いんでしょうけど。

・HTML5のメリットを活かしたコンテンツアイデア
カヤックのマークアップエンジニアの方が作ったプレゼン資料のようです。HTML5を実務で生かす方法や特徴が書かれています。上で書いたaltについても説明されています。資料の作り方も参考になりますね。

・mr.ステッカーのサイトのフッターがすごい
フッターに情報を格納しjavascriptでマウスオンしたときやクリックしたときにそれがニョキっと出てきます。実装が大変そう。

・HTML内タグの閉じ忘れをチェックするツール-ブックマークレット
タイトル通り。これもかなり便利そうです。

・WebFontsとして利用できるフリーの和文フォント
ヨモツネットさんのブログより。フォントをサーバにアップにしCSSで指定することでユーザーの環境に関係なくそのフォントを表示させることが出来るWebfonts。フォントにはライセンスがあるので勝手にアップすることは出来ませんが、ここではフリーで使用できる和文フォントのまとめが書かれています。

・HTML対応早見表
円の中心に近いブラウザほどHTML5のサポート状況が良い、ということらしいです。これを見るとChrome4が圧倒的ですが、Safari5がリリースされたことによって現状が変わっているかもしれません。

・CSS3でスターウォーズのアレが動く
スターウォーズに出てくる四足歩行の兵器をCSS3でアニメーションさせています。

・Google Font API で手軽に始めるフォント遊び
javascriptを使わずにCSSをリンクするだけでWebfontesを使えるGoogle Font APIについての考察記事。Google Font APIで用意されているフォントは全てオープンソースで、使える書体についてはGoogle Font directryで確認できます。

・2010年のウェブデザインのトレンド
記事は2010年5月20日のもの。え？もう2010年のトレンドの紹介？って感じもしますがWebはデザインも技術も移り変わりが早いですからね。こまめにチェックしておくことが重要。ただ記事の内容を見る限り、巨大なヘッダーデザインとかセリフ系フォントとかテクスチャの利用とか2009年後半からそんなに変わってないように思う。

・FlashをHTML5に自動変換するSmokescreen
どちらかというとTips系に入るのかもしれませんが、リンク先が記事なのでこちらに載せました。記事を読む限り実用するにはまだ問題がありそうですが、いつかiPhoneやiPadでFlashを見ることが出来る日が来るかも・・・？ちなみにSmokescreenのサイトこちら。
http://smokescreen.us/

・Google Font API のウェブフォントで日本語が表示されない理由
原因を探る為に実験し、そこから得られた結果と考察が丁寧に書かれています。どうやらiPhone/iPadではGoogle Font APIを使って日本語を表示させることは現状不可能なようですが以後の進化に期待、ということですね。

・[エロ注意！！]テキストを選択するとエロい事になる驚きのCSSマジック！
先に言っておきますが決してエロの二文字に釣られて☆をポチった訳ではありません。CSSマジックという言葉に惹かれたんですよ本当ですよ。どうなってるのか不思議だったんで調べてみたら、選択したテキストの見栄えを変える「;;selection」という疑似要素を使ってることが分かりました。つまり、テキストを選択した際、文字の色と背景色を変えることによって女性の裸を描いているんです。発想もすごいですが、実装の為に裂いた時間と努力に敬意を払いたいと思います。

・Dreamweaverの昨日を使ってソースコードをキレイにする
汚いソースコードをDwの機能を使って奇麗にする為の3つ方法が動画で紹介されています。

・より早くcssやhtmlのコーディングが行えそうな情報いろいろ
タイトル通り。必見の内容です。

・HTML5版の新規でサイトを作るのに使えそうな一式
HTMLファイルやCSSファイル、またjsファイルがテンプレートとして用意されており、ディレクトリ構成もされています。ブログ内ではHTML5用のものだけでなく、XHTML用のテンプレートも配布されています。

・HTML5: 必見！FLASH越えのサンプル集48個
正直Flashを超えているかと言われるとまだまだと言った感じですが、HTML5で作るインタラクティブコンテンツの例として参考になります。

・[seo] 滅べばいいのにと思うSEOの10の迷信
記事を読んでいるとどれが真で偽なのか分からなくなりそうですが、参考程度に読んでおくといいかも。

・HTML+CSS Templating
再び高津戸さんのプレゼン資料より。HTMLやCSSをテンプレートする際に注意すべきことやテクニックがまとめられています。

・一つの要素に背景やボーダーをマルチプルに配置する実用的なテクニック
CSS3のマルチプルバックグラウンドの効果を、CSS2.1でも擬似的に再現する為のテクニックの紹介。befor、after疑似要素を利用するため使えるのはIE7以降になりますが、無駄なdiv要素を省きたい場合に便利かもしれません。

・HTML5開発を支援するサイト「HTML5 Rocks」
Googleが提供するHTML5を実際に触りながら勉強できるサイト。HTML5で開発する為のアドバイスもスライドショーで紹介されています。ただ開発ならばカヤックが提供するjsdo.itの方が手軽にアウトプットも出来るのでこちらのほうが便利かと思います。

・旧世代の人たちが淘汰される時代が始まったよ
過去から未来へ。Web制作における体制や考えの変化と、これからどういう意識で取り組んで行くべきかが書かれています。Webの世界は進化が早いと言われていますがそれが良くわかります。こういう記事は現役の方ももちろんですが、過去を知らない現在の学生が読んでおくべき記事だと思います。学生は絶対読んでおいた方がいいですよ。

・Launchilist
サイト公開前にチェックしておくべきことをリストとして作成できるサイトのようです。このサイトのデザインも良く背景の雲はよ〜く見るとゆったりと動いています。

・サイトとうまく溶け合っているソーシャルリンクのデザイン55
自分のサイトにTwitterやFlickerなどのアイコンを載せてリンクを貼っている方も多いと思いますが、ここではそれらのアイコンがサイトデザインとうまく解け合っているものが紹介されています。

・チベット仏教 総本山デプン・ゴマン学堂日本事務局
このTopページのデザインはまずいと思う。

・resizeMyBrowser
ウインドウサイズを任意の値で縮小、拡大してくれるサービス。サムネイルを撮るときに便利かも。

名ツイート集

・「コンセプトのないIA。コンセプトのないデザイン。逆にやりにくくないですか？」

・「近道したけりゃ先にゴールを決めろ。それが1番の時短術だ。」

・「人が一歩成長しようとするときはカッコ悪いんだよ。だって知らない世界に踏み出すんだ。何もわかってない一年生。カッコ悪くてあたりまえ。それ嫌がってたら、カッコつけて腐るだけだろ。」

・「若い頃は「教えてください」て言う前に、上のものは教えるんだよ。でも35歳過ぎたら「こいつわかってねーな」と思われるだけ。誰も「おまえダメ」て言ってくんないの。つまり「言われない＝それでいい」じゃないの。「言われない＝イケてない」てこと。そこ勘違いすんな。」

・「とにかく皆に見られてカッコ悪くても、必死こいて成長して、一段上の地平に立ってみろ。そこに立とうと努力しろ。そこに立ったら、カッコ気にしてた自分がアホに思えるんだよ。「自分を守ってて口先だけ」の自分に正直になれ。それが第一歩！」

・「これからを見据えて勉強や制作をしていく若者たちが、もうすぐ消えて行く運命のIE6対策に時間を取られるのはもったいないですよね。経験を生かしつつ、自分も新しい技術と向き合いたいところです。」

・「もう今年は段階的にIE6とそれ以外では、正しく情報を伝えられて最低限レイアウトにくずれの無い状態であれば、表示に差異が出ても問題の無い時期に入ってくるのではないかと考えています。その最低限が難しいって話もありますが...。」

・「lightboxを使うなら理由が必要だよね～」

・「なんだかんだ言っても、行動しないと意味ねーよ。」

・「これはあくまで個人的な意見ですが。SEOにふりまわされるほどアホくさいことはないと思っております。本当にそれだけの重みがある見出しなら、2つ目のH1にしてもいいのではないかしら。第一、HTML5になったらH1の数なんて問われなくなるハズ。たぶん...。」

・「デザインになかったけど、見出しの文字を凹んでる風にしてみたくて、勝手に白のぼかしのないtext- shadowをこっそりつけたら見にくいから直してください！って言われた！！！ですよね！！！！！！！！」

・「否定から入るより、yes,butで話せる人の方が厳しくも温かく信用できるな～、と実感するわ。」

・「ValidなHTMLを書くのはプロとして当然なんだという意識が低い人が多すぎる。」

・「CSS をクリーンに保つってのはデベロッパーにとっての挑戦というよりデザイナーにとっての挑戦といえそう」

・「サイトの左側にグローバルナビを置くならスクロールしてもずれない様に固定して欲しい。そうすればページのいちばんうえに戻ってメニューを選ぶ必要ないからユーザビリティあがるのに」

ネタ的ツイート集

・「ダイソンの掃除機よりも君の瞳の吸引力に吸い込まれるよ。吸引力の変わらないただ一人の人物。それがキ・ミ☆」

・オランダ「カメルーンが敗れたようだな……」
デンマーク「クク…だがヤツはグループEの中でも最弱……」
日本「初戦を落とすとはW杯出場国の面汚しよ……」
カメルーン「え、何かおかしくない？」