Submit Search
Upload
噴水企画Web講習会
•
Download as PPTX, PDF
•
1 like
•
739 views
Kenta Moriuchi
Follow
三研(噴水企画)会議 2014.02.20
Read less
Read more
Education
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 13
Download now
Recommended
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Htmlの書き方入門編
Htmlの書き方入門編
touhou
Htmlの基礎
Htmlの基礎
SD Labo
Html s3
Html s3
Jun Chiba
Html s2
Html s2
Jun Chiba
Html s1
Html s1
Jun Chiba
Html入門
Html入門
GIG inc.
Recommended
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
Koji SHIMADA
HTML初心者講座
HTML初心者講座
Yusuke Miyazaki
Htmlの書き方入門編
Htmlの書き方入門編
touhou
Htmlの基礎
Htmlの基礎
SD Labo
Html s3
Html s3
Jun Chiba
Html s2
Html s2
Jun Chiba
Html s1
Html s1
Jun Chiba
Html入門
Html入門
GIG inc.
Web講座 第1回
Web講座 第1回
nanametown
html講座
html講座
nitmic
Lesson Html 01
Lesson Html 01
kamihide
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
Html
Html
Minoru Uchida
.インストールをやってみよう
.インストールをやってみよう
ohotech
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
実際のウェブページコーディング
実際のウェブページコーディング
ourmaninjapan
Html part1
Html part1
job one
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
hharita
Doctypeという黒魔術の話
Doctypeという黒魔術の話
亮 門屋
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
「簡体字」と「繁体字」ってなによ
「簡体字」と「繁体字」ってなによ
中條 剛
前期講座03
前期講座03
Takenori Nakagawa
Html1
Html1
Jun Chiba
電技研Web講習
電技研Web講習
So Murata
Html&cssの書き方入門編
Html&cssの書き方入門編
touhou
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
Html講習会資料
Html講習会資料
竹島 泉
HTML
HTML
Jun Chiba
HTML入門
HTML入門
sayoko miura
More Related Content
What's hot
Web講座 第1回
Web講座 第1回
nanametown
html講座
html講座
nitmic
Lesson Html 01
Lesson Html 01
kamihide
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
Shogo Horikawa
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Atsushi Tadokoro
Html
Html
Minoru Uchida
.インストールをやってみよう
.インストールをやってみよう
ohotech
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
Atsushi Tadokoro
実際のウェブページコーディング
実際のウェブページコーディング
ourmaninjapan
Html part1
Html part1
job one
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
hharita
Doctypeという黒魔術の話
Doctypeという黒魔術の話
亮 門屋
JavaScript&Firebug入門
JavaScript&Firebug入門
柴田 篤志
「簡体字」と「繁体字」ってなによ
「簡体字」と「繁体字」ってなによ
中條 剛
前期講座03
前期講座03
Takenori Nakagawa
What's hot
(15)
Web講座 第1回
Web講座 第1回
html講座
html講座
Lesson Html 01
Lesson Html 01
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
芸術情報演習デザイン(web) 第2回:HTML入門
芸術情報演習デザイン(web) 第2回:HTML入門
Html
Html
.インストールをやってみよう
.インストールをやってみよう
メディア芸術基礎 Ⅰ 第2回 HTML入門
メディア芸術基礎 Ⅰ 第2回 HTML入門
実際のウェブページコーディング
実際のウェブページコーディング
Html part1
Html part1
Lt資料 php7.0 張田浩明
Lt資料 php7.0 張田浩明
Doctypeという黒魔術の話
Doctypeという黒魔術の話
JavaScript&Firebug入門
JavaScript&Firebug入門
「簡体字」と「繁体字」ってなによ
「簡体字」と「繁体字」ってなによ
前期講座03
前期講座03
Similar to 噴水企画Web講習会
Html1
Html1
Jun Chiba
電技研Web講習
電技研Web講習
So Murata
Html&cssの書き方入門編
Html&cssの書き方入門編
touhou
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Atsushi Miura
Html講習会資料
Html講習会資料
竹島 泉
HTML
HTML
Jun Chiba
HTML入門
HTML入門
sayoko miura
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
Yasuhito Yabe
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
HTML5の話
HTML5の話
Hiroyuki Nozaki
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
DIVE INTO CODE Corp.
141115 making web site
141115 making web site
Himi Sato
To write a better HTML
To write a better HTML
aotak
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
html5講座 (初心者向け)
html5講座 (初心者向け)
Kohki Nakaji
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
Htmlの基本
Htmlの基本
SD Labo
2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LT
Takako Miyagawa
WebMatrixに対応した、新しいけど新しくないRazor
WebMatrixに対応した、新しいけど新しくないRazor
Sho Okada
Similar to 噴水企画Web講習会
(20)
Html1
Html1
電技研Web講習
電技研Web講習
Html&cssの書き方入門編
Html&cssの書き方入門編
Tech.G HTML5 プレ講座
Tech.G HTML5 プレ講座
Html講習会資料
Html講習会資料
HTML
HTML
HTML入門
HTML入門
今日からはじめるHTML5 ver.2012
今日からはじめるHTML5 ver.2012
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
HTML5の話
HTML5の話
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
アイデアを形にする ②HTML/CSSから始めるWeb技術の基礎
141115 making web site
141115 making web site
To write a better HTML
To write a better HTML
GDG Women DevfestW
GDG Women DevfestW
html5講座 (初心者向け)
html5講座 (初心者向け)
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Htmlの基本
Htmlの基本
2011 PHPカンファレンス関西 懇親会LT
2011 PHPカンファレンス関西 懇親会LT
WebMatrixに対応した、新しいけど新しくないRazor
WebMatrixに対応した、新しいけど新しくないRazor
噴水企画Web講習会
1.
噴水企画Web講習会 ~近年のWebデザイン~ 芸術情報設計学科二年 森島 律子(森内
建太) http://goo.gl/Bqz6Rm
2.
Webサイトの基本
3.
記述形式として HTML(HyperText
Markup Language) を使う。 HTML は文書の形式で大きな特徴としてハイパーリンクという機 能がある。 W3C(World Wide Web Consortium) が標準化しており、最新バー ジョンは HTML5(まだ一部未対応)。 Webサイトの 基本
4.
HTML は入れ子構造。 HTMLの基本 <!DOCTYPE
html> <html> <head> …… </head> <body> …… </body> </html> ←DTD宣言文。この書き方だとHTML5を表す。 ←見た目にあんまり影響しない内容を記述。 ←目に見えるコンテンツはここに記述。 HTMLではあくまで構造を記述する。 T先生みたいに <br /> を埋め込んでスペースを空けない!! 見た目を格好良くしたいなら CSS を埋め込む。 動かしたいなら JavaScript を埋め込む。
5.
CSS は
HTML の見た目をデザインする。 背景黒にしたい background-color: black; 半透明にしたい CSSの基本 Opacity: 0.5; 最新バージョンは CSS3(これまた一部未対応)。 外部ファイルにして埋め込むのが一般的。 <head> <link rel="stylesheet" type="text/css" href="hoge.css" /> </head>
6.
JavaScript は動的に
HTML の中身を変更するプログラミング言語。 Webデザイナー向けに使いやすくした jQuery というライブラリ を使うのが最近の主流。 http://jquery.com/ JavaScriptの 基本 日本語リファレンスもあるけど情報が古い。 http://semooh.jp/jquery/
7.
まずドットインストールというサービスで基本を理解しよう! http://dotinstall.com/ どうやって 勉強したらい いの?
わからないことがあったらグーグル先生に聞こう! それでもわからなかったら自分にリプを!(暇だったら応える) https://twitter.com/printf_moriken
8.
Webデザインについて
9.
Webサイトはもはやパソコンのブラウザで見るものではなく なった。 モバイル ファースト モバイルファーストとはスマートフォン用のWebサイトを先 に作るべきだという考え方。
スマートフォン用の HTML と パソコン用の HTML をどう切り 替えるかが問題。
10.
UserAgent を使って振り分ける。
例 http://www.nhk.or.jp/bijutsu/bijutune/ 別々にHTML を作る方法
11.
レスポンシブデザイン CSSで
window の横幅によってデザインを変更する 例 http://usagee.co.jp/ 同じHTMLを 使う方法
12.
使いやすい、わかりやすいWebサイトになってるか。 User
Interface を考慮しているか。 Webサイトのデータ構造はわかりやすくなっているか。 その他 Webデザイン の重要事項 文字の大きさは適切か。 スマートフォンだと小さすぎて見難い可能性がある。 重要度の高いコンテンツに注目できるようになっているか。 フォントにもこだわる。 すべてのデザインに根拠があるか。 なんでこれはこうしたのという問いに答えられるようになろう。 他のWebサイトからヒントを得てもいいが、そのサイトにももちろん そのデザインにした根拠があるはず!
13.
Retina ディスプレイに対応。
meta タグを使う。 おまけ OGP をちゃんと設定する(Facebookなどのリンクに使われる)。 ~細部にこだわろう~ favicon, webclip などを用意しておく。 テキストファイルの minify をする。 できれば GZIP 化も。
Download now