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…

レスポンシブデザインのフレームワーク2種

Kube Framework Kube Framework 超軽量(min:16KB)のフレームワークで、LESSバージョンもあります 全てのモダンブラウザの最新版、IE8+、モバイル用のブラウザに対応 デモページはすっきりとまとまった、端正な顔つきのデザインです。 デモページ CSSHórus …

訃報:憂歌団ドラマー島田和夫(島やん)

<訃報>日本ブルース界を支えたドラマー島田和夫 - NAVER まとめ 島田和夫語録 ○○ちゃん、講談社文芸文庫て、なんであんな高いねん。織田作のん買お思たら1100円!金持っとたからええけど、足らんかったら恥かくとこやった…。

レスポンシブデザインのメモ

CSSコードの配置方法 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 下記ブログ著者のお勧めは、3.の方法レスポンシブ・ウェブデザインでの CSS コードの書き方 一…

はじめてのCSS拡張メタ言語「Less」

CSS拡張メタ言語とは CSS拡張メタ言語はCSSの言語自体を拡張し、CSSには存在しない機能を追加します。CSS拡張メタ言語を利用することで、変数、ミックスイン、入れ子ルール、名前空間、四則演算、関数などの動的な処理をCSSに追加することができます。 「Les…

Facebookソーシャルプラグイン設置方法のメモ

Facebookソーシャルプラグインの種類 Facebookソーシャルプラグインは11種類 Social Plugins-Social Plugins いちばんよく見るLike Button 必要事項を入力し、コードをゲットします。 参考サイト いいねボタンを設置 - 求職者支援訓練Webデザインの勉強 | 風…

Twitterのツイートを視覚化するツール「Twisualise」

Twitterのツイートを視覚化するツール「Twisualise」が面白かったので、ご紹介します。 Twisualise | See Your Twitter :) 試しに、Milla Jovovichのアカウントを入れてみました。 Data Overview 100ツイート(デフォルトで、数値は変えられます)のうち、青…

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

21_21 DESIGN SIGHTで、田中一光の展覧会開催 今日から始まる企画展です。 日本を代表するグラフィックデザイナー 田中一光(1930〜2002)は、伝統の継承から未来の洞察、東と西の国々との交流など、田中自身の言う「デザインの前後左右」を見すえたアートデ…

楽天スーパーWiFi

縦スクロールの1Pサイト トップページ 楽天のポイント分も考えるとすごく安いです。 対応エリア なんか、ほとんどの人が利用できそうな書き方です。 対応エリアに入っているか確かめる やっぱり、というか当然入っていません。 その他の地域のうちは、エリ…

Twitter Bootstrapをさわってみる

Twitter Bootstrapとは Twitter社が作った、CSSフレームワーク jQueryに依存している サンプルページ 公式サイトに3種類のひな型があったので、試しに可変レイアウトをアップロードしてみました。 <html lang="en"> <head> <meta charset="utf-8"> <title>Bootstrap, from Twitter</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </meta></meta></head></html>

悲しい日々 | 金森幸介

上田正樹バージョン 確かに、キー坊(上田正樹)の方が聞きやすいですね。 通り雨 | 金森幸介 この歌は、幸介さんの歌声が合っていると思います。 ドアをあけて | 中山ラビ 高校生の私の頭の中で、ずっとリフレインしていた歌です。

レスポンシブルWebサイト 可変レイアウト+固定レイアウト

可変レイアウト+固定レイアウト Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅可変 広告は、楽天のウィジェットを付けました。 画面サイズごとのデザイン PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>可変レイアウト+固定レイアウト</title> <link rel="stylesheet" href="style-l.css">…</link></meta></meta></head></html>

レスポンシブルWebサイトの固定レイアウト:スマートフォン表示

画面サイズごとのデザイン Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅300px スマートフォンではコンパクトに表示する スマートフォンでの表示をコンパクトに PCサイズ タブレットサイズ スマートフォンサイズ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>スマートフォンでの表示をコン</title></meta></meta></head></html>…

レスポンシブルWebサイトの固定レイアウト:レイアウトの設定

画面サイズごとのデザイン Lサイズ:横幅960px Mサイズ:横幅620px Sサイズ:横幅300px PICKUP STREAM2 ※出来ることが少ないので、せめて写真ぐらいは自分で撮ったものを使おうと思っています。 メイン画像は、アメリカ西海岸のモントレーという小さな街の看…

サイト制作に活かせる? 男性と女性の見え方の違い

男性と女性、物の見え方に違い 最新の研究によると、女性は色の違いを見分けることに優れ、男性は素早く動く物体を目で追ったり、遠くの細かいものを見分けたりすることが得意だという。 同じ色相を知覚するのに男性は女性よりやや長い波長が必要 波長は長い…