SlideShare a Scribd company logo
HTML5など
勉強会 Vol. 1
2011/09/28 @ 某社
System Management Headquaters
George Harada
提 供
勉強会スタッフ
(ボランティア)
インフラ統括本部
Web標準G
早速ですが
お断りです
今日は第1回なので
従来のHTMLから
CSS, HTML5まで
広く浅くやります
Agenda
1. HTML とは
・HTML の基本
・HTML4 の要素分類
2. CSS の基本
3. HTML5 とは
・HTML4 との大きな違い
・追加・変更された新・旧要素
・マークアップ
・Q&A
HTMLとは
Hyper
Text
Markup
Language
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
Hyper
Text
Markup
Language
なんか超凄い
文書で(の)
構造を書く
言語
実際に書いてみる
-- 社内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">
セイ<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>
ちまちま
打つのは
めんどくさい
そんな悩みを
解決してくれる
HTMLのコーディングが
通常の3倍速くなるプラグイン
※editArea用のキー割り当て
Zen-Coding
この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">
HTMLの基本
(HTML5でも同じ)
h1要素 = h1タグ = 見出し要素
<h1>HTML4</h1>
要素 (element)
開始タグ 終了タグ
要素の内容 (content)
a要素�の�href属性
<a href="http://www.w3.org">W3C</a>
属性値の左右は引用符で囲む
引用符は 「"」(ダブルクォート) or 「'」 (シングルクォート)
属性値 (value)
属性 (attribute)
属性
属性名
その要素の
性質・詳細
を設定できる
・属性は開始タグに書く
・設定できる属性は要素ごとに決まっている
�(すべての要素に設定できるグローバル属性もある)
属性 (attribute)
よく使うグローバル属性
グローバル属性
id属性
title属性
class属性
style属性
HTML文書の先頭に
「この文書はHTMLの仕様に則り、
�○○○○で記述されています。」
と宣言するため記述する
文書型宣言(DOCTYPE宣言)
<!-- と --> で囲まれた部分は
ブラウザに表示されない (※)
コメント扱いになる
→メモを入れたり、要素を非表示にしたりできる
※ソースコードを表示すると読む事ができる
コメント
終了タグの無い要素 (抜粋)
break; > 空要素
��<br>
��<img>
��<link>
<hr>
<input>
<meta>
HTMLの基本
(HTML5でも同じ)ここまではOK?
HTML4の
要素分類
・ブロック要素
・インライン要素
説明出来る人?
別に説明してもらったりしませんので
正直に答えて下さい。
文章構造の枠組を決定する
特徴は・・・
・画面内にブロック(範囲・領域)を作る
・通常、前後が改行されて横幅は画面一杯に
・他のブロック要素やインライン要素を
�中に含む事ができる(※)
※:要素により制約有り
ブロック要素
個々のテキストを修飾する
特徴は・・・
・テキストの周りに余計な領域を作らない
・他のインライン要素を中に含む事ができる(※1)
・ブロック要素を中に含む事はできない(※2)
※1:要素により制約有り
※2:特殊な例を除くああ
インライン要素
実際に確かめてみる
-- 社内URL --
四方を青色で縁取るstyle属性: style="border: 1px solid blue;"
HTML4の
要素分類ここまではOK?
ここで一度
HTMLを離れて
CSSの基本
presented by Mari Arimoto
いきなりですが
あとでタイムトライアルCSSコーディング
をしていただきます。
CSSをあまり書いたことのない方はスライ
ドを凝視しててください。
CSSって何?
・Cascading Style Sheets の略
・HTMLの各要素をどう表示するかを指定
 するもの
たとえば
<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
・HTMLの読み書きが容易になる
・見た目だけの変更が容易になる
・SEO対策にも有効 (だと言われている)
HTMLとCSSを分離すると
body {
background-color: white;
color: black;
}
CSSの書き方
どこで(セレクタ) {
  なにを(プロパティ): どうする(値); 
}
1. 要素名のみ
----- HTML -----
<h1>h1∼h6は見出しのタグ</h1>
----- CSS -----
h1 {
font-size: 18px;
}
2. .sample(ドットつき)
----- HTML -----
<div class="sample">divはブロック要素</div>
<p class="sample">pは段落のタグ</p>
----- CSS -----
.sample {
text-align: center;
}
p.sample {
text-align: right;
}
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は使えません
まだまだセレクタはい
っぱいありますが、必
要に応じて
ぐぐってください
もちろんプロパティも
いっぱいありますので
必要に応じて
ぐぐってください
タイムトライアル
CSSコーディング
∼10分でCSSを書いてみる∼
-- 社内URL --
あなたはクライアントに、
HTMLと完成イメージ図の
パワポだけを渡され、
こういわれました。
ルール説明
こんな感じにしてほしいん
だけど、何分でできる?
10分で、といってしまうあなた
10分でなんとかしてサンプル
どおりに表示されるようCSSを
適用してみてください。
ヒント: CSS セレクタ
ヒント: CSS プロパティ
ヒント: CSS フォント�色 etc.�で検索
ルール説明
サンプル
サンプル(ヒント)
font-size: 18px;
font-size: 1.0em;
border: solid 1px #D3D3D3;
border-collapse: collapse;
background: #FBE9E9;
font-size: 0.8em;
答え合わせ
答え合わせ
.text_center {
text-align: center;
}
h1 {
font-size: 18px;
border-bottom: 1px solid black;
}
h2 {
font-size: 1.0em;
}
画像センタリングする
フォントサイズを18pxにする
要素の枠の下側に1pxの
一重の線を表示
フォントサイズを1.0emにする
答え合わせ
table {
width: 94%;
margin: 10px auto 0;
border: solid 1px #D3D3D3;
border-collapse: collapse;
}
th {
border: solid 1px #D3D3D3;
background: #FBE9E9;
}
テーブル幅を全体の94%に固定
外側の余白を上10px,左右自動,
下0pxで表示
枠を一重の線をグレーで表示
隣接するセルの枠線を重ねて表示
枠を一重の線をグレーで表示
背景色をピンクで表示
答え合わせ
#form {
text-align: left;
}
.info {
font-size: 0.8em;
}
テキストを左寄せにする
フォントサイズを0.8emにする
実例紹介
大手金融クライアントからの依頼で
�・イケてる入会フォーム
�・イケてない入会フォーム
両方のった提案書くれと言われる
実例紹介
入会フォームで「イケてる」も
「イケてない」もあるのだろうか、
と思いつつも、ベースのHTMLを
適当に組んで、それぞれに違う
CSSを適用した
実例紹介
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
パワポで作るよりも断然早くできました!
HTML, CSSのちょっとした修正ができると、
自分でささっと直せたりするので、
効率的だと思います。
実例紹介
ケータイでは、3キャリア共通で
まともに動かなかったCSSが
PCと同等に動くようになります。
※iOSとAndroidの標準ブラウザは、共に
���WebKitを採用しており、互換性が高い。
CSS × スマートフォン
ここまでの
ざっくりまとめ
HTML
 文書の構造を要素で記述する
CSS
 文書のスタイルを記述する
Any questions?
ここからやっと
HTML5
HTML5とは
歴史とか背景は
つまらないし
長くなるので
ググって下さい
もっとセマンティックな文書を
もっとリッチなWebアプリを
もっと標準化された技術で
もっと扱いやすく
(互換性, 有用性, 相互運用性, ユニバーサル・アクセス)
これらを実現するための仕様
=
データの意味, 意味規則
つまり・・・
セマンティクス
HTML5では、文書が持つデータの意味を
より明確に表すことが出来るようになる
逆に言うと
「文書の中身」を理解しないと出来ない
「表現の方法」を理解しないと出来ない
ということ
セマンティクス
HTML5では、文書が持つデータの意味を
より明確に表すことが出来るようになる
HTML4との
大きな違い
プレゼンテーショナル
な要素は廃止 or
セマンティクスが
追加/変更された
HTML4との大きな違い(1)
・ブロック要素
・インライン要素
↓ ↓
コンテンツ・モデル
廃止
HTML4との大きな違い(2)
どの要素にどんな内容(コンテンツ)を
入れても良いか定義したもの
・すべての要素に定義されている
・多くの要素はカテゴリーによって定義される
・カテゴリーは要素を目的に応じて
�グループ化したもので、全8種類ある
コンテンツ・モデル
コンテンツ・モデル
フロー
ヘッディング
セクショニング
エンベッディッド
フレージング
インタラクティブ
メタデータ
具体的には・・・
【HTML4】
<a>タグの中に<div>タグを入れてはいけない
【HTML5】
<a>タグの中に<div>タグを入れてもよい
※厳密には、<a>タグの親要素に影響を受ける
コンテンツ・モデル
Q. じゃあ、
  ・ブロック要素
  ・インライン要素
は意識しなくてOK?
A. だめです
※下位互換やスタイルなどで、
  意識しておく必要があります。
HTML5で
追加・変更された
新・旧要素
presented by Ryushi Osaka
資料はここからダウンロード
-- 社内URL --
HTML5とは
ここまではOK?
HTML5
マークアップ
実際に書いてみる
-- 社内URL --
この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>
HTML5ではDOCTYPE宣言が
非常にシンプルになっている
→必ず記述する
<!DOCTYPE html>
HTML5では、文書の
文字エンコーディングに
「UTF-8」が強く推奨されている
→周辺API等も、標準で「UTF-8」を想定している
※逆に、「Shift_JIS」は非推奨とされている
※特別な理由がないなら、とにかく「UTF-8」を使う
<meta charset="UTF-8">
その他 詳細は
また今度
HTML5
Q & A
Q. HTML5に
  含まれる内容は?
A. 狭義や広義で微妙に異なるため、
  HTML5などa
  勉強会a
としています
Q. HTML5は
  いつ出来たの?
A. まだ出来てません
※ある組織は2022年とか言ってる
Q. それ使えるの?
A. スマートフォンは
  かなり使えます
※もちろんPCでも、ちゃんと考慮すれば使えます
※昨年末の社内アプリでも、一部APIを使っています
Any questions?
最後に
長丁場、たいへん
お疲れさまでした
後日、アンケートに
ご協力下さい!!!
勉強会スタッフ
絶賛募集中です
Special Thanks to
Presentation
Presentation
Operation
Operation
Operation
Operation
Support
OA Support 情報システム室
順不同 敬称略
tthhaannkkss  !!
参考文献等
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

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
 
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