Submit Search
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
3 likes
•
1,567 views
George Harada
1 of 105
Download now
Downloaded 11 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
More Related Content
PDF
マークアップ講座 01b HTML
eiji sekiya
KEY
Webapp startup example_to_dolist
Shinichiro Kumeuchi
PDF
HTML仕様書を読んでみよう
Saeki Tominaga
PDF
第三回ネットワークチーム講座資料
densan_teacher
PDF
Html5でword pressテーマを作るよ!
Muyuu Fujita
PPTX
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
ODP
webを飾る技術
ina job
PPTX
[BurpSuiteJapan]HTTP基礎入門
Burp Suite Japan User Group
マークアップ講座 01b HTML
eiji sekiya
Webapp startup example_to_dolist
Shinichiro Kumeuchi
HTML仕様書を読んでみよう
Saeki Tominaga
第三回ネットワークチーム講座資料
densan_teacher
Html5でword pressテーマを作るよ!
Muyuu Fujita
CSS Nite in Matsuyama vol.1 - session 4
arisu yano
webを飾る技術
ina job
[BurpSuiteJapan]HTTP基礎入門
Burp Suite Japan User Group
What's hot
(9)
PDF
CSS Design and Programming
Taku AMANO
PDF
Html&cssの書き方入門編
touhou
PDF
なんでCSSすぐ死んでしまうん
Hayato Mizuno
PPTX
Xml builderの紹介
Hiraku Nakano
PDF
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
PDF
壊れやすいCSS
Masahiro Kobayashi
PPTX
20141206 handson
Six Apart
KEY
EC-CUBEプラグイン講義
ria1201
PPTX
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
CSS Design and Programming
Taku AMANO
Html&cssの書き方入門編
touhou
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Xml builderの紹介
Hiraku Nakano
.htaccessによるリダイレクト徹底解説
Cherry Pie Web
壊れやすいCSS
Masahiro Kobayashi
20141206 handson
Six Apart
EC-CUBEプラグイン講義
ria1201
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
Ad
Viewers also liked
(11)
PDF
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
PDF
Lets start-react
Horiguchi Seito
PDF
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
PDF
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
PDF
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
PDF
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
PDF
元コンビニ店長の人生を賭けたエンジニア留学
Horiguchi Seito
PDF
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
PDF
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
PDF
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
PDF
UX白書には本当は何が書かれているか
Masaya Ando
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
Lets start-react
Horiguchi Seito
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
元コンビニ店長の人生を賭けたエンジニア留学
Horiguchi Seito
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
UX白書には本当は何が書かれているか
Masaya Ando
Ad
Similar to HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
(20)
PPT
CSS勉強会
Chisa Youzaka
PDF
Html:css
Yuuki Tazawa
PDF
HTML/CSS
Yoshinaga Kazutaka
PDF
1202css
Yoshinaga Kazutaka
PDF
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
George Harada
PDF
今からハジメるHTML5マークアップ
SwapSkills
PDF
To write a better HTML
aotak
PDF
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
PPTX
Webコーディングの基本+α
takapiya
PDF
GDG Women DevfestW
Tomoko Sato
PDF
Htmlの基礎
SD Labo
PDF
Htmlの基本
SD Labo
PDF
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
PDF
_HTML5で組んでみた_
Kelly Holonic
PDF
HTML5 in Firefox4
dynamis
PDF
Web班番外編
XMLProJ2014
PDF
160412 html001 html概要編
elephancube
KEY
HTML5での制作、いつから始める?
Fuminori Mori
PDF
Css
SD Labo
PDF
HTML5, きちんと。
Masataka Yakura
CSS勉強会
Chisa Youzaka
Html:css
Yuuki Tazawa
HTML/CSS
Yoshinaga Kazutaka
1202css
Yoshinaga Kazutaka
HTML5など社内勉強会 Vol.2 - HTML5, CSS3
George Harada
今からハジメるHTML5マークアップ
SwapSkills
To write a better HTML
aotak
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Webコーディングの基本+α
takapiya
GDG Women DevfestW
Tomoko Sato
Htmlの基礎
SD Labo
Htmlの基本
SD Labo
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
_HTML5で組んでみた_
Kelly Holonic
HTML5 in Firefox4
dynamis
Web班番外編
XMLProJ2014
160412 html001 html概要編
elephancube
HTML5での制作、いつから始める?
Fuminori Mori
Css
SD Labo
HTML5, きちんと。
Masataka Yakura
More from George Harada
(11)
PDF
もし、IT関連企業で働くことになったら
George Harada
PDF
暑い夏のお仕事
George Harada
PDF
What is LT ?
George Harada
PDF
いがいがさんと私
George Harada
PDF
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
George Harada
PDF
HTML5など社内勉強会 Vol.8 - WebSocket
George Harada
PDF
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
George Harada
PDF
HTML5など社内勉強会 Vol.3 keynote
George Harada
PDF
HTML5など社内勉強会 Vol.3 - 入門JavaScript
George Harada
PDF
LTとはなんぞ?
George Harada
PDF
学生向け会社説明会でHTML5
George Harada
もし、IT関連企業で働くことになったら
George Harada
暑い夏のお仕事
George Harada
What is LT ?
George Harada
いがいがさんと私
George Harada
HTML5など社内勉強会 Vol.11 - High Performance Web and iOS 6 WebKit
George Harada
HTML5など社内勉強会 Vol.8 - WebSocket
George Harada
HTML5など社内勉強会 Vol.5 - 入門JavaScript [非同期通信]
George Harada
HTML5など社内勉強会 Vol.3 keynote
George Harada
HTML5など社内勉強会 Vol.3 - 入門JavaScript
George Harada
LTとはなんぞ?
George Harada
学生向け会社説明会でHTML5
George Harada
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
1.
HTML5など 勉強会 Vol. 1 2011/09/28
@ 某社 System Management Headquaters George Harada
2.
提 供 勉強会スタッフ (ボランティア) インフラ統括本部 Web標準G
3.
早速ですが お断りです
4.
今日は第1回なので 従来のHTMLから CSS, HTML5まで 広く浅くやります
5.
Agenda 1. HTML とは ・HTML
の基本 ・HTML4 の要素分類 2. CSS の基本 3. HTML5 とは ・HTML4 との大きな違い ・追加・変更された新・旧要素 ・マークアップ ・Q&A
6.
HTMLとは
7.
Hyper Text Markup Language
10.
Hyper Text Markup Language
11.
なんか超凄い 文書で(の) 構造を書く 言語
12.
実際に書いてみる -- 社内URL --
13.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>応募フォーム</title> <link rel="stylesheet" type="text/css" href="index.css" media="all" /> </head> <body> <!-- header --> <div id="header" class="text_center"> <p><img src="/logo.gif" alt="株式会社hoge"></p> </div> <!-- form --> <div id="form"> <h1 class="title">お客さま情報のご入力</h1> <h2>お客さまについて</h2> <p>各項目の説明事項を参考にご入力ください。</p> <form action="#"> <table> <tr> <th>お名前(漢字)</th> </tr> <tr> <td> <div id="NameKnj"> 姓<input type="text" size="10" value=""> 名<input type="text" size="10" value=""> </div> <p class="info">[姓名あわせて11文字以内]</p> </td> </tr> </table> <table> <tr> <th>お名前(カナ)</th> </tr> <tr> <td> <div id="NameKana"> セイ<input type="text" size="10" value=""> メイ<input type="text" size="10" value=""> </div> <p class="info">[姓名あわせて16文字以内]</p> </td> </tr> </table> </form> </div> </body> </html>
14.
ちまちま 打つのは めんどくさい
15.
そんな悩みを 解決してくれる
16.
HTMLのコーディングが 通常の3倍速くなるプラグイン ※editArea用のキー割り当て Zen-Coding
17.
このURLで以下と同じソースが見られます -- 社内URL -- <!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>応募フォーム</title> <link rel="stylesheet" type="text/css" href="index.css" media="all" /> </head> <body> <!-- header --> <div id="header" class="text_center"> <p><img src="/logo.gif" alt="株式会社hoge"></p> </div> <!-- form --> <div id="form"> <h1 class="title">お客さま情報のご入力</h1> <h2>お客さまについて</h2> <p>各項目の説明事項を参考にご入力ください。</p> <form action="#"> <table> <tr> <th>お名前(漢字)</th> </tr> <tr> <td> <div id="NameKnj"> 姓<input type="text" size="10" value=""> 名<input type="text" size="10" value=""> </div> <p class="info">[姓名あわせて11文字以内]</p> </td> </tr> </table> <table> <tr> <th>お名前(カナ)</th> </tr> <tr> <td> <div id="NameKana">
18.
HTMLの基本 (HTML5でも同じ)
19.
h1要素 = h1タグ
= 見出し要素 <h1>HTML4</h1> 要素 (element) 開始タグ 終了タグ 要素の内容 (content)
20.
a要素�の�href属性 <a href="http://www.w3.org">W3C</a> 属性値の左右は引用符で囲む 引用符は 「"」(ダブルクォート)
or 「'」 (シングルクォート) 属性値 (value) 属性 (attribute) 属性 属性名
21.
その要素の 性質・詳細 を設定できる ・属性は開始タグに書く ・設定できる属性は要素ごとに決まっている �(すべての要素に設定できるグローバル属性もある) 属性 (attribute)
22.
よく使うグローバル属性 グローバル属性 id属性 title属性 class属性 style属性
23.
HTML文書の先頭に 「この文書はHTMLの仕様に則り、 �○○○○で記述されています。」 と宣言するため記述する 文書型宣言(DOCTYPE宣言)
24.
<!-- と -->
で囲まれた部分は ブラウザに表示されない (※) コメント扱いになる →メモを入れたり、要素を非表示にしたりできる ※ソースコードを表示すると読む事ができる コメント
25.
終了タグの無い要素 (抜粋) break; >
空要素 ��<br> ��<img> ��<link> <hr> <input> <meta>
26.
HTMLの基本 (HTML5でも同じ)ここまではOK?
27.
HTML4の 要素分類
28.
・ブロック要素 ・インライン要素
29.
説明出来る人? 別に説明してもらったりしませんので 正直に答えて下さい。
30.
文章構造の枠組を決定する 特徴は・・・ ・画面内にブロック(範囲・領域)を作る ・通常、前後が改行されて横幅は画面一杯に ・他のブロック要素やインライン要素を �中に含む事ができる(※) ※:要素により制約有り ブロック要素
31.
個々のテキストを修飾する 特徴は・・・ ・テキストの周りに余計な領域を作らない ・他のインライン要素を中に含む事ができる(※1) ・ブロック要素を中に含む事はできない(※2) ※1:要素により制約有り ※2:特殊な例を除くああ インライン要素
32.
実際に確かめてみる -- 社内URL -- 四方を青色で縁取るstyle属性:
style="border: 1px solid blue;"
33.
HTML4の 要素分類ここまではOK?
34.
ここで一度 HTMLを離れて
35.
CSSの基本 presented by Mari
Arimoto
36.
いきなりですが
37.
あとでタイムトライアルCSSコーディング をしていただきます。 CSSをあまり書いたことのない方はスライ ドを凝視しててください。
38.
CSSって何? ・Cascading Style Sheets
の略 ・HTMLの各要素をどう表示するかを指定 するもの
39.
たとえば <body> <div id="doraemon"> <div id="face"> <div
id="head_light"></div> <div id="eyes"> <div class="eye eye_left"></div> <div class="black_eye black_left"></ div> ・・・ +CSS
40.
・HTMLの読み書きが容易になる ・見た目だけの変更が容易になる ・SEO対策にも有効 (だと言われている) HTMLとCSSを分離すると
41.
body { background-color: white; color:
black; } CSSの書き方 どこで(セレクタ) { なにを(プロパティ): どうする(値); }
42.
1. 要素名のみ ----- HTML
----- <h1>h1∼h6は見出しのタグ</h1> ----- CSS ----- h1 { font-size: 18px; }
43.
2. .sample(ドットつき) ----- HTML
----- <div class="sample">divはブロック要素</div> <p class="sample">pは段落のタグ</p> ----- CSS ----- .sample { text-align: center; } p.sample { text-align: right; }
44.
3. #sample(シャープつき) ----- HTML
----- <p id="sample">pは段落のタグ</p> <div id="sample"><span>なに?</span></div> ----- CSS ----- #sample { text-align: center; } #sample span { background: #000000; } classとほぼ同様の使い方ですが idはその要素の固有の名前なので 複数の同名idは使えません
45.
まだまだセレクタはい っぱいありますが、必 要に応じて ぐぐってください
46.
もちろんプロパティも いっぱいありますので 必要に応じて ぐぐってください
47.
タイムトライアル CSSコーディング ∼10分でCSSを書いてみる∼ -- 社内URL --
48.
あなたはクライアントに、 HTMLと完成イメージ図の パワポだけを渡され、 こういわれました。 ルール説明
49.
こんな感じにしてほしいん だけど、何分でできる?
50.
10分で、といってしまうあなた
51.
10分でなんとかしてサンプル どおりに表示されるようCSSを 適用してみてください。 ヒント: CSS セレクタ ヒント:
CSS プロパティ ヒント: CSS フォント�色 etc.�で検索 ルール説明
52.
サンプル
53.
サンプル(ヒント) font-size: 18px; font-size: 1.0em; border:
solid 1px #D3D3D3; border-collapse: collapse; background: #FBE9E9; font-size: 0.8em;
54.
答え合わせ
55.
答え合わせ .text_center { text-align: center; } h1
{ font-size: 18px; border-bottom: 1px solid black; } h2 { font-size: 1.0em; } 画像センタリングする フォントサイズを18pxにする 要素の枠の下側に1pxの 一重の線を表示 フォントサイズを1.0emにする
56.
答え合わせ table { width: 94%; margin:
10px auto 0; border: solid 1px #D3D3D3; border-collapse: collapse; } th { border: solid 1px #D3D3D3; background: #FBE9E9; } テーブル幅を全体の94%に固定 外側の余白を上10px,左右自動, 下0pxで表示 枠を一重の線をグレーで表示 隣接するセルの枠線を重ねて表示 枠を一重の線をグレーで表示 背景色をピンクで表示
57.
答え合わせ #form { text-align: left; } .info
{ font-size: 0.8em; } テキストを左寄せにする フォントサイズを0.8emにする
58.
実例紹介
59.
大手金融クライアントからの依頼で �・イケてる入会フォーム �・イケてない入会フォーム 両方のった提案書くれと言われる 実例紹介
60.
入会フォームで「イケてる」も 「イケてない」もあるのだろうか、 と思いつつも、ベースのHTMLを 適当に組んで、それぞれに違う CSSを適用した 実例紹介
63.
パワポで作るよりも断然早くできました! HTML, CSSのちょっとした修正ができると、 自分でささっと直せたりするので、 効率的だと思います。 実例紹介
64.
ケータイでは、3キャリア共通で まともに動かなかったCSSが PCと同等に動くようになります。 ※iOSとAndroidの標準ブラウザは、共に ���WebKitを採用しており、互換性が高い。 CSS × スマートフォン
65.
ここまでの ざっくりまとめ
66.
HTML 文書の構造を要素で記述する CSS 文書のスタイルを記述する
67.
Any questions?
68.
ここからやっと HTML5
69.
HTML5とは
70.
歴史とか背景は つまらないし 長くなるので ググって下さい
71.
もっとセマンティックな文書を もっとリッチなWebアプリを もっと標準化された技術で もっと扱いやすく (互換性, 有用性, 相互運用性,
ユニバーサル・アクセス) これらを実現するための仕様 =
72.
データの意味, 意味規則 つまり・・・ セマンティクス HTML5では、文書が持つデータの意味を より明確に表すことが出来るようになる
73.
逆に言うと 「文書の中身」を理解しないと出来ない 「表現の方法」を理解しないと出来ない ということ セマンティクス HTML5では、文書が持つデータの意味を より明確に表すことが出来るようになる
74.
HTML4との 大きな違い
75.
プレゼンテーショナル な要素は廃止 or セマンティクスが 追加/変更された HTML4との大きな違い(1)
76.
・ブロック要素 ・インライン要素 ↓ ↓ コンテンツ・モデル 廃止 HTML4との大きな違い(2)
77.
どの要素にどんな内容(コンテンツ)を 入れても良いか定義したもの ・すべての要素に定義されている ・多くの要素はカテゴリーによって定義される ・カテゴリーは要素を目的に応じて �グループ化したもので、全8種類ある コンテンツ・モデル
78.
コンテンツ・モデル フロー ヘッディング セクショニング エンベッディッド フレージング インタラクティブ メタデータ
79.
具体的には・・・ 【HTML4】 <a>タグの中に<div>タグを入れてはいけない 【HTML5】 <a>タグの中に<div>タグを入れてもよい ※厳密には、<a>タグの親要素に影響を受ける コンテンツ・モデル
80.
Q. じゃあ、 ・ブロック要素 ・インライン要素 は意識しなくてOK?
81.
A. だめです ※下位互換やスタイルなどで、 意識しておく必要があります。
82.
HTML5で 追加・変更された 新・旧要素 presented by Ryushi
Osaka
83.
資料はここからダウンロード -- 社内URL --
84.
HTML5とは ここまではOK?
85.
HTML5 マークアップ
86.
実際に書いてみる -- 社内URL --
87.
このURLで以下と同じソースが見られます -- 社内URL -- <!DOCTYPE
html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>応募フォーム</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <!-- header --> <header class="text_center"> <p><img src="/logo.gif" alt="株式会社hoge"></p> </header> <!-- form --> <section id="form"> <hgroup> <h1 class="title">お客さま情報のご入力</h1> <h2>お客さまについて</h2> </hgroup> <p>各項目の説明事項を参考にご入力ください。</p> <form method="POST"> <table> <tr> <th>お名前(漢字)</th> </tr> <tr> <td> <div id="NameKnj"> 姓<input type="text" size="10" value=""> 名<input type="text" size="10" value=""> </div> <p class="info">[姓名あわせて11文字以内]</p> </td> </tr>
88.
HTML5ではDOCTYPE宣言が 非常にシンプルになっている →必ず記述する <!DOCTYPE html>
89.
HTML5では、文書の 文字エンコーディングに 「UTF-8」が強く推奨されている →周辺API等も、標準で「UTF-8」を想定している ※逆に、「Shift_JIS」は非推奨とされている ※特別な理由がないなら、とにかく「UTF-8」を使う <meta charset="UTF-8">
90.
その他 詳細は また今度
91.
HTML5 Q & A
92.
Q. HTML5に 含まれる内容は?
93.
A. 狭義や広義で微妙に異なるため、 HTML5などa
勉強会a としています
94.
Q. HTML5は いつ出来たの?
95.
A. まだ出来てません ※ある組織は2022年とか言ってる
96.
Q. それ使えるの?
97.
A. スマートフォンは かなり使えます ※もちろんPCでも、ちゃんと考慮すれば使えます ※昨年末の社内アプリでも、一部APIを使っています
98.
Any questions?
99.
最後に
100.
長丁場、たいへん お疲れさまでした
101.
後日、アンケートに ご協力下さい!!!
102.
勉強会スタッフ 絶賛募集中です
103.
Special Thanks to Presentation Presentation Operation Operation Operation Operation Support OA
Support 情報システム室 順不同 敬称略
104.
tthhaannkkss !!
105.
参考文献等 HTML5 - http://html5.jp/ - http://www.amazon.co.jp/徹底解説HTML5マークアップガイドブック-羽田野太巳/dp/4798025291 Zen-Coding -
http://code.google.com/p/zen-coding/ - http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn - http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
Download