来年の復習用の記事リストです。自分用。 年末ですし、だれかがまとめ記事を書く と思って待ってましたが、他力本願も あまり良くないので自分でリストを作る 事にしました。去年も作ったけどあまり 出来なかったんですよね。。 タイトル通り、個人的に参考になった記事で、来年の勉強用リストです。 去年の記事(2010年度版・とても参考になった国内のWeb制作関連エントリーまとめ)と似たような感じだけど、必要な情報が偏ってきたのと、国内のRSS購読ブログ数が1/30になったのでリストも偏ってます。 リストの内容に関してこの手の記事はいろいろご意見頂き易いので、ご覧頂く方に不毛なストレスを与えないように、内容に関して先に記述しておきます。 リストの内容ですが、単なるリソースの羅列のようなまとめ記事は個人的に参考になったことがないので割愛しています、というかこの記事自体そんな感じです。また、結果のみで解説の

結構良さそうだったので備忘録。レスポンシブWebデザイン向けのライブラリです。モバイルのサイズになるとグローバルナビを横スライド式に切り替える、というもの。面白いですねー。 これ結構いいんじゃないでしょうか。レスポンシブWebデザインにするとどうしてもナビゲーションが縦長になりがちなのでその不満は解消できるアイデアですね。 PathやFacebookのiPhoneアプリのような横スライドメニューは使いやすいかもしれない。 Pathのようにというか、全く同じじゃないんですが、モバイルサイズになると横スライド式のメニューに変更するjQueryプラグインです。 ちょっといいアイデアですね。プラグインも圧縮版は3KBと軽量です。 タップすると左からメニューがスライドします。 手抜きで申し訳ないんですがサンプルです。 Sample※表示確認はresponsivepxを使うと楽です 実機で重いのは僕が

ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 h1 { border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px; } h1 span { position: relative; top: -24px; padding: 0 20px; background:white; }borderを使って実装。h1にborderを付けて位置を下げ、spanで

とっても可愛らしいコンタクトフォームがありま したのでメモがてらご紹介します。封筒に入 った手紙を模したフォームのデザインで、 マウスを乗せると、フォーム部分の手紙が アニメーションしながら出てきます。使いど ころは今は限られてしまいそうですが・・ 将来は普通に使えるといいですねｗ なかなか素敵なフォームデザインです。手紙にマウスを乗せるとゆっくりフォームが出てきますよ。こういう発想力がほしいですね・・ a unique contact form with css3 transitions お手紙が入った封筒です。チラッとフォームが見えてますね。 マウスを乗せると・・ ゆったりとしたアニメーションでするすると出てきます。かわええｗ こんな仕組みらしいです。アニメーションはtransitionで、ホバー時に高さを変えてるんですね。 form {background:#f7f2ec url('

ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に

たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。 自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sampleいろいろ。フォントはGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば

徐々に数も増えてきてる印象の Facebookファンページですが、 便利なアプリも多数存在するの で使わないと勿体無いですよ、 という訳でファンページに良さそう なアプリをいくつかご紹介します。 FBMLが難しくて使えない・・！という方はアプリに頼るのもひとつの手です。多数存在するアプリから実用性のありそうなファンページ向けアプリを数点ご紹介します。 はじめに・追加方法はじめに、ファンページへの追加方法についてですが、簡単なんですが、若干分かりにくいので場所だけご説明します。 アプリのページに行って左サイドバーのプロフィール画像下部に「ファンページに追加」と出ますのでクリックしてアプリを追加します。あとはアプリ認証して設定すればタブに追加されます。 Static FBML ファンページ作成ではマストのアプリですね。オリジナルコンテンツを追加できるアプリです。使い方はこちらをご参照ください。

なかなか珍しいなと思ってご紹介。 はてブやLivedoorクリップ、Buzzurl などなど、国産のソーシャルブック マークサイトのアイコンを専門に配布 するsbm-gardenというサイト。個人 でも商用でも利用可能だそうです。 国内でこの手のアイコンを配布するサイトは、殆ど見かけないので覚えておいて損はないかも。これからまだまだ増えてくれそうですしね。 Good Design Webの方のサイトですよ。はてなブックマーク、LivedoorクリップやBuzzurl、Yahoo!、Newsing、Niftyクリップなどのアイコンのセットです。商用も無料で使えるそうですよ。 例えば以下のようなアイコンが配布されています。 Freehand_Cube 手書き風の3Dアイコン。 Wood_Convex 木目アイコン。 OldPaper グランジ。 Square_lightgray シンプル。 O

インスピレーションを向上させたい 時に僕が見てまわるWebサイトを ご紹介。というか基本的に殆ど閃く 事は皆無に等しいレベルでナンセ ンスな人間なのでドーピング的に 綺麗なものを見るようにしています。 というわけで、発想力の有る方には全く役に立たないエントリーです。個人的には勉強を兼ねたWebデザイン、フォトグラフィのためのインスピレーション向上が目的ですが、「発想力を上げる」というのは様々な業種の方にも通ずるものがあるのではないかと思っています。 パッと見、一貫性の無いまとめですが、どのサイトからもアイデアを貰ったことがあるのでそういったWebサイト集になります。順不同。 Dribbble 世界中のデザイナーの作品が見れるサイトです。新しく作ったコンテンツを公開してくれます。色やカテゴリで探せますが、どれも素敵なのでダラダラ見てるのも楽しいです。 Dribbble We heart it

地震から1週間が経ち、怒涛の如く出て くる情報で混乱しそうなので、個人的に 有益と思える情報のみに整理しました。 人によって必要な情報は異なるかと思 いますので参考にはならないと思いま すが、相性が良さそうでしたらご利用下 さい。 僕の住む街（世田谷区）もコンビニの品薄状態やスーパーの入場制限も徐々に解消され、かなり落ち着きを取り戻し始めています。トイレットペーパーをいくつも抱えた奥様方はどこへやら。ですが、被災地の状況は平行線、地域によっては悪化しているかも知れません。報道されない部分は見えませんので何とも言えませんね・・・ 僕個人の周りで被災者や、その家族がいて、まだまだ混乱の最中なので情報が必要です。ネットは情報の宝庫ですが、多すぎて混乱もしてきたので必要そうな情報だけに絞ってみました。という訳で僕が個人的に必要なメモになります。 被災者さん、又は関係者向け安否情報を得るのに役立ちそ

iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜

人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本

UNIQLOOKSなる新たなUNIQLOの Webサービスがスタートアップしました。 Facebook利用のファッションスナップ 共有サイトです。個人的にUNIQLOの Web戦略の視点に興味があったので 過去のUNIQLOのWebコンテンツも見 直してみたいと思って簡単にまとめました。 というわけでUNIQLOのWebコンテンツをプロジェクト一覧からと、UNIQLO内で気に入ったコンテンツも混ぜてご紹介。 ご存知UNIQLOのTOPページ。 UNIQLO UNIQLOOKS スタートアップしたばかり。数ヶ国同時スタートのようなのでFacebook連動が一番相性良さそうですね。Flickrでもいいのにとも思ったんですが、理由が分かってスッキリです。 UNIQLOOKS ULTRA LIGHT TWEET! Twitterのアカウントを入れると、ふぁぼられ数の多いTweetを鳥がパタパタ運ん

css3の情報がかなり増えてきたので 一旦まとめておきます。基本的にはIE が非対応なので、実用はまだまだこれ からという印象でしたが、iPhoneやiPad の普及や、IEにも対応させることが可能 なライブラリの出現でかなり実用性が 上がったように思います。 そういうわけで、ブックマークしておいたcss3関連の情報をまとめて整理してみることにしました。重複した情報は出来る限り削いだつもりです。 ※jQueryなどのJavascriptや、HTML5と組み合わせたTips等の情報は出来る限り割愛しました。 リファレンス / 専門サイトまずは基本と教科書になりそうなサイトを抑える W3C / 公式です。セレクタ一覧CSS3リファレンス / 日本語のリファレンスサイトWebkit CSS Properties / Webkit対応プロパティの一覧。iOSも有りCSS Infos / css1～

Twitter関連の便利なツールがかなり 紹介されて来ていて、そろそろ混乱 してきたのでまとめます。 リンク先は日本語で解説してくれて いる記事にしています。されていない ツールやサイトは載せていません。 今現在は165個のツールがありましたが、今後追加していく可能性もあります。 TwitterWikiに載ってるサービスは極力載せていないつもりですが、若干被ってるかも。 全てのサービスを試したわけではありません。ＭａｃとiPhoneは持って無いですし。。。 また、リンク先を日本の記事にしたのは、海外のサービスに直接貼っても 使い方が分からなければ意味が無いと思った為です。 なので、リンク先がかなり偏っていますが重ねてご了承下さい。 ※コメント頂いたので１５個追加して180個更に20個追加して200個に育った。 ※8月アップデート＞17個増えて217個 ※9月アップデート＞30個増えて247

ちょっと感動したので脊髄反射で ご紹介。日本の不動産サイト向け に作られたプラグインがかなり良い 感じです。不動産サイトの構築も かなり楽になりそうですよ。こういう ものは有料が多いですが、こちらは 無料で提供してくれています。 いつ有料になっておかしくない気がしますので今のうちにDLしておきました。お礼も兼ねて記事にさせて頂きます。 WordPress 不動産向けプラグイン もう、なんというか感謝です。このプラグイン入れるだけで、かなり楽になりますよ。 ざっと機能をご紹介。 専用の投稿画面 ↑　通常の投稿画面とは別に、専用の投稿画面が用意されています。 画像を種類別に分けられる 不動産独特の画像の種類で分けられます。例えばキッチンとかトイレ画像とか。 管理用項目や詳細項目 物件番号、掲載日や制約の有無なども決められます。状態では空いてるかどうかの選択も。また、物件の種別、賃貸なのか分譲な

急に流行ってきましたね、Facebook。 せっかくなのでFacebookを楽しむ時 に役に立つかも知れない記事とかTips などの記事をまとめますのでご覧にな ってはいかがでしょう。役に立つかは 分かりませんけど、僕には役に立ちま した。 という訳でFacebook関連の活用記事とかです。今のFacebookブームの火付けになった記事っぽいのは割愛してます。 順不同です。 Facebookの使い方 基本的な使い方。僕が使い始めた頃、同じ時期に始めた方の9割は「良く使い方が分からない」でした、そういえば。今は分かりやすくなったみたいですね。 Facebookの使い方 Facebook の使い方、マニュアル（日本語） FBの使い方サイトですね。 Facebook の使い方、マニュアル（日本語） Facebookを始めよう！Facebook初心者のための10ステップ+α ここ凄い分かりやすいで