Soumettre la recherche
Mettre en ligne
今からハジメるHTML5マークアップ
•
75 j'aime
•
46,703 vues
SwapSkills
Suivre
SwapSkills2010 vol2 羽田野太巳
Lire moins
Lire la suite
Formation
Signaler
Partager
Signaler
Partager
1 sur 64
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
Recommandé
今からハジメるHTML5プログラミング
今からハジメるHTML5プログラミング
SwapSkills
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
HTML5, きちんと。
HTML5, きちんと。
Masataka Yakura
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
情報編集(Web) HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
jQuery Mobile入門
jQuery Mobile入門
Shumpei Shiraishi
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5 入門
HTML5 入門
NOAN
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
Contenu connexe
Tendances
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
Saeki Tominaga
HTML5 入門
HTML5 入門
NOAN
GDG Women DevfestW
GDG Women DevfestW
Tomoko Sato
マークアップ講座 01b HTML
マークアップ講座 01b HTML
eiji sekiya
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML5開発最前線
HTML5開発最前線
yoshikawa_t
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
Yumi uniq Ishizaki
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
WordPressプラグイン作成入門
WordPressプラグイン作成入門
Yuji Nojima
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
Muyuu Fujita
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
Tendances
(20)
HTML仕様書を読んでみよう
HTML仕様書を読んでみよう
HTML5 入門
HTML5 入門
GDG Women DevfestW
GDG Women DevfestW
マークアップ講座 01b HTML
マークアップ講座 01b HTML
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
HTML5開発最前線
HTML5開発最前線
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Oocssとかついでにsmacssとbemの話も
Oocssとかついでにsmacssとbemの話も
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
WordPressプラグイン作成入門
WordPressプラグイン作成入門
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
壊れやすいCSS
壊れやすいCSS
CSS の歩き方
CSS の歩き方
Html5でword pressテーマを作るよ!
Html5でword pressテーマを作るよ!
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
WordPress を使いこなそう
WordPress を使いこなそう
Similaire à 今からハジメるHTML5マークアップ
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
George Harada
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
shigetoshi komatsu
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
Shuyo Nakatani
大雑把なHtmlの説明
大雑把なHtmlの説明
tanaka-hiroki
京都 IT講座 9月
京都 IT講座 9月
annulus
Htmlの基本
Htmlの基本
SD Labo
Htmlの基礎
Htmlの基礎
SD Labo
Oktopartial Introduction
Oktopartial Introduction
Takeshi AKIMA
Wp html5
Wp html5
regret raym
CSS Design and Programming
CSS Design and Programming
Taku AMANO
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
Atsushi Tadokoro
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
京都IT研修講座
京都IT研修講座
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
京都 IT講座 9月
京都 IT講座 9月
annulus
IT研修講座
IT研修講座
annulus
it研修講座
it研修講座
annulus
It01
It01
chibicoo
itkensyukouza2008
itkensyukouza2008
annulus
Similaire à 今からハジメるHTML5マークアップ
(20)
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTMLのアウトラインを意識しよう
HTMLのアウトラインを意識しよう
CRF を使った Web 本文抽出 for WebDB Forum 2011
CRF を使った Web 本文抽出 for WebDB Forum 2011
大雑把なHtmlの説明
大雑把なHtmlの説明
京都 IT講座 9月
京都 IT講座 9月
Htmlの基本
Htmlの基本
Htmlの基礎
Htmlの基礎
Oktopartial Introduction
Oktopartial Introduction
Wp html5
Wp html5
CSS Design and Programming
CSS Design and Programming
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
メディア芸術基礎 II HTML5とは何か? HTML5、はじめの一歩
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
京都IT研修講座
京都IT研修講座
京都 IT講座 9月
京都 IT講座 9月
京都 IT講座 9月
京都 IT講座 9月
IT研修講座
IT研修講座
it研修講座
it研修講座
It01
It01
itkensyukouza2008
itkensyukouza2008
Plus de SwapSkills
セマンティック検索 20100731
セマンティック検索 20100731
SwapSkills
Talk microdata
Talk microdata
SwapSkills
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
SwapSkills
ゲーム作成で学ぶ iPhoneアプリケーション超入門
ゲーム作成で学ぶ iPhoneアプリケーション超入門
SwapSkills
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkills
HTML5 & Web Platform
HTML5 & Web Platform
SwapSkills
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
SwapSkills
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
SwapSkills
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
SwapSkills
『はじめてのXSLT 』小林 信次
『はじめてのXSLT 』小林 信次
SwapSkills
Swapskills Print Css
Swapskills Print Css
SwapSkills
Swap Skills I Phone
Swap Skills I Phone
SwapSkills
Plus de SwapSkills
(12)
セマンティック検索 20100731
セマンティック検索 20100731
Talk microdata
Talk microdata
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
HTML5を使うためのプログレッシブエンハンスメント 〜すべての人に確実に情報を届けるために〜SwapSkillsFreeEventProgressiv...
ゲーム作成で学ぶ iPhoneアプリケーション超入門
ゲーム作成で学ぶ iPhoneアプリケーション超入門
SwapSkillsFree|jQueryMobile [基礎編]
SwapSkillsFree|jQueryMobile [基礎編]
HTML5 & Web Platform
HTML5 & Web Platform
実践!スマートフォンサイト制作
実践!スマートフォンサイト制作
スマートフォンサイトのトレンドとユーザビリティ
スマートフォンサイトのトレンドとユーザビリティ
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『XHTML+SVG+MathMLの技術を知る! 』 小山田 晃浩
『はじめてのXSLT 』小林 信次
『はじめてのXSLT 』小林 信次
Swapskills Print Css
Swapskills Print Css
Swap Skills I Phone
Swap Skills I Phone
Dernier
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
koheioishi1
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ssusere0a682
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
Kochi Eng Camp
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
Tokyo Institute of Technology
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
Takayuki Itoh
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
YukiTerazawa
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
Tokyo Institute of Technology
Dernier
(7)
The_Five_Books_Overview_Presentation_2024
The_Five_Books_Overview_Presentation_2024
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
ゲーム理論 BASIC 演習106 -価格の交渉ゲーム-#ゲーム理論 #gametheory #数学
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
次世代機の製品コンセプトを描く ~未来の機械を創造してみよう~
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
2024年度 東京工業大学 工学院 機械系 大学院 修士課程 入試 説明会 資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
生成AIの回答内容の修正を課題としたレポートについて:お茶の水女子大学「授業・研究における生成系AIの活用事例」での講演資料
TokyoTechGraduateExaminationPresentation
TokyoTechGraduateExaminationPresentation
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
東京工業大学 環境・社会理工学院 建築学系 大学院入学入試・進学説明会2024_v2
今からハジメるHTML5マークアップ
1.
有限会社futomi 代表取締役 羽田野 太巳(はたの
ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi
2.
http://www.html5.jp/
3.
http://www.amazon.co.jp/gp/product/4798025291/
4.
HTML5のマークアップの基礎 IE対応とスタイリング セクションとアウトライン 旧来の要素を見直す ワークショップ
5.
6.
<!DOCTYPE html> 標準モードでのレンダリング 整形式XML XHTML5での利用も想定 短くて覚えやすい
7.
HTML5推奨 <meta charset="UTF-8"
/> 下位互換もOK <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
8.
ファイルの先頭から512バイト以内。 よほど大きな理由がない限り"UTF-8" "Shift_JIS"や"EUC-JP"は非推奨 "UTF-32"も非推奨 charsetコンテンツ属性を持ったmeta要素 は1つだけ
9.
HTML5はXHTML的なマークアップもOK <input type="radio" checked> ○ <input type="radio" checked="checked" /> ○ XHTML的に書いても、Content-Type が text/html である以上、XHTMLではなく、 HTML
10.
<!DOCTYPE html> <html lang="ja"> <head> <meta
charset="UTF-8" /> <title>タイトル</title> </head> <body> <!-- コンテンツ --> </body> </html>
11.
インライン・ブロックという分類は廃止 プレゼンテーショナルな分類を排除 文書構造を表す意味(セマンティクス) に基づいた分類に 新たにコンテンツ・モデルと呼ばれる分 類を定義 要素の中に入れても良いコンテンツを、 コンテンツ・モデルを使って定義
12.
13.
The W3C Markup Validation Service http://validator.w3.org/ Validator.nu http://html5.validator.nu/
14.
http://validator.w3.org/
15.
http://html5.validator.nu/
16.
17.
DOMツリーが期待通りに構成されない 未知の要素はCSSが効かない
18.
<header> <hgroup>
<h1>HTML5.JP</h1> <h2>次世代 標準 HTML5 情報サイト</h2> </hgoup> </header>
19.
本来のDOM
IEのDOM header header └ hgroup hgroup ├ h1 h1 └h2 h2 /hgroup /header
20.
JavaScriptによるハック document.createElement("要素名"); これだけで解決 appendChild()は不要
21.
ie.js (function () {
var els = [ 'section', 'article', 'hgroup', 'header', 'footer', 'nav','aside', ]; for (var i=0; i<els.length; i++ ) { document.createElement(els[i]); } })();
22.
<!--[if IE]><script src="ie.js"></script><![endif]-->
23.
未知要素はすべてのブラウザーでインラ インとしてレンダリングされてしまう スタイルシートでブロックとして定義 section, article, aside, nav { display: block; }
24.
25.
section要素(セクション要素) article要素(セクション要素) aside要素(セクション要素) nav要素(セクション要素) hgroup要素 header要素 footer要素
26.
章や節といった単位を表す(セクション) 見出しと本文をまとめる <section> <h2>マレー空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマ レー空港に到着しました。</p> ... </section>
27.
セクションを表す ブログの投稿、ニュースサイトの記事、 ブログ記事へのコメント、掲示板の投稿 そのコンテンツだけを切り出しても、独 立したコンテンツとして再利用可能なも のに使う
28.
<article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そこで起こった 出来事をまとめました。</p> <section> <h2>マレ空港に到着</h2> <p>名古屋からシンガポールを経由して、やっとマレー空港に 到着しました。</p>
... </section> <section> <h2>ヴァビンファル島</h2> <p>この島に一週間滞在しました。...</p> ... </section> </article>
29.
ナビゲーションを形成するセクション サイト内のページリンクの集まり <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/">チュートリアル</a></li> ... </ul> </nav>
30.
メインのコンテンツとは関連が薄く、切 り離すことができるコンテンツを表すセ クション 補足記事、サイドバー、広告、プル・ クォート
31.
<article> <h1>モルディブ旅行記</h1> <p>新婚旅行にモルディブに行ってきました。そ こで起こった出来事をまとめました。</p> ... <aside> <h2>モルディブとは</h2> <p>...</p> </aside> </article>
32.
見出しと、それに付随する小見出しや副 題やキャッチフレーズをグループ化 もっともレベルが高い見出し要素がアウ トラインの見出し それ以外の見出し要素はサブタイトル <h1>~<h6>しか入れてはいけない
33.
<section> <hgroup> <h1>岐阜の鵜飼</h1> <h2>長良川の1300年の伝統</h2> </hgroup> <p>長良川の鵜飼いは、...</p> ... </section>
34.
ページやセクションのヘッダー <header> <hgroup> <h1><a href="http://www.html5.jp/">HTML5.JP</a></h1> <h2>次世代 HTML 標準 HTML5 情報サイト</h2> </hgroup> <nav> <ul> <li><a href="/">home</a></li> <li><a href="/tutorial/index.html">HTML5 チュートリアル</a></li> <li><a href="/blog/">ブログ</a></li> ... </ul> </nav> </header>
35.
ページやセクションのフッター <body> ... <footer> <ul> <li><a href="/about/profile.html">サイト運営者情報</a></li> ... </ul> <p id="copyright"><small>Copyright © 2007 - 2009 <a href="http://www.futomi.com/">Futomi Hatano</a> All Rights Reserved.</small></p> </footer> </body>
36.
37.
ドキュメントのコンテンツを、書籍の目 次のように並べたもの HTML5では、ドキュメントからアウトラ インを決定するアルゴリズムが規定 h1~h6要素、section, article, aside, nav要素 の入れ子関係に従って決まる
38.
<h1>見出し1</h1>
見出し1 <p>段落</p> ├見出し2 <h2>見出し2</h2> └見出し3 <p>段落</p> <h2>見出し3</h2> <p>段落</h2>
39.
<h1>見出し1</h1>
見出しレベルはセク <p>段落</p> ション要素のネス <section> ト・レベルと一致 <h1>見出し2</h1> すべて<h1>でも、期 <p>段落</p> 待通りのアウトライ </section> <section> ンに <h1>見出し3</h1> <p>段落</h2> </section>
40.
HTML5 Outliner http://gsnedders.html5.org/outliner/ <h1>HTML5</h1> <p>HTML5とは...</p> <h2>要素</h2> <p>要素とは...</p> <h3>section要素</h3> <p>section要素とは...</p> <h3>article要素</h3> <p>article要素とは...</p> <h2>DOM</h2> <p>DOMとは...</p>
41.
42.
段落レベルの区切り セクション(章や節)の区切りではない
43.
<section> <h2>英語が話せなかった私とペラペラの彼</h2> <p>私はまったく英語が話せなかった。もちろん、 まともに聞くこともできなかった。...</p> ... <hr /> <p>彼は英国の大学に通っていた。そのため、彼は 英語がペラペラだ。...</p> ... </section>
44.
細目などの注釈を表す要素として再定義。 免責条項、警告、法的制約、著作権表記、 帰属、ライセンス要件など
45.
<footer> ... <p><small>© copyright 2010
Futomi Hatano</small></p> </footer>
46.
重要性を表す要素として再定義 強調を表す要素ではなくなった 強調はem要素を使うべき strong要素の中にstrong要素を使うと、重 要性が増す
47.
<p><strong>注意:最近、第三者によるなりすましの 被害が急増しています。被害を受けた方のほどんどは、 容易に推測できるパスワードを設定されています。パ スワードには<strong>ランダムな文字列を設定 </strong>するようにしてください。また、<strong>定 期的にパスワードを変更</strong>して頂きますよう、 お願いいたします。</strong></p>
48.
声、ムード、技術用語、船の名前など、 印刷表現ではイタリック体で表されるよ うなテキストの範囲 日本では、イタリック表記とする印刷慣 例は少ない 用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
49.
<p>私は、<i class="thought">なんてバカなんだ!</i>と心の 中で叫んだ。みんなが、沈んだ船の話をしていたので、 てっきり<i class="ship">戦艦大和</i>の話と思っていたら、 どうやら<i
class="ship">タイタニック号</i>の話だったらし い。どうりでさっぱり話が通じなかったわけだ。みんなに は相当変なヤツと思われたに違いない。まさに、<i class="idiom" lang="en">Oh! My God!</i>って感じだ。
50.
重要性や強調という意味は持たないが、 キーワードといった、他の文章とは区別 したいテキストの範囲 用途を区別するclass属性を入れ、CSSなど でスタイルを調整するのが良い
51.
<p>当社が長年かけて研究し改良を重ねた自信作が<b class="product">きらきらカーワックス</b>です。<b class="product">きらきらカーワックス</b>は、サッと磨くだ けで、あなたあの愛車がピカピカになり、それ以降、水洗い 洗車だけで、それが6ヶ月も持続します。一度つかったら、 あなたはもう<b class="product">きらきらカーワークス</b> を手放せません!</p>
52.
見た目しか表さずCSSで対処可能な要素 basefont, big, center, font, s, strike, tt, u ユーザービリティやアクセシビリティに 悪影響を与える要素 frame, frameset, noframes ほとんど使われていない要素 acronym, applet, isindex, dir
53.
プレゼンテーショナルな属性 <hr>, <p>などのalign属性 <table>, <td>, <body>などの bgcolor属性 <hr>のnoshade属性とsize属性とwidth属性 <td>, <th>などののnowrap属性とvalign属性 代替方法があり不要となった属性 <a>のshape属性とcoords属性 <td>のscope属性
54.
55.
HTML5で要素のセマンティクスが強化 マークアップはセマンティクスのみ プレゼンテーションはCSSで
56.
アウトラインを意識したコンテンツ作り が重要 マークアップ・スキルだけでなく、文書 構成スキルも重要に
57.
適切な要素を考えてください
58.
59.
<header> <nav>
<aside>
60.
61.
<section> <article> <article>
62.
63.
<article>
<header> <section> <section> <footer>
64.
有限会社futomi 代表取締役 羽田野 太巳(はたの
ふとみ) http://www.futomi.com/ http://www.html5.jp/ http://twitter.com/futomi
Télécharger maintenant