2012-01-01から1年間の記事一覧
「この画像のイメージっていいな」と思った時に、画像から自動的に色を抽出してくれるカラーパレットを4種類ご紹介します。 自分のイメージを膨らませるのにもいいし、実際のWebサイト制作にも使えると思います。 Color Palette Generator Color Palette Gen…
スクリーンショット（キャプチャー画像）をとる Webデザイン勉強中で、Webデザイン系のブログを書いていると、Webサイトのスクリーンショットを取る機会が多いと思います。 方法はいろいろありますが、私は以下を使うことが多いです。 窓フォト ・・・フリー…
Wix.comがついに日本語で新登場 Wixは、イスラエル生まれの無料オンラインウェブサイト作成サービスです。 テンプレートを選んで、簡単なドラッグ＆ドロップでサイトをカスタマイズするだけで、まるでプロ顔負けのWebページが作成できます。 ただ、英語やド…
jQueryのレスポンシブ・スライダーが使いたい時のために、メモしておきます。 ◆基本的なjQueryイメージスライダー シンプルで軽量な、jQueryイメージスライダーです。 ソースのダウンロード ◆レスポンシブサムネイル ギャラリープラグイン サムネイルがコ…
スマートフォン・ソーシャルメディア・WordPress 昨日、うちから一番近い図書館に、このインプレスムックがあったので借りて来ました。書店で見て、「買いたいけど高いなぁ」と思っていた雑誌です。 一番近いと言っても、「車10分＋フェリー30分+車30分」か…
liteAccordionのバリエーション 普通に目にするサイトで、この横スライドメニューを使ったサイトを見かけなかったので、記録しておきます。 (単に私が目にしなかっただけだけです）Hilton HHonors™ - MyWay Benefits Gold
Parallax Slider with jQuery 使ってみたいスライダーなので、メモしておきます。 DEMOサイト HTML <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"> <div class="pxs_bg1"></div> <div class="pxs_bg2"></div> <div class="pxs_bg3"></div> </div> <div class="pxs_loading">Loading images...</div> </div>
CSS Swinging Panel Menu 以前、画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシートでも感じましたが、CSSで指定して動くというのはすごく面白いです。 ナビゲーションにカーソルをあてると、下記の黒いパネル部分がひらひら揺れてから止…
Mondrian - HTML/CSS Facebook Template 海外のテンプレート販売サイトThemeforestを眺めていたら、いかにもMondrianなテンプレートを見つけました。 白、赤、黄、青の四角を、太めの黒の枠線で囲んだら、たちまちモンドリアンになります。 モンドリアンの絵…
【HTML5_A01】 DEMO <html lang="ja"> <head> <meta charset="UTF-8"> <title>【HTML5_A01】</title> </head> <body> <section> <h1>日記</h1> <time datetime="2012-11-16" pubdate="pubdate">2012年11月16日</time> <p>今日は、冬休みに行きたい旅行先をピックアップした。</p> <ul> <li>メキシコ</li> <li>南アフリカ</li> </ul> </section> </body>…</html>
WhatFont Toolとは WhatFont Toolは、サイトを閲覧していて「このフォントは何を使っているんだろう？」と思った時の疑問に答える、Google Chromeの拡張機能です。 WhatFont Tool 上記サイトから、Chromeの拡張機能、またはブックマークレットでお試しくださ…
FacebookのLikeboxコードをゲット Facebook Likebox 設置のページ このページで自分のURLを入れて、コードを生成します。 Get Code のボタンを押すと下記のポップアップが出ます。HTML5、XFBML、IFRAME、URLがありますが、IFRAMEを選びます。 Google Gadget…
reframe.ccを使ってみる Wireframe.cc 初期画面実際にさわってみました見たまま直感でワイヤーフレームがサクサク作れました。 シンプルで簡単に操作できるのが良いと思います。URLが発行され、共有した人が誰でも編集できるのも便利です。 高機能ではないけ…
Gunosy（グノシー）って何？ Gunosy（グノシー）は、TwitterのツイートやRTの内容、FacebookのLike情報や、はてなブックマークの情報などのデータから、興味や関心を分析して、1日一回ニュースを届けるサービスです。 Gunosy Gunosyについて書いているブログ…
jqZoom 下記「小粋空間」さんのソースをお借りして、画像がズームアップするプラグインを試してみました。オンラインショッピングのサイトでよくあるズームは、このようにして作ればいいのですね。あとから、きちんと理解できるように確認してみたいと思いま…
Responsivator Responsivator レスポンシブデザインのサイトを制作する時に、複数のサイズ表示を同時に確認できるツールです。以前練習で作ったレスポンシブのサイトを入れてみました。 表示を確認する際に便利ですね。 サイズ変更 表示サイズの変更も可能で…
HEATFACT 30秒のTVCM。 スマートフォンやタブレットを操作するイメージで、CMが進行していきます。 スマホはここまで浸透して来ているのですね。 誘導先のサイト HEATFACT サイト自体は、特にスマホフレンドリーではない気がします。
FUNNY COMPANNY ファニカンの歌を聴く夜。 佐藤博（ピアノ） 佐藤博さんが関西にいた頃、よくライヴで聞いていました。めっちゃカッコ良かった。 先週、鈴木さんと佐藤さんの話題が出たところだったのに・・・1日にふたりの訃報。このキーボードが佐藤博さん…
Woodwork サイトを見る サイトのベースが白黒で、作品のビビットな色合いを生かしています。 サイトが軽く、うちの超遅回線でもストレスなく表示するのが好感度大。 良いサイトと紹介されているものでも、うちの回線で開かないものは見ないです。（あ、見れ…
6ヶ月間、お疲れ様でした。
Simple Grid レスポンシブWebデザイン対応のシンプルなCSSフレームワークです。 Simple Grid Content Columns Layout Columns
はっぴいえんどの時の鈴木茂さんは、まだ10代だったはず。「この曲は、イントロのギターを聞くだけで、ぞくぞくするよね」と、ディレクターの友人。 今日は生で聞いていたら、ちょっとうるうるしちゃった・・・
チュートリアルサイト 動画のチュートリアルで、サンプルも用意されています。【Photoshop】コーディングする時のスライス方法とか - CSS HappyLife
基本のアクション使用方法 Dearps 〜Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです〜 » アクション使用方法【基本編】 バッチ処理 フォトショップ : 大量の画像を、自動で補正、サイズ変更、保存するバッチ処理 - Goodpic 無料Photoshopアク…
21_21 DESIGN SIGHT 21_21 DESIGN SIGHT 企画展「田中一光とデザインの前後左右」公式ページ サイトはポスターの黄色とブルーで余計な色はなく、一光展にふさわしい感じです。 「私の一光さん」という、コラムコーナーが良いです。
これ、使ってみたいなぁ・・・ jQuery Destaque
ランディングページとは ランディングページとは、リスティング広告などのWeb広告や、グーグルやヤフーなどの検索エンジンをクリックした際に表示されるウェブページです。 LPO（Landing PageOptimization） ランディングページを最適化すること。 ランディ…
IDE（統合開発環境） 統合開発環境（とうごうかいはつかんきょう）、IDE (Integrated Development Environment) は、ソフトウェアの開発環境 従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境（多く…
東京ミッドタウン・デザインハブ第36回企画展 下記イベントに行く予定です。って、東京までのチケットもまだとってないけれど。 台風21号の行方もあやしいしね。 ○トークイベント1 日時： 2012 年10 月16 日［火］18:00-20:00 テーマ： 「デザインの時代」で…
WordPressのデフォルトテーマTwenty Elevenについてのメモです。 Twentye Eleven の日本語訳 Twenty Eleven テーマ内の説明を日本語訳しました | 8bitodyssey.com Twentye Eleven のレスポンシブ構造の図解 Twentye Elevenは、#pageのmax-width: 1000pxとcss…
