SlideShare una empresa de Scribd logo
1 de 44
Descargar para leer sin conexión
カ ェ
フ のWebサイ を作 て
ト っ

Webデザ ンの
イ
基礎と技術を学ぶ
schoo WEB-campus
2013年10月26日
金澤直毅
Naoki Kanazawa
http://designless.net
?

Webをゼロ ら
か

作った と り すか
こ があ ま ?
?

Webをゼロ ら
か

作る と
こ の意味 は
と?
手仕事
1

読む

2

遊ぶ Playing

3

作る

Making

4

学ぶ

Studying

Reading
1
読む
こ ウ ブページです
れは ェ
http://justinjackson.ca/words_japan.html
設計図 = 完成図
HUMAN

COMPUTER

WEB
SERVER

CLIENT
SKILL?

?

WORDPRE
PHP
ADOBE
JAVASCRIPT
CSS
HTML
SKILL!
2
遊ぶ
Webデザイ
ンの砂場
http://designless.net/editor
HTML
< タグ > H e l l o W o r l d ! < タグ >
html, body, head, h1, h2, h3 h4, h5, h6,
p, ul, li, a, dl, table,
img, div, span, em, strong...
HTML

<html>
<head>
メタ情報

</head>
<body>

<h 1 > 最初に伝えたいこと</h 1 >

<p> 説明などの文章 </p>

コ
ンピュ
ータに伝え
る

<h 2 > 次に伝えたいこと</h 2 >
<p> 説明などの文章 </p>

<ul>
<li> グループ </li>
<li> グループ </li>
<li> グループ </li>
</ul>
</body>
</html>
CSS
セレクタ { プ ロ パ ティ : 値 ; }
color, background, font-size, text-align,
width, height, margin, padding, border,
float, clear, position...
CSS
人にやさ
しい装飾と イ ト
レ アウ
JavaScript
イ タラクシ ンな演出と拡張
ン
ョ
jQuery
$ ( セレクタ ) . メソッド ( 値 )
click, hover,
addClass, removeClass,
fade, toggle, animate...
HTML

CSS

内容

装飾

JS

演出
DEVELOPER TOOL
要素の検証
IMAGE
CSS

images

style.css

flower.jpg

index.html
PATH
ディレクトリ構 成
フォル ダ / ファイル 名 . 拡 張 子

. . / フォル ダ / ファイル 名 . 拡 張 子
3
作る
TOOL
ブラウ ザ + エディタ
Google Chrome
Mozilla Firefox

CotEditor
terapad
素材のダウ ロー
ン ド
http://designless.net/data/schoo20131026.zip
ペリカン カフェ

_resource

_design

_www
?

なぜ、 ェのWebサイ なのか
カフ
ト
?
架 空 の カフェ

Pelican Cafe

北欧

青山

www.pelican-cafe.com
BUSINESS

VISUAL
CODE
CONCEPT
1
HTML = 情報構造
タグの入 れ 子
2
属性

src, href, class, id
3
ボックスモ デル

reset.css
4
j Q u e r y プラグイン
bxslider, colorbox
5
jQuer y仕掛け
fade, scroll,
6
Google Map API
4
学ぶ
試行錯誤
SANDBOX
Webデザイ
ンの砂場
ANNTENA
イプト
ン ッ の仕組み
?
レポー
ト課題

Webサイ は ん デ ア
ト ど なメ ィ ?

Más contenido relacionado

La actualidad más candente

レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローHiroyuki Ogawa
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門Sou Lab
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsYoshinori Kobayashi
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜Mignon Style
 
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?takayuki katumata
 
Mass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptMass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptYoji Shiraki
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようMayuko Moriyama
 
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門Yuki Ishikawa
 
WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とはMignon Style
 
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎schoowebcampus
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎masaaki komori
 
Bootstrapを使ってみよう
Bootstrapを使ってみようBootstrapを使ってみよう
Bootstrapを使ってみようKawaji Masaki
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかたHiroshi Urabe
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそうWataru OKAMOTO
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ知己 久保
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Horiguchi Seito
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングMori Kazue
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜Ayaka Sumida
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうMori Kazue
 

La actualidad más candente (19)

レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフローレスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
 
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.jsグリッドレイアウトを簡単に行うJavaScript!Masonry.js
グリッドレイアウトを簡単に行うJavaScript!Masonry.js
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
プロ向けオンラインサイトクリエイター?「webflow」で 何がどこまで出来るのか?
 
Mass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScriptMass Producing Banner With Photoshop & JavaScript
Mass Producing Banner With Photoshop & JavaScript
 
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしようメニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
 
いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
 
WordBench 東京 とは
WordBench 東京 とはWordBench 東京 とは
WordBench 東京 とは
 
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
非ウェブデザイナーも知っておきたいデベロッパーツールの使い方(基本編 使い方と便利な機能) 先生:池田 祐太郎
 
レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎レスポンシブ・ウェブデザイン基礎
レスポンシブ・ウェブデザイン基礎
 
Bootstrapを使ってみよう
Bootstrapを使ってみようBootstrapを使ってみよう
Bootstrapを使ってみよう
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
 
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
 
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろうイマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
 

Destacado

Escavação do túnel de desvio da barragem de Odeleite
Escavação do túnel de desvio da barragem de OdeleiteEscavação do túnel de desvio da barragem de Odeleite
Escavação do túnel de desvio da barragem de OdeleiteJosé Pinto
 
Presentación pvic modelo pedagogico 17-oct-13 arturo muñoz
Presentación pvic  modelo pedagogico 17-oct-13 arturo muñozPresentación pvic  modelo pedagogico 17-oct-13 arturo muñoz
Presentación pvic modelo pedagogico 17-oct-13 arturo muñozrosaamelia85
 
администрация
администрацияадминистрация
администрацияschool1nogliki
 
Verdenovo Desafio Santander
Verdenovo Desafio SantanderVerdenovo Desafio Santander
Verdenovo Desafio SantanderCNA and ICBEU
 
Me desculpe 2 lindoooo
Me desculpe  2 lindooooMe desculpe  2 lindoooo
Me desculpe 2 lindooooRenan Phn
 
Projeto foresti
Projeto forestiProjeto foresti
Projeto forestiSRSROSSETO
 
Introducción a la CMNUCC
Introducción a la CMNUCCIntroducción a la CMNUCC
Introducción a la CMNUCCCO2.cr
 
Jovenes con perspectivas para rio+20
Jovenes con perspectivas para rio+20Jovenes con perspectivas para rio+20
Jovenes con perspectivas para rio+20CO2.cr
 
Fase de planificación belkys
Fase de planificación belkysFase de planificación belkys
Fase de planificación belkysbelkisrodriguez
 
A temporada de criação começou
A temporada de criação começouA temporada de criação começou
A temporada de criação começouAlcon Pet
 
Consulta medica com_cristo_www.gospel10.com
Consulta medica com_cristo_www.gospel10.comConsulta medica com_cristo_www.gospel10.com
Consulta medica com_cristo_www.gospel10.comAlex Freitas
 
Trabajo de las fuentes de alimentacion
Trabajo de las fuentes de alimentacionTrabajo de las fuentes de alimentacion
Trabajo de las fuentes de alimentacionKelly Soto
 
Brochure qms
Brochure qmsBrochure qms
Brochure qmsSITEF SRL
 
Generación net
Generación netGeneración net
Generación netShainne
 

Destacado (20)

ADHD
ADHDADHD
ADHD
 
Skydrive 1104
Skydrive 1104Skydrive 1104
Skydrive 1104
 
педагоги.
педагоги.педагоги.
педагоги.
 
Escavação do túnel de desvio da barragem de Odeleite
Escavação do túnel de desvio da barragem de OdeleiteEscavação do túnel de desvio da barragem de Odeleite
Escavação do túnel de desvio da barragem de Odeleite
 
Presentación pvic modelo pedagogico 17-oct-13 arturo muñoz
Presentación pvic  modelo pedagogico 17-oct-13 arturo muñozPresentación pvic  modelo pedagogico 17-oct-13 arturo muñoz
Presentación pvic modelo pedagogico 17-oct-13 arturo muñoz
 
администрация
администрацияадминистрация
администрация
 
Verdenovo Desafio Santander
Verdenovo Desafio SantanderVerdenovo Desafio Santander
Verdenovo Desafio Santander
 
Me desculpe 2 lindoooo
Me desculpe  2 lindooooMe desculpe  2 lindoooo
Me desculpe 2 lindoooo
 
Projeto foresti
Projeto forestiProjeto foresti
Projeto foresti
 
Introducción a la CMNUCC
Introducción a la CMNUCCIntroducción a la CMNUCC
Introducción a la CMNUCC
 
Jovenes con perspectivas para rio+20
Jovenes con perspectivas para rio+20Jovenes con perspectivas para rio+20
Jovenes con perspectivas para rio+20
 
Fase de planificación belkys
Fase de planificación belkysFase de planificación belkys
Fase de planificación belkys
 
Forges
ForgesForges
Forges
 
Slide Alexsandra
Slide   AlexsandraSlide   Alexsandra
Slide Alexsandra
 
A temporada de criação começou
A temporada de criação começouA temporada de criação começou
A temporada de criação começou
 
Ser fuerte
Ser fuerteSer fuerte
Ser fuerte
 
Consulta medica com_cristo_www.gospel10.com
Consulta medica com_cristo_www.gospel10.comConsulta medica com_cristo_www.gospel10.com
Consulta medica com_cristo_www.gospel10.com
 
Trabajo de las fuentes de alimentacion
Trabajo de las fuentes de alimentacionTrabajo de las fuentes de alimentacion
Trabajo de las fuentes de alimentacion
 
Brochure qms
Brochure qmsBrochure qms
Brochure qms
 
Generación net
Generación netGeneración net
Generación net
 

Similar a カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道Hideki Akiba
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」xyz corporation
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Masayuki Abe
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座DIVE INTO CODE Corp.
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futuremasaaki komori
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIHideki Akiba
 
あるマークアップエンジニアの 初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの 初期制作時のテンプレ事情Shingo Iwahori
 
About rails 3
About rails 3About rails 3
About rails 3issei126
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_Kelly Holonic
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りMasayuki Abe
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインShumpei Shiraishi
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座光利 吉田
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Futuremasaaki komori
 

Similar a カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ (20)

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
【Web TECH FORUM 2017 in大阪】JavaScript UIコンポーネント の選定と活用ポイント
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 
あるマークアップエンジニアの 初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの 初期制作時のテンプレ事情
 
About rails 3
About rails 3About rails 3
About rails 3
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 

Más de webcampusschoo

再放送キャンペーン0103
再放送キャンペーン0103再放送キャンペーン0103
再放送キャンペーン0103webcampusschoo
 
再放送キャンペーン 1231
再放送キャンペーン 1231再放送キャンペーン 1231
再放送キャンペーン 1231webcampusschoo
 
再放送キャンペーン 123
再放送キャンペーン 123 再放送キャンペーン 123
再放送キャンペーン 123 webcampusschoo
 
再放送キャンペーン 1229
再放送キャンペーン 1229再放送キャンペーン 1229
再放送キャンペーン 1229webcampusschoo
 
再放送キャンペーン1228
再放送キャンペーン1228再放送キャンペーン1228
再放送キャンペーン1228webcampusschoo
 
再放送キャンペーン1227
再放送キャンペーン1227再放送キャンペーン1227
再放送キャンペーン1227webcampusschoo
 
再放送キャンペーン1225
再放送キャンペーン1225再放送キャンペーン1225
再放送キャンペーン1225webcampusschoo
 
再放送キャンペーン1224
再放送キャンペーン1224再放送キャンペーン1224
再放送キャンペーン1224webcampusschoo
 
Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!webcampusschoo
 
これからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメントこれからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメントwebcampusschoo
 
ホームルーム12月_2
ホームルーム12月_2ホームルーム12月_2
ホームルーム12月_2webcampusschoo
 
schoo WEB-campus ホームルーム12月
schoo WEB-campus ホームルーム12月schoo WEB-campus ホームルーム12月
schoo WEB-campus ホームルーム12月webcampusschoo
 
デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門webcampusschoo
 
表現別、PhotoshopとIllustratorの使い
表現別、PhotoshopとIllustratorの使い表現別、PhotoshopとIllustratorの使い
表現別、PhotoshopとIllustratorの使いwebcampusschoo
 
1119 高倉さま fixfix
1119 高倉さま fixfix1119 高倉さま fixfix
1119 高倉さま fixfixwebcampusschoo
 
株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析webcampusschoo
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶwebcampusschoo
 

Más de webcampusschoo (20)

再放送キャンペーン0103
再放送キャンペーン0103再放送キャンペーン0103
再放送キャンペーン0103
 
再放送キャンペーン 1231
再放送キャンペーン 1231再放送キャンペーン 1231
再放送キャンペーン 1231
 
再放送キャンペーン 123
再放送キャンペーン 123 再放送キャンペーン 123
再放送キャンペーン 123
 
再放送キャンペーン 1229
再放送キャンペーン 1229再放送キャンペーン 1229
再放送キャンペーン 1229
 
再放送キャンペーン1228
再放送キャンペーン1228再放送キャンペーン1228
再放送キャンペーン1228
 
再放送キャンペーン1227
再放送キャンペーン1227再放送キャンペーン1227
再放送キャンペーン1227
 
1226
12261226
1226
 
1226
12261226
1226
 
再放送キャンペーン1225
再放送キャンペーン1225再放送キャンペーン1225
再放送キャンペーン1225
 
再放送キャンペーン1224
再放送キャンペーン1224再放送キャンペーン1224
再放送キャンペーン1224
 
1223 再放送
1223 再放送1223 再放送
1223 再放送
 
Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!
 
これからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメントこれからはじめるWebプロジェクトマネジメント
これからはじめるWebプロジェクトマネジメント
 
ホームルーム12月_2
ホームルーム12月_2ホームルーム12月_2
ホームルーム12月_2
 
schoo WEB-campus ホームルーム12月
schoo WEB-campus ホームルーム12月schoo WEB-campus ホームルーム12月
schoo WEB-campus ホームルーム12月
 
デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門デザイナー・コーダーのための黒い画面入門
デザイナー・コーダーのための黒い画面入門
 
表現別、PhotoshopとIllustratorの使い
表現別、PhotoshopとIllustratorの使い表現別、PhotoshopとIllustratorの使い
表現別、PhotoshopとIllustratorの使い
 
1119 高倉さま fixfix
1119 高倉さま fixfix1119 高倉さま fixfix
1119 高倉さま fixfix
 
株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析株式会社LIGを事例に学ぶ、実践的アクセス解析
株式会社LIGを事例に学ぶ、実践的アクセス解析
 
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶカフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
 

カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ