html5など社内勉強会 vol.1 - html, css, html5
DESCRIPTION
TRANSCRIPT
HTML5など 勉強会 Vol. 1
2011/09/28 @ 某社
System Management HeadquatersGeorge Harada
提 供
勉強会スタッフ（ボランティア）
インフラ統括本部Web標準G
早速ですがお断りです
今日は第1回なので従来のHTMLからCSS, HTML5まで広く浅くやります
Agenda1. HTML とは・HTML の基本・HTML4 の要素分類2. CSS の基本3. HTML5 とは・HTML4 との大きな違い・追加・変更された新・旧要素・マークアップ・Q&A
HTMLとは
HyperTextMarkupLanguage
HyperTextMarkupLanguage
なんか超凄い文書で(の)
構造を書く言語
実際に書いてみる-- 社内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"> セイ<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の基本（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でも同じ）
ここまではO
K?
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を適用した
実例紹介
パワポで作るよりも断然早くできました！
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> </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>
HTML5ではDOCTYPE宣言が非常にシンプルになっている→必ず記述する
<!DOCTYPE html>
HTML5では、文書の文字エンコーディングに「UTF-8」が強く推奨されている→周辺API等も、標準で「UTF-8」を想定している
※逆に、「Shift_JIS」は非推奨とされている※特別な理由がないなら、とにかく「UTF-8」を使う
<meta charset="UTF-8">
その他 詳細はまた今度
HTML5Q & A
Q. HTML5に 含まれる内容は？
A. 狭義や広義で微妙に異なるため、
HTML5などa 勉強会a
としています
Q. HTML5は いつ出来たの？
A. まだ出来てません※ある組織は2022年とか言ってる
Q. それ使えるの？
A. スマートフォンは かなり使えます※もちろんPCでも、ちゃんと考慮すれば使えます※昨年末の社内アプリでも、一部APIを使っています
Any questions?
最後に
長丁場、たいへんお疲れさまでした
後日、アンケートにご協力下さい！！！
勉強会スタッフ絶賛募集中です
Special Thanks toPresentationPresentationOperationOperationOperationOperationSupport
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