実践！CSSデザインの「型」でみる視覚表現テクニック

「型」視覚表現テクニック

実践！CSSデザインのでみる

境祐司

Designer meets Designers SESSION 5

2007.8.10

残暑お見舞い申し上げます暑さ厳しき折柄、くれぐれもご自愛のほどお祈り申し上げます

自己紹介

境祐司Instructional Designer

インストラクショナル・デザイナーとして学校、企業の講座プラン、教育マネジメント、講演、書籍執筆などの活動

を行う。2000年より情報デザイン関連のオンライン学習実証実験を始める。モバイルを活用した新しい学習環境を

提案、専用ネットワークにて実験サイトcommon style.を運営。現在、教育デザイナー育成を目的としたフォーラム

を立ち上げるため準備中。著書に『Making a Rule for Web Design』（ソーテック）、『CSSビジュアルデザイ

ン・メソッド』（毎日コミュニケーションズ）、『XHTMLマークアップ＆スタイルシートリフォームデザインガイ

ドブック』（ソシム）、『改訂新版 Webデザイン基礎』（技術評論社）など。

自己紹介

・企業の講座プラン・教育マネジメント

自己紹介

2007年はあと5冊ほど出版される予定

技waza

subject

最新動向New Trends of CSS

ブラウザ対策browser fixed

基礎デザインBasic Design

仕様書http://www.w3.org/TR/CSS21/

subject

変わらないもの

日々変化するもの

Introduction

Web standards 1998-2000Before/After CSS Design

1998年頃のCSS学習デザイナーはどのような勉強をしていたか？

Webスタイルシート活用ガイドCSSの基礎から応用まで著：スティーブン・マルダー／訳：安藤慶一発行：プレンティスホール出版／定価2,600円＋税

1997年11月出版

1998～2000年頃のCSS学習「カスケードの理解」

1998～2000年頃のCSS学習「継承の理解」

1998～2000年頃のCSS学習「詳細度の理解」

スタイルシートWebデザインCSS2完全解説著：すみけんたろう

発行：技術評論社／定価1,980円＋税

1998年8月出版

1998～2000年頃のCSS学習「構造化の重要性」

ユニバーサルHTML/XHTML著：神崎正英

発行：毎日コミュニケーションズ／定価2,200円＋税

2000年11月出版

1997年1998年1999年2000年

カスケードスタイルの継承

ルールとルールの競合

詳細度CSSフォーマットモデル

ブラウザ戦争を終結させるためにHTMLを再確認

情報デザインアクセシビリティ

ユーザビリティ

1997年1998年1999年2000年

しかし、CSSは普及せず

1997年1998年1999年2000年

物理マークアップに駆逐される

1997年1998年1999年2000年

独自拡張仕様と視覚表現

HTMLだけのマルチカラムレイアウト

1998年

Netscape Communicator 4.75

CSSは使わずHTMLで段組み

multicol 要素Netscape 3.x - 4.x

Netscape Communicator 4.75

multicol要素（ページの段組みを指定する）spacer要素（余白を指定する）blink要素（テキストを点滅させる）marquee要素（テキストをスクロールさせる）bgsound要素（音楽を再生する）

ブラウザに次々と搭載される独自拡張仕様

簡単に段組みレイアウトが表現できるHTMLだけで

非構造化ドキュメントの氾濫

簡単に段組みレイアウトが表現できるHTMLだけで

独自拡張仕様はWebを混乱させる非構造化ドキュメントの氾濫

HTMLやCSSを正しく実装したブラウザが流通しない限り、Web制作者の意識も変わらない

WaSP設立

1998年

The Web Standards Project

言葉の力

Web Standards

象徴・要求・啓蒙Web Standards

ブラウザーベンダーに対してはW3Cが勧告する技術標準に沿った実装をおこない、独自拡張仕様のサポートを控えるよう意見する

象徴・要求・啓蒙Web Standards

Web制作者には、正しいマークアップを即し「特定のブラウザに依存しない柔軟性の高い

Webサイト」作りが多くの利点を持つことを説く

1997年1998年1999年2000年

2001年2002年2003年2004年

1997年1998年1999年2000年

2001年2002年2003年2004年

1997年1998年1999年2000年

2001年2002年2003年2004年

10月、Wired NewsがCSSレイアウトを採用12月、W3CもテーブルからCSSレイアウトへ

1997年1998年1999年2000年

2001年2002年2003年2004年

5月、css Zen Gardenが公開される

1997年1998年1999年2000年

2001年2002年2003年2004年

CSS関連の書籍、セミナーなどが増加する

2005年2006年2007年2008年

CSSから学んだWebデザイナーの登場テーブルレイアウトを知らない

Web標準の教科書

著：益子貴寛発行：秀和システム／定価2,400円＋税

2005年7月出版

XHTMLとCSSでつくる正しいWebサイト

2005年2006年2007年2008年

業界で進む世代交代と洗練されるCSSデザイン

2005年2006年2007年2008年を知るCSSデザイン視覚表現の「今」

技waza

Cascading Style Sheets

技waza

視覚表現の

機能美

FunctionalBeauty

Functional Beauty

技waza

視覚表現の

スキルアップskill up

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

負担

・背景色および背景画像が表示されない・ナビゲーションバーの表現で、画像置換を使うと　Firefoxだけテキストのアンダーラインが表示されてしまう・@importで外部CSSを読み込む場合、一瞬デフォルトの　状態で表示されてしまう・ユニバーサルセレクタでデフォルトCSSの値を　リセットしても、IE6の一部の要素には適用されない・ショートハンドで記述する際、部分的に値を省略すると　デフォルト値にもどってしまう・隣接する画像に隙間ができてしまう・意図しないスクロールバーが表示されてしまう

・背景画像が固定できない・絶対配置した要素が他の要素を隠してしまう・ボックスからテキストがあふれてしまう・指定したマージンが倍の値になりレイアウトが　変わってしまう・ボーダーのスタイル指定が反映されない・ブラウザによって文字が極端に小さくなってしまう・最上部に表示されている見出しなどが欠けてしまう・リストの項目間に隙間ができてしまう・IE7のページズームを使った場合、背景画像が拡大されない・IE7のページズームで文字が重なってしまう

負担

ピクセルパーフェクトデザイン

New Trends of CSS

pixel-perfect design

New Trends of CSS

pixel-perfect designどのブラウザでも同じデザインで表示させる［文字サイズをピクセル指定、見栄えのためにCSSハック使用］

アダプティブデザイン

adaptive design

New Trends of CSS

コミュニティinternet community

educational institution

各国のコミュニティlocal community

専門誌・セミナーmedia / seminar

書籍・学校book / educational institution

技waza

CSSデザインの技法はから提案される「個人」

creator's creator

creator's creatorクリエーターのお手本になるクリエーターの存在

CSS技法の情報を得る

alpha blogger assetアルファブロガー・アセット

creator's creator

効率良く情報を得る

RSS Feed

Fast ladder http://fastladder.com/

RSS Feedを活用する

CSSデザインを体系的に習得するコツ

デザインの

良いデザインをたくさん見るを覚えて、「型」

dismantle learningディスメント・ラーニングのススメ

ディスメント・ラーニングで役立つツール

Web Developerhttp://chrispederick.com/work/web-developer/

http://www.infoaxia.com/tools/webdeveloper/

http://www.infoaxia.co.jp/株式会社インフォアクシア

Web Developer日本語版

dismantle learning

W3C http://www.w3.org/

dismantle learning

CSSを無効にする

dismantle learning

スタイル情報を表示する

dismantle learning

スタイル情報

dismantle learning

CSSを表示する

dismantle learning

ページのサイズを表示する

dismantle learning

みずほ証券 http://www.mizuho-sc.com/ja/index.html

dismantle learning

21のCSSファイル

dismantle learning

愛・地球博 http://www.expo2005.or.jp/jp/

dismantle learning

21のCSSファイル

CSS RuleCSSデザインのルール

CSS Rule

hicksdesign http://www.hicksdesign.co.uk/

CSS Rule

メッセージ

XHTMLソースのコメント

CSS Rule

The Web Standards Project [WaSP] http://www.webstandards.org/

CSS Rule

CSSハック専用のCSSファイル

CSS Rule

TextDrive http://textdrive.com/

CSS Rule

フロートのクリアや非表示などの指定をまとめる

Global Navigationstep1-17construction

技法の記録

Apple.com

XHTML & CSS

#globalheader { width: 982px; height: 38px;

margin: 18px auto; position: relative; z-index: 9998; }

#globalheader #globalnav { margin: 0; padding: 0; }

#globalheader #globalnav li { display: inline; }

#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }

Global Navigation Image

PNG & GIF

#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }

#globalheader #globalnav li a, #globalheader #globalsearch {

background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat;}

#globalheader #globalnav li a, #globalheader #globalsearch {

background-image: url(globalnavbg.png); _background-image: url(globalnavbg.gif); background-repeat: no-repeat;}

#globalheader #globalnav li#gn-store a { background-position: 0 0; }#globalheader #globalnav li#gn-store a { background-position: -117px 0; }

#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }

#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }

#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }

step10

#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }

step11

#globalheader #globalnav li#gn-support a { background-position: -702px 0; }

step12

/* OVER STATES */

#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }

step13

/* PRESSED STATES */

#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }

step14

/* ON STATES */

#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

step15

/* ON STATES */

#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }

step15

#globalsearch { width: 163px; height: 38px; position: absolute; top: 0; right: 0; background-position: 100% 0; background-repeat: no-repeat; }

step16

#globalsearch label .prettyplaceholder { display: none; }

step17

Global Navigation

step1-17construction

Apple.com

Global Navigation

step1-17construction

Apple.com

技法の記録

・時間をかけて体系的に学ぶなら書籍や学校・仕事をしながら(限られた時間で)学ぶなら　ディスメント・ラーニング

技法の記録

表現の分解仕組みの分解

技法の記録

技Cascading Style Sheets

技法の記録

技法の記録技法の記録

技法の記録

技技法の記録

技法の記録技法の記録

技法の記録

waza waza

wazawaza

事例

CSS dismantle learning

elastic layout outlineエラスティックレイアウト概論

elastic layout outlinenew+

elastic layoutエラスティックレイアウトとは？

elastic layout outline

fluid elastic layout

fixed elastic layout

ブラウザのウィンドウサイズにあわせて変更される

フォントサイズにあわせて変更される

（min-width, max-widthによる制限付き可変）

Mozilla Foundation http://www.mozilla.org/

elastic layout outlineMozilla Corporationhttp://www.mozilla.com/en-US/

elastic layout outlinefluid layout

GBHXonline.com http://gbhxonline.com/

elastic layout detailsエラスティックレイアウトに関する経緯

elastic layout details

A List Aparthttp://alistapart.com/

2004年1月9日Elastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/

2005年4月25日Fixed or fluid width? Elastic!

http://www.456bereastreet.com/archive/200504/fixed_or_fluid_width_elastic/

Stuff and Nonsensehttp://www.stuffandnonsense.co.uk/

Andy Clarke

2005年8月24日A List (taken) Aparthttp://www.stuffandnonsense.co.uk/archives/a_list_taken_apart.html

2005年11月26日Resolution dependent style switchinghttp://www.456bereastreet.com/archive/200511/resolution_dependent_style_switching/

Particletreehttp://particletree.com/

Dynamic Resolution Dependent Layoutshttp://particletree.com/examples/dynamiclayouts/

Dynamic Resolution Dependent Layouts

2005年11月27日Resolution vs. browser size vs. fixed or adaptive width

http://www.456bereastreet.com/archive/200611/resolution_vs_browser_size_vs_fixed_or_adaptive_width/

Resolutionvs.

browser size

fixed or adaptive widthvs.

elastic layout demonstrationエラスティックレイアウト・デモンストレーション

2004年1月9日Elastic Design by Patrick Griffithshttp://alistapart.com/articles/elastic/

Elastic Design Demonstration

h1 { margin: 0.2em 0.5em; color: #666;}

.image { width: 30em; height: 15em; margin: 0.2em 1em; border: 1px solid #000;}

Elastic Design Demonstration

デモンストレーションをご覧ください

Cascading Style Sheetsnew

ここが一番重要

無視できない

アップデート情報は日々

無視できない

アップデート情報は日々

The weird and wonderful world of

Internet Explorer

インターネットエクスプローラーの不可思議な世界へ

The weird and wonderful world of

Internet Explorer

インターネットエクスプローラーの不可思議な世界へ

怖い話192

IE hasLayout outlinehasLayoutプロパティとCSSデザインの関係について

The weird and wonderful world of Internet Explorer

IE hasLayout outlinemsdnInternet Explorer Developer CenterLearn | Cascading Style Sheets (CSS)http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

IE hasLayout outline

http://blogs.msdn.com/ie/IEBlog

BugInternet Explorerのバグ

IE BugIE hasLayout outline

Peekaboo BugInternet Explorer and Expanding Box Problem

Quirky PercentagesLine-height bugBorder Chaos

Disappearing List-Background bugGuillotine Bug

Unscrollable Content bugDuplicate Characters Bug

IE and ItalicsDoubled Float-Margin bug

Duplicate Indent bugThree pixel text jogCreeping Text bug

Missing First letter bugPhantom box bug

CSS hacks and broken pagesページ表示の不具合に対処するためのCSSハック

CSS hacks

Explorer Exposed!The weird and wonderful world of Internet Explorerhttp://www.positioniseverything.net/explorer.html

IE6 Peekaboo Bughttp://www.positioniseverything.net/explorer/peekaboo.html

Explorer Exposed!The weird and wonderful world of Internet Explorer

There are three ways we know to prevent this bug.

1. Keep the clearing div from touching the float, or avoid using a background on div#floatholder. Not exactly ideal.

2. Give both div#floatholder and div#float 'position: relative'. Be sure to fully test this method.

3. Give div#floatholder hasLayout (now the preferred method)

バグに対処するための3つの方法

(now the preferred method)3. Give div#floatholder hasLayout

msdnhasLayout Propertyhttp://msdn2.microsoft.com/en-us/library/ms533776.aspx

haslayouthasLayout Property

Gets a value that indicates whether the object has layout.オブジェクトがレイアウト情報を持っているかどうかを示す

The following example shows how to use the hasLayout property to determine whether an object has layout.

IE hasLayout outlinenew

haslayout・IEの独自拡張／プロパティはread-only・HTMLのすべての要素が対象・要素にレイアウト情報があるのか　true(真)、false(偽)で示す・初期値はfalse・7つのプロパティに特定の値を指定すると　　hasLayoutの値がtrueに変更される

haslayoutCSS property

displayheightfloatpositionwidthwriting-modezoom

inline-blockany valueleft or rightabsoluteany valuetb-rlany value

特定の値を指定するとhasLayoutの値がtrueに変更される

(auto以外)

haslayout

CSS hacks and broken pagesCSS hacks !?

CSSハック！？

haslayout“non-layout” elements

“has layout” elements

haslayout

さまざまな問題が発生する

haslayoutMany common IE float bugs.

Boxes themselves treating basic properties differently.

Margin collapsing between a container and its descendants.

Various problems with the construction of lists.

Differences in the positioning of background images.

Differences between browsers when using scripting.

haslayoutIE6 Peekaboo Bug

浮動化ボックスの親要素に指定した背景色が消える

hasLayout値がfalseで発生

(auto以外)

haslayout浮動化ボックスの親要素に指定した背景色が消える

widthの指定でhasLayout値がtrueに変わる

要素にレイアウト情報があると判断される

haslayout浮動化ボックスの親要素に指定した背景色が消える

widthの指定でhasLayout値がtrueに変わる

要素にレイアウト情報があると判断される

浮動化ボックスの高さが算出されてしまう

(auto以外)

(auto以外)autoを指定するとhasLayoutの値がリセットされる

On having layouthttp://www.satzansatz.de/cssd/onhavinglayout.html

Default layout elements

IE hack managementIE CSSハックの管理

Thoughts on IE hack managementhttp://onhavinglayout.fwpf-webdesign.de/hack_management/

重要

技waza

小技

技waza

小技＋小技＋小技＋小技

一定の型に基づく動作new

技waza

技法の記録技法の記録技法の記録技法の記録

技waza

技法の記録技法の記録技法の記録技法の記録

感性やセンスを問わない技法の形式化が重要

技waza

candy colorrunning shyflash page-buildingIR: rocket vs chameleon

grid layoutbaseline-grid layoutwhite background theorywide-screen composition

utility layout [widget & gadget]sidebar-land buyoutmashup [web application hybrid]

passe-partoutflood-colorappropriation design

技法の一部

Cascading Style Sheets技法の分類

本日は4つのカテゴリを取り上げる

Cascading Style Sheets技法の分類

color-forwardroyal-standard

patchworkcelebrity

color-forward

ビジュアルの刺激で訴求するデザインcolor-forward

color-forwardCameron Moll ~ I {heart} design. http://www.cameronmoll.com/portfolio/

color-forwardThe Consult http://www.theconsult.com/

color-forwardStartseite von >>Denklichter http://www.denk-licht.de/

color-forwardhrasti.com http://www.hrasti.com/

color-forwardElliot Jay Stocks http://elliotjaystocks.com/blog/

color-forwardUniversity of Notre Dame http://glynnhonors.nd.edu/

candy color

candy colorビジュアルの刺激で訴求するデザインcolor-forward

グラデーション＋

ベベル＆ドロップシャドウ

反射＋

角丸＋

candy colorビジュアルの刺激で訴求するデザインcolor-forwardnew+

表現の形式化

一定の型に基づく動作感性やセンスを問わない技法の形式化が重要

グラフィック部品の事例

1. ベベル

2. ボーダー

3.ドロップシャドウ

視覚表現の手法を型で覚える

running shy

color-forwardkara burke illustrations http://www.karaburke.net/prints.php

color-forwardSystima Technology http://www.systima-technology.co.uk/

flash page-building

サイトにアクセスしてください

ビジュアルの刺激で訴求するデザインcolor-forwardnew+

http://home.disney.go.com/http://home.disney.go.com/lite/

Disney.comflash page-building

XHTML & CSS

IR: rocket vs chameleon

ビジュアルの刺激で訴求するデザインcolor-forwardnew+

画像置換

大気圏外(ブラウザ表示領域外)へ飛ばす

同化させる／隠す

IR: rocket vs chameleonビジュアルの刺激で訴求するデザイン

color-forward

背景色に同化させる

color-forward

IR: rocket vs chameleonA

color-forward

文字を小さくして背景色に同化させる

color-forward

IR: rocket vs chameleonB

color-forward

IR: rocket vs chameleonB

color-forward

装飾領域に同化させる

color-forward

IR: rocket vs chameleonC

color-forward

royal-standard

安全で馴染みのあるデザインroyal-standard

grid layoutbaseline-grid layout

grid layout

情報量の多いサイトで検証

royal-standard

フジテレビ

テレビ朝日

日本テレビ

各サイトについて解説いたします

royal-standard

フジテレビ

日本テレビ

テレビ朝日

フジテレビ

日本テレビ

テレビ朝日

royal-standardTunnel 7 http://www.tunnel7.com/

white background theory

「白は安全」

royal-standard

の意味

「白は安全」

royal-standard

の意味カラーリングリスクの問題

royal-standardRikcat Industries http://www.rikcatindustries.com/

royal-standardMark Boulton Design http://www.markboultondesign.com/

royal-standard

wide-screen composition

& elastic layoutwide-screen composition

royal-standard

テレビは着々とワイドスクリーンへ移行

royal-standard

今後、パソコンもワイドスクリーンへ移行する理由

royal-standard

ワイドスクリーンで閲覧する

royal-standard

Webデザインはどう変わる？

elastic layout

royal-standard

elastic layout

Text Zoom royal-standard

Internet Explorer 7

royal-standard

elastic layout

royal-standard

elastic layout

Page Zoom royal-standard

elastic layout

Text Zoom royal-standard

elastic layout

Page Zoom royal-standard

elastic layout

Page Zoom

Text Zoom

royal-standard

elastic layout

みずほ証券 http://www.mizuho-sc.com/ja/index.html

royal-standard

elastic layout

royal-standard

elastic layout

Text Zoom

royal-standard

elastic layout

[FIX-EL] fixed elastic layout

elastic layout343

elastic layout

Internet Explorer 7royal-standard

elastic layout

Page Zoomroyal-standard

elastic layout

D-Size+ PageZoomデフォルトサイズ

royal-standard

ページズームが推奨される理由

royal-standard

スクリーンメディアのアクセシビリティ

情報の種類でみるとテキストズームは等しく情報を提供できない欠陥機能？

スクリーンメディアのアクセシビリティ

ページズームについて考えてみよう

zoom Attribute | zoom Propertyhttp://msdn2.microsoft.com/en-us/library/ms531189.aspx

怖い話351

zoom Attribute | zoom Property

Web制作者がページの拡大率を制御

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能アクセシブルなページコントロール

Internet Explorer 8, 9...?Operaのイメージレンダリングに近づく？

Web制作者がページの拡大率を制御閲覧者はページズーム機能で制御可能(最優先)アクセシブルなページコントロールの実現

CSSハックを排除したシンプルなページ作りへ

CSSハックを排除したシンプルなページ作りへHTMLは世界中の人が使う道具である

CSSハックを排除したシンプルなページ作りへHTMLは世界中の人が使う道具である(リッチなWebにアクセスできない国も多い)

patchwork

マッシュアップで構成するデザインpatchwork

http://www.uniqlo.com/jp/UNIQLO

patchwork

celebrity

対象を絞り高級感でアプローチするデザイン

celebrity

対象を絞り高級感でアプローチするデザイン

celebrity

Earth Mother http://www.earth-mother.com.au/

celebrity

Earth Mother http://www.earth-mother.com.au/

celebrity

hopking design http://www.hopkingdesign.com/

celebrity

hopking design http://www.hopkingdesign.com/

celebrity

対象を絞り高級感でアプローチするデザインcelebrity

passe-partoutパスパルトゥー

Belflora.com http://belflora.com/

celebrity

Belflora.com http://belflora.com/

celebrity

Dara's Garden http://www.darasgarden.com/

celebrity

Dara's Garden http://www.darasgarden.com/

celebrity

flood-color

フラッドカラー

scorereviews.com http://scorereviews.com/default.aspx

celebrity

scorereviews.com

celebrity

vosressources.com http://www.vosressources.com/

celebrity

vosressources.com http://www.vosressources.com/

celebrity

EGOLOUNGE http://www.egolounge.de/

celebrity

appropriation design

DaVinci Gourmet http://www.davincigourmet.com/

celebrity

DaVinci Gourmet http://www.davincigourmet.com/

celebrity

Dalit Freedom Network http://www.dalitnetwork.org/

celebrity

まとめ

書籍・学校book / educational institution

CSSデザインの技法はから「個人」

creator's creatorクリエーターのお手本になるクリエーターの存在

RSS Feedを活用する

デザインの

良いデザインをたくさん見るを覚えて、「型」

技法を知る

技waza

技法を分類する

CSSの技法を調べるディスメント・ラーニングのススメ

良いデザインをたくさん見るFeedを活用して情報を得る

adaptive design

New Trends of CSS

adaptive design

New Trends of CSS

adaptive design

New Trends of CSS

・柔軟性の高いサイト(閲覧環境を制限しない)・できるだけシンプル(情報構築の方針)・ノイズ(CSSハック)の混入は最小限

アダプティブデザインadaptive design

を知るには

世界のコミュニティにアクセスしよう

英語が苦手な人はネットの機械翻訳を利用してもよい

技waza

視覚表現の

世界の技を学び、己の技を磨く日々

ご清聴ありがとうございました

「型」視覚表現テクニック

実践！CSSデザインのでみる

Designer meets Designers SESSION 5

実践！CSSデザインの「型」でみる視覚表現テクニック

Design

デザインの裏のデザインの裏のデザイン - presentation from IA CAMP 2015

数え上げテクニック Hard...tsutaj (Hokkaido Univ.) 数え上げテクニックHard Oct 28, 2019 20/52 Sequence Growing Hard 実装例 Link tsutaj (Hokkaido Univ.) 数え上げテクニックHard

Vivado Design Suite - Xilinx · Vivado Design Suite ユーザーガイドデザイン解析およびクロージャテクニック UG906 (v2013.4) 2013 年 12 月 18 日

SABOS 検索フリー or デザイン or デザイン

浄覚 (blo sbyong) 分派覚え書きrepo.komazawa-u.ac.jp/.../all/36342/jbk075-08-kimura.pdf浄覚(blo sbyong) 分派覚え書き（木村）（21） rang nyid kho nas thugs nyams

パッケージにおける「触覚デザイン」の可能性journal.vrsj.org/14-3/s15-19.pdf感デザイン」の可能性について記述したい． 2．パッケージとの接触機会

CPU の高速化テクニックからスーパーコンピュータまで

Dockerイメージ構築実践テクニック

味覚センサ総説特集味覚に関するISOTサテライトシンポジウム味覚センサ都甲潔（九州大学大学院システム情報科学研究院／味覚・嗅覚センサ研究開発センター）

グローバルデザインパートナープログラムww1.microchip.com/downloads/jp/Market_Communication/...グローバルデザインパートナープログラム 3 Microchip社デザイン

「メニュー」開発のテクニック第10回ミガロ．テクニカルセミナー【セッションNo．2】 Delphi/400開発ノウハウお教えします「メニュー」開発のテクニック

薬局における向精神薬・・覚覚覚せいせい剤原料取 …...薬局における向精神薬・・覚覚覚せいせい剤原料取扱いの手引き平成24年年555月月

視覚と触覚クレーリーのカメラ・オブスクーラモデル再考 · 2019-08-29 · 視覚と触覚:クレーリーのカメラ・オブスクーラモデル再考犬

MAX10 FPGA デザイン・ガイドライン...デザインの仕様 Page3 2014年12月 Altera Corporation MAX10 FPGA デザイン・ガイドラインデザインの仕様多くの場合、FPGA

羽山祥樹 HAYAMA Yoshiki - LinkshareUXデザインに学ぶ、ターゲット心理の分析テクニックインフォメーションアーキテクト HCD-Net認定人間中心設計専門家

UNICODE とサニタイジング回避テクニック - dip.jprocketeer.dip.jp/secProg/unicodebug004.pdf5 UNICODEとサニタイジング回避テクニック 1.1 UNICODE とサニタイジング回避テクニックとは(本文書の目的)

視覚・触覚・嗅覚情報を持つクロスモーダルメディ …...視覚・触覚・嗅覚情報を持つクロスモーダルメディアの印象評価 The Cross-modal

スタンフォード・デザイン・ガイドデザイン思考 5 …...スタンフォード・デザイン・ガイドデザイン思考 5つのステップスタンフォード大学

画像デザインの保護について...UI/UX デザインのアプローチが重要コト・体験 / 見えないモノ、コトを視覚化する / 概念を再定義する

味覚、嗅覚味覚 1．味覚の一般的性質square.umin.ac.jp/seiri08/physiology2/GustOlf'16.pdf味覚、嗅覚化学物質が接触（溶解）することにより生じる