祝勧告2年目 html5デザインの使い方check！
Post on 06-Jan-2017
140 Views
Preview:
TRANSCRIPT
生明義秀（あざみぎしゅう）アートディレクター，グラフィックデザイナー，Web クリエーター，広告・ブランディング コンサルタントAZM Design 代表学校法人専門学校 東洋美術学校 講師 東京デザインプレックス研究所 講師
2014 年 10 月 28 日に勧告
（ 2016 年 9 月に HTML 5.1 が勧告される予定？ w ）
表記
「 HTML5 」のようにスペースを含めない表記（「 HTML 5.1 」のようにバージョン表記で小数点以下を含める場合は、 HTML と 5.1 の間にスペースを入れる）
by ウィキペディア
（ 2016 年 9 月に HTML 5.1 が勧告される予定？ w ）
ところで、なんのために生まれてきたの？
“Flash をころ… (ry”
HTML5 は、時代に求められて生まれてきました。
「高度な処理が可能」「明確な構造化が可能」が、 HTML5 の魅力。
さて、難しいことは、他の先生方に押し付ける任せるとして…。
HTML5 でのマークアップ、どーよ。
ライブコーディングをしながら確認しよう。
その前に…
文書型宣言
<!DOCTYPE html>
使い方が変更になったタグを確認したくない？
MdN での、林豊さんの記事がとても読みやすくまとまっていました。HTML5 でサイトをつくろう！ゼロからはじめる HTML5 でのサイト制作
http://www.mdn.co.jp/di/articles/2605/?page=1
要点をまとめながら、引用してみました。
a 要素ページ内アンカーリンクは ID 属性へ。target 属性は使用可能に戻る。ブロック要素・インライン要素という概念がないから、
a 要素で div 要素や p 要素、複数の要素を囲むことが出来ます（インタラクティブ・コンテンツを入れることが出来ない）。
address 要素article 要素内で使用すれば記事著者への連絡先になり、直近の祖先が body 要素の場合なら Web サイト管理者への連絡先を意味する。
b 要素強調や重要性を持たないが、他と区別したいテキスト。
cite 要素情報の引用元タイトルやテーマ・作品を表す要素。人名などをマークアップすることはできなくなりました。
dl 要素定義リストという意味が無くなり、記述リストとして利用する。定義リストにする場合は、 dt 要素に定義語を表す dfn 要素を用いる必要があり。
hr 要素意味的な段落を表す。セクションの区切りに使用することはできません。
i 要素技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲。
s 要素もう正確ではなくなった内容や関連性がなくなった内容を表す要素。
small 要素『免責条項・著作権表記・警告』などの細目テキストを表す。文章での注釈や補足としても使用することもできます。
strong 要素重要性という意味。入れ子にすることで重要度を高める。強調を表したいテキストには em 要素。
u 要素固有名詞を明示するためのラベル付けや、単語のスペルミスに対してラベル付けする場合に利用。
HTML5 で生まれた要素
hgroup 要素【注意】
hgroup 要素は、 HTML5 の仕様から削除。
非セクショニング要素（アウトラインに影響しないする）header 要素footer 要素figure 要素main 要素
セクショニング要素（アウトラインに影響する）
section 要素article 要素aside 要素nav 要素
こんどこそ、ライブコーディングをしながらHTML5 のマークアップを確認しよう。
Adobe Dreamweaver® で、サクッと楽チンマークアップタイム。
コンテンツモデルって？
「ブロックレベル要素」「インライン要素」という概念は、死んだ。
メタデータ・コンテンツ（ Metadata content ）フロー・コンテンツ（ Flow content ）セクショニング・コンテンツ（ Sectioning content ）ヘッディング・コンテンツ（ Heading content ）フレージング・コンテンツ（ Phrasing content ）エンベッディッド・コンテンツ（ Embedded content ）インタラクティブ・コンテンツ（ Interactive content ）
よくわかんないよ…なんと！素晴らしい図がありました。
HTML5 コンテンツモデル ガイドhttps://webgoto.net/html5/
アウトラインは、どうなるの？
実際に、マークアップをしてみましょう。
他にも、 input 要素の属性に、いくつかのバリエーションが登場しています。
最近の Web デザインのトレンドや CSS3 について。
ごめんなさい。セッション時間が 40分ぐらいあると思ったら、なんと、 25分でした（泣）。なので、 Web デザインと CSS3 については、確認だけさせてください。（ごめんね）
CSS3 で表現できることは、イメージデータでまかなっちゃダメだよね。
もはや、ど定番。「角丸」「シャドウ」「半透明」「グラデーション」
何はともあれ、モバイルファーストだよね。
「脱ピクセルパーフェクト」「脱ラスターイメージ」「 Web フォント」
ユー、 SVG 、書き出してる？
「ベクターフォーマット」「 Adobe Illustrator® は、SVG と CSS の強力なジェネレーター」
図々しくも、お知らせ。
11/10 (木 ) 7:30PM - 9:30PM御茶ノ水駅 徒歩 1分デジタルハリウッド東京本校Adobe Dreamweaver® のセミナーを緊急開催
https://www.street-academy.com/myclass/4564
11/24 (木 ) 7:30PM - 9:30PM御茶ノ水駅 徒歩 1分デジタルハリウッド東京本校HTML5 のセミナーを緊急開催
https://www.street-academy.com/myclass/3058
［ 誕生日おめでとう！ HTML5 ］ありがとうございました。生明義秀
top related