SlideShare a Scribd company logo
カ ェ
フ の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サ ト ど なメ ィ ?
イは ん デ ア
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ

More Related Content

What's hot

CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』Naoki Matsuda
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSTakeharu Igari
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
 
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudyExcel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudyTakeshi Komiya
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Mori Kazue
 
あるマークアップエンジニアの 初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの 初期制作時のテンプレ事情
Shingo Iwahori
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 真乙 九龍
 
CSS Framework
CSS FrameworkCSS Framework
CSS FrameworkJoe_noh
 
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそうWataru OKAMOTO
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
Mignon Style
 

What's hot (20)

CSS の歩き方
CSS の歩き方CSS の歩き方
CSS の歩き方
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
 
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSSブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
 
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
 
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
 
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudyExcel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
Excel 方眼紙撲滅委員会 活動報告 2012.11 #odstudy
 
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
 
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディングDreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
Dreamweaver最新ワークフロー!PSDカンプからBootstrapページを世界最速コーディング
 
あるマークアップエンジニアの 初期制作時のテンプレ事情
あるマークアップエンジニアの初期制作時のテンプレ事情あるマークアップエンジニアの初期制作時のテンプレ事情
あるマークアップエンジニアの 初期制作時のテンプレ事情
 
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
 
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座 2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
 
CSS Framework
CSS FrameworkCSS Framework
CSS Framework
 
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
 
WordPress を使いこなそう
WordPress を使いこなそうWordPress を使いこなそう
WordPress を使いこなそう
 
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
 
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティーヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
 
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜 ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
ノンプログラミングWebデザイナーがWordPressをおぼえるためにやったこと 〜巨人の肩にのってみた!〜
 

Viewers also liked

表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ
Naoki Kanazawa
 
Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1
Naoki Kanazawa
 
Design 4 everyone
Design 4 everyoneDesign 4 everyone
Design 4 everyone
Naoki Kanazawa
 
Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2
Naoki Kanazawa
 
Prototyping by Adobe Photoshop
Prototyping by Adobe PhotoshopPrototyping by Adobe Photoshop
Prototyping by Adobe Photoshop
Naoki Kanazawa
 
Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3
Naoki Kanazawa
 
GitHub - How to "pull request"
GitHub - How to "pull request"GitHub - How to "pull request"
GitHub - How to "pull request"
Naoki Kanazawa
 
模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !
Naoki Kanazawa
 
Prototyping by Adobe Illustrator
Prototyping by Adobe IllustratorPrototyping by Adobe Illustrator
Prototyping by Adobe Illustrator
Naoki Kanazawa
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
Naoki Kanazawa
 
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
Mharu
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Tomoyuki Arasuna
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
Tsutomu Sogitani
 

Viewers also liked (13)

表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ表現別、PhotoshopとIllustratorの使い分けを学ぶ
表現別、PhotoshopとIllustratorの使い分けを学ぶ
 
Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1Document Design by Adobe Illustrator - 1
Document Design by Adobe Illustrator - 1
 
Design 4 everyone
Design 4 everyoneDesign 4 everyone
Design 4 everyone
 
Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2Document Design by Adobe Illustrator - 2
Document Design by Adobe Illustrator - 2
 
Prototyping by Adobe Photoshop
Prototyping by Adobe PhotoshopPrototyping by Adobe Photoshop
Prototyping by Adobe Photoshop
 
Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3Document Design by Adobe Illustrator - 3
Document Design by Adobe Illustrator - 3
 
GitHub - How to "pull request"
GitHub - How to "pull request"GitHub - How to "pull request"
GitHub - How to "pull request"
 
模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !模倣から学ぶデザインの手法 by Life is Tech !
模倣から学ぶデザインの手法 by Life is Tech !
 
Prototyping by Adobe Illustrator
Prototyping by Adobe IllustratorPrototyping by Adobe Illustrator
Prototyping by Adobe Illustrator
 
頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !頭を柔らかくするデザインの発想 by Life is Tech !
頭を柔らかくするデザインの発想 by Life is Tech !
 
プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割プロジェクトマネジメントは仕組み化が9割
プロジェクトマネジメントは仕組み化が9割
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 

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

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことMasakazu Muraoka
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」Takashi Endo
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
Hideki Akiba
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
【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コンポーネント の選定と活用ポイント
Developer Solutions事業部 メシウス株式会社 (旧グレープシティ株式会社)
 
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 Future
masaaki komori
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
schoowebcampus
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
DIVE INTO CODE Corp.
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Masayuki Abe
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
Sho Ito
 
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
masaaki komori
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
Hideki Akiba
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_Kelly Holonic
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Masayuki Abe
 
About rails 3
About rails 3About rails 3
About rails 3
issei126
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
Masakazu Muraoka
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
Atushi Sugiyama
 

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

ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったことON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
 
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
2014年メディア工房勉強会 第1章「Webの仕組みとHTML5」
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
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コンポーネント の選定と活用ポイント
 
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制作
 
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
スマホサイトを作って学ぶ、サイト制作入門 (制作編) 先生:池田 祐太郎
 
初めてのWebプログラミング講座
初めてのWebプログラミング講座初めてのWebプログラミング講座
初めてのWebプログラミング講座
 
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
Material DesignをPolymerで表現しよう(神戸ITフェスティバル × HTML5fun@神戸)
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
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
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
Bootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭りBootstrapにちょい足しアニメーション@春のJavascript祭り
Bootstrapにちょい足しアニメーション@春のJavascript祭り
 
About rails 3
About rails 3About rails 3
About rails 3
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
 
フロンエンドトレンドについて話そう
フロンエンドトレンドについて話そうフロンエンドトレンドについて話そう
フロンエンドトレンドについて話そう
 

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