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