狠狠撸

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

HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5

なんか超凄い
文書で(の)
構造を書く
言語

実際に書いてみる
-- 社内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>

<div id="header" class="text_center">
<p><img src=/slideshow/html5etc-001/22538514/"/logo.gif" alt="株式会社hoge"></p>
</div>

<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>
</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">
<link rel="stylesheet" type="text/css" href="index.css" media="all" />
</head>
<body>

<div id="header" class="text_center">
</div>

<div id="form">
<form action="#">
<table>
<tr>
</tr>
<tr>
<td>
<div id="NameKnj">
</div>
</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?

?ブロック要素
?インライン要素

説明出来る人？
別に説明してもらったりしませんので
正直に答えて下さい。

文章構造の枠組を決定する
特徴は???
?画面内にブロック（範囲?領域）を作る
?通常、前後が改行されて横幅は画面一杯に
?他のブロック要素やインライン要素を
?中に含む事ができる(※)
※:要素により制約有り
ブロック要素

個々のテキストを修飾する
特徴は???
?テキストの周りに余計な領域を作らない
?他のインライン要素を中に含む事ができる(※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-collapse: collapse;
}
th {
background: #FBE9E9;
}
テーブル幅を全体の94%に固定
外側の余白を上10px,左右自動,
下0pxで表示
枠を一重の線をグレーで表示
隣接するセルの枠線を重ねて表示
枠を一重の線をグレーで表示
背景色をピンクで表示

答え合わせ
#form {
text-align: left;
}
.info {
font-size: 0.8em;
}
テキストを左寄せにする
フォントサイズを0.8emにする

大手金融クライアントからの依頼で
??イケてる入会フォーム
??イケてない入会フォーム
両方のった提案書くれと言われる
実例绍介

入会フォームで「イケてる」も
「イケてない」もあるのだろうか、
と思いつつも、ベースのHTMLを
適当に組んで、それぞれに違う
CSSを適用した
実例绍介

パワポで作るよりも断然早くできました！
HTML, CSSのちょっとした修正ができると、
自分でささっと直せたりするので、
効率的だと思います。
実例绍介

ケータイでは、3キャリア共通で
まともに動かなかったCSSが
PCと同等に動くようになります。
※iOSとAndroidの標準ブラウザは、共に
???WebKitを採用しており、互換性が高い。
CSS × スマートフォン

ここまでの
ざっくりまとめ

HTML
?文書の構造を要素で記述する
CSS
?文書のスタイルを記述する

歴史とか背景は
つまらないし
長くなるので
ググって下さい

もっとセマンティックな文書を
もっとリッチなWebアプリを
もっと標準化された技術で
もっと扱いやすく
（互換性, 有用性, 相互運用性, ユニバーサル?アクセス）
これらを実現するための仕様
=

データの意味, 意味規則
つまり???
セマンティクス
HTML5では、文書が持つデータの意味を
より明確に表すことが出来るようになる

逆に言うと
「文書の中身」を理解しないと出来ない
「表現の方法」を理解しないと出来ない
ということ
セマンティクス
HTML5では、文書が持つデータの意味を
より明確に表すことが出来るようになる

プレゼンテーショナル
な要素は廃止 or
セマンティクスが
追加／変更された
HTML4との大きな違い(1)

?ブロック要素
?インライン要素
↓ ↓
コンテンツ?モデル
廃止
HTML4との大きな違い(2)

どの要素にどんな内容（コンテンツ）を
入れても良いか定義したもの
?すべての要素に定義されている
?多くの要素はカテゴリーによって定義される
?カテゴリーは要素を目的に応じて
?グループ化したもので、全8種類ある

フロー
ヘッディング
セクショニング
エンベッディッド
フレージング
インタラクティブ
メタデータ

具体的には???
【HTML4】
<a>タグの中に<div>タグを入れてはいけない
【HTML5】
<a>タグの中に<div>タグを入れてもよい
※厳密には、<a>タグの親要素に影響を受ける

Q. じゃあ、
???ブロック要素
???インライン要素
は意識しなくてOK？

A. だめです
※下位互換やスタイルなどで、
??意識しておく必要があります。

HTML5で
追加?変更された
新?旧要素
presented by Ryushi Osaka

資料はここからダウンロード
-- 社内URL --

贬罢惭尝5とは
ここまではOK?

このURLで以下と同じソースが見られます
-- 社内URL --
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>

<header class="text_center">
</header>

<section id="form">
<hgroup>
</hgroup>
<form method="POST">
<table>
<tr>
</tr>
<tr>
<td>
<div id="NameKnj">
</div>
</td>
</tr>

HTML5ではDOCTYPE宣言が
非常にシンプルになっている
→必ず記述する
<!DOCTYPE html>

HTML5では、文書の
文字エンコーディングに
「UTF-8」が強く推奨されている
→周辺API等も、標準で「UTF-8」を想定している
※逆に、「Shift_JIS」は非推奨とされている
※特別な理由がないなら、とにかく「UTF-8」を使う
<meta charset="UTF-8">

その他詳細は
また今度

Q. HTML5に
? 含まれる内容は？

A. 狭義や広義で微妙に異なるため、
? HTML5などa
? 勉強会a
としています

Q. HTML5は
? いつ出来たの？

A. まだ出来てません
※ある組織は2022年とか言ってる

A. スマートフォンは
? かなり使えます
※もちろんPCでも、ちゃんと考慮すれば使えます
※昨年末の社内アプリでも、一部APIを使っています

長丁場、たいへん
お疲れさまでした

後日、アンケートに
ご協力下さい！！！

勉強会スタッフ
絶賛募集中です

Special Thanks to
Presentation
Presentation
Operation
Operation
Operation
Operation
Support
OA Support 情報システム室
順不同敬称略

参考文献等
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

狠狠撸

HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5

More Related Content

HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5