2012-01-01から1年間の記事一覧

画像から色を抽出してくれるカラーパレット4種

「この画像のイメージっていいな」と思った時に、画像から自動的に色を抽出してくれるカラーパレットを4種類ご紹介します。 自分のイメージを膨らませるのにもいいし、実際のWebサイト制作にも使えると思います。 Color Palette Generator Color Palette Gen…

スクリーンショットをGoogleドライブに保存できるGoogle Chrome 拡張機能

スクリーンショット(キャプチャー画像)をとる Webデザイン勉強中で、Webデザイン系のブログを書いていると、Webサイトのスクリーンショットを取る機会が多いと思います。 方法はいろいろありますが、私は以下を使うことが多いです。 窓フォト ・・・フリー…

無料ウェブサイト作成サービス「Wix(ウィックス)」が日本語版を12月11日にリリース

Wix.comがついに日本語で新登場 Wixは、イスラエル生まれの無料オンラインウェブサイト作成サービスです。 テンプレートを選んで、簡単なドラッグ&ドロップでサイトをカスタマイズするだけで、まるでプロ顔負けのWebページが作成できます。 ただ、英語やド…

無料で使えるjQueryのレスポンシブ・イメージスライダー

jQueryのレスポンシブ・スライダーが使いたい時のために、メモしておきます。 ◆基本的なjQueryイメージスライダー シンプルで軽量な、jQueryイメージスライダーです。 ソースのダウンロード ◆レスポンシブサムネイル ​​ギャラリープラグイン サムネイルがコ…

新世代Web制作テクニック・総特集

スマートフォン・ソーシャルメディア・WordPress 昨日、うちから一番近い図書館に、このインプレスムックがあったので借りて来ました。書店で見て、「買いたいけど高いなぁ」と思っていた雑誌です。 一番近いと言っても、「車10分+フェリー30分+車30分」か…

jQuery-横スライドメニューを使ったサイト

liteAccordionのバリエーション 普通に目にするサイトで、この横スライドメニューを使ったサイトを見かけなかったので、記録しておきます。 (単に私が目にしなかっただけだけです)Hilton HHonors™ - MyWay Benefits Gold

jQuery-パララックス効果を使ったスライダー

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>

CSS3アニメーションでひらひら揺れるナビゲーション

CSS Swinging Panel Menu 以前、画像をゆらゆらと振り子のようにアニメーションで揺らすスタイルシートでも感じましたが、CSSで指定して動くというのはすごく面白いです。 ナビゲーションにカーソルをあてると、下記の黒いパネル部分がひらひら揺れてから止…

Themeforestで、いかにもモンドリアンなFacebookのテンプレート

Mondrian - HTML/CSS Facebook Template 海外のテンプレート販売サイトThemeforestを眺めていたら、いかにもMondrianなテンプレートを見つけました。 白、赤、黄、青の四角を、太めの黒の枠線で囲んだら、たちまちモンドリアンになります。 モンドリアンの絵…

HTML5でのマークアップ

【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>

Google Chromeの拡張機能、WhatFont Toolでフォントを調べる

WhatFont Toolとは WhatFont Toolは、サイトを閲覧していて「このフォントは何を使っているんだろう?」と思った時の疑問に答える、Google Chromeの拡張機能です。 WhatFont Tool 上記サイトから、Chromeの拡張機能、またはブックマークレットでお試しくださ…

FacebookのLikeboxをはてなダイアリーのサイドバーに設置する方法

FacebookのLikeboxコードをゲット Facebook Likebox 設置のページ このページで自分のURLを入れて、コードを生成します。 Get Code のボタンを押すと下記のポップアップが出ます。HTML5、XFBML、IFRAME、URLがありますが、IFRAMEを選びます。 Google Gadget…

ワイヤーフレームが手軽に作れるWireframe.cc

reframe.ccを使ってみる Wireframe.cc 初期画面実際にさわってみました見たまま直感でワイヤーフレームがサクサク作れました。 シンプルで簡単に操作できるのが良いと思います。URLが発行され、共有した人が誰でも編集できるのも便利です。 高機能ではないけ…

情報のキュレーションサービス、Gunosy(グノシー)

Gunosy(グノシー)って何? Gunosy(グノシー)は、TwitterのツイートやRTの内容、FacebookのLike情報や、はてなブックマークの情報などのデータから、興味や関心を分析して、1日一回ニュースを届けるサービスです。 Gunosy Gunosyについて書いているブログ…

jQueryプラグインで画像の一部をズームアップする

jqZoom 下記「小粋空間」さんのソースをお借りして、画像がズームアップするプラグインを試してみました。オンラインショッピングのサイトでよくあるズームは、このようにして作ればいいのですね。あとから、きちんと理解できるように確認してみたいと思いま…

レスポンシブWebデザインの表示確認ツール Responsivator

Responsivator Responsivator レスポンシブデザインのサイトを制作する時に、複数のサイズ表示を同時に確認できるツールです。以前練習で作ったレスポンシブのサイトを入れてみました。 表示を確認する際に便利ですね。 サイズ変更 表示サイズの変更も可能で…

イオン ヒートファクトのテレビCMが気になった

HEATFACT 30秒のTVCM。 スマートフォンやタブレットを操作するイメージで、CMが進行していきます。 スマホはここまで浸透して来ているのですね。 誘導先のサイト HEATFACT サイト自体は、特にスマホフレンドリーではない気がします。

桑名正博

FUNNY COMPANNY ファニカンの歌を聴く夜。 佐藤博(ピアノ) 佐藤博さんが関西にいた頃、よくライヴで聞いていました。めっちゃカッコ良かった。 先週、鈴木さんと佐藤さんの話題が出たところだったのに・・・1日にふたりの訃報。このキーボードが佐藤博さん…

横アコーディオンの綺麗なサイト

Woodwork サイトを見る サイトのベースが白黒で、作品のビビットな色合いを生かしています。 サイトが軽く、うちの超遅回線でもストレスなく表示するのが好感度大。 良いサイトと紹介されているものでも、うちの回線で開かないものは見ないです。(あ、見れ…

バイバイ グッドバイ サラバイ

6ヶ月間、お疲れ様でした。

レスポンシブデザインの軽量なフレームワーク

Simple Grid レスポンシブWebデザイン対応のシンプルなCSSフレームワークです。 Simple Grid Content Columns Layout Columns

花いちもんめ

はっぴいえんどの時の鈴木茂さんは、まだ10代だったはず。「この曲は、イントロのギターを聞くだけで、ぞくぞくするよね」と、ディレクターの友人。 今日は生で聞いていたら、ちょっとうるうるしちゃった・・・

PhotoshopCS6を利用したスライス

チュートリアルサイト 動画のチュートリアルで、サンプルも用意されています。【Photoshop】コーディングする時のスライス方法とか - CSS HappyLife

Photoshop アクション

基本のアクション使用方法 Dearps 〜Adobe Photoshopに関するTipsや便利な裏技を紹介するサイトです〜 » アクション使用方法【基本編】 バッチ処理 フォトショップ : 大量の画像を、自動で補正、サイズ変更、保存するバッチ処理 - Goodpic 無料Photoshopアク…

企画展「田中一光とデザインの前後左右」

21_21 DESIGN SIGHT 21_21 DESIGN SIGHT 企画展「田中一光とデザインの前後左右」公式ページ サイトはポスターの黄色とブルーで余計な色はなく、一光展にふさわしい感じです。 「私の一光さん」という、コラムコーナーが良いです。

jQuery Destaque

これ、使ってみたいなぁ・・・ jQuery Destaque

ランディングページ

ランディングページとは ランディングページとは、リスティング広告などのWeb広告や、グーグルやヤフーなどの検索エンジンをクリックした際に表示されるウェブページです。 LPO(Landing PageOptimization) ランディングページを最適化すること。 ランディ…

NetBeans IDE って何?

IDE(統合開発環境) 統合開発環境(とうごうかいはつかんきょう)、IDE (Integrated Development Environment) は、ソフトウェアの開発環境 従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境(多く…

「ムサビのデザイン 武蔵野美術大学のデザインコレクションと教育」展

東京ミッドタウン・デザインハブ第36回企画展 下記イベントに行く予定です。って、東京までのチケットもまだとってないけれど。 台風21号の行方もあやしいしね。 ○トークイベント1 日時: 2012 年10 月16 日[火]18:00-20:00 テーマ: 「デザインの時代」で…

WordPressのデフォルトテーマTwenty Eleven

WordPressのデフォルトテーマTwenty Elevenについてのメモです。 Twentye Eleven の日本語訳 Twenty Eleven テーマ内の説明を日本語訳しました | 8bitodyssey.com Twentye Eleven のレスポンシブ構造の図解 Twentye Elevenは、#pageのmax-width: 1000pxとcss…