My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

6/9 HTML5(構造化要素) / WordPress(カスタマイズ)

f:id:sntkk3:20140228223724g:plain

HTML5(構造化要素)

講師ブログ(対象ページ)

http://d.hatena.ne.jp/web-0127/20140601/p1
http://d.hatena.ne.jp/web-0127/20140602/p1

参考サイト:

slideshare
http://www.slideshare.net/myakura/html5-2480964

HTML5とは、
HTML5
  • アウトライン構造を作る
  • body直下に必ずheaderタグ
  • h1は何回使っても良い。

header
└h1
└h2
└h3
└h4
└h5

  • h1はheaderタグで囲まなければいけない
  • bodyの中には見出しが必要(「section」ではダメ) 

以下のような階層構造で記述する

header => h1 => p

  • div id = "container"をbodyとheaderの間に入れるのはOK(そのdivはレイアウトであって文章構造ではないから)


■sectionタグで囲んだ例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5の基本構造</title>
</head>

<body>
<section>
<h1>Cafe debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p>
</section>
</body>
</html>


HTML5 Outlinerでの確認結果
f:id:sntkk3:20140609221700p:plain

■articleタグで囲んだ例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5の基本構造</title>
</head>

<body>
<article>
<h1>Cafe debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p>
</article>
</body>
</html>


HTML5 Outlinerでの確認結果
f:id:sntkk3:20140609221700p:plain


■headerタグで囲んだ例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5の基本構造</title>
</head>

<body>
<header>
<h1>Cafe debut</h1>
<p>baser CMS カフェサイト用テーマ<br>
baser CMS テーマコンテスト2012 飲食店系テーマ賞受賞(受賞結果はこちら)</p>
</header>
</body>
</html>


HTML5 Outlinerでの確認結果
f:id:sntkk3:20140609221704p:plain



[メモ]

  • これからは、Metadataがより重要になっていく
  • id名はレイアウト用
  • classは文章構造用
  • idはjQueryでDOMの引継ぎで使用するため、文章構造目的では使用しない方が良い。
  • セクショニング・コンテンツは、ブロックレベル要素ではなくなった。
  • セクショニングコンテンツは、「見出し」 + 「本文」 これが一まとまりでセクション
<section>
<h2>  … 見出し
<p>   … 本文
</section>


Untitled Sectionとは、

  • 画像(認識されない)
  • セクショニングコンテンツの見出しが未定義
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>はじめてのHTML5</title>
<!--[if lte IE9]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
<style>
article, aside, dialog, figure, footer, header,
menu, nav, seciton {display:block }
</style>
</head>

<body>
<div id = "container">
<header>
<h1>章見出し</h1>
<p>テーマのキーワードを含むリード文</p>
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</nav>
</header><!--header-->

<div id = "content">
<section>
<h2>節見出し</h2>
<p>テーマのキーワードを含むリード文</p>
<section>
<h3>項目1</h3>
<p>本文1本文1本文1</p>
<aside>
<h4></h4>
<p></p>
</aside>
</section>
</section>
</div><!--/#content-->

<div id="sidebar">
<section>
<h3>項目2</h3>
<p>本文2本文2本文2</p>
</section>
</div><!--/#sidebar-->

<footer>
<p>(c)2013 WebDesign</p>
</footer><!--/footer-->
</div><!--/#container-->
</body>
</html>

f:id:sntkk3:20140609221702p:plain

Untitled Sectionはnavを指しているらしい
⇒ nav も一つのアウトライン構造(見出しがあるべきもの)と見なされているようです。


■画像の扱いについて

alt 属性:
画像(自体)の説明であるべき(HTML5の場合)

figcaption タグ

  • caption :画像の解説(画像の下に配置)
  • p の中で画像を使うのは間違いではない、が、解説が必要な画像はなるべくfigcaptionタグ内で使用する


■アドレスタグについて

  • ©コピーライトを書く際にアドレスタグの使用は禁止(smallタグを使用する)
<p><small>(c)Copyright</small></p>
  • footerには著作情報を入れてはいけない(addressタグNG)
  • アドレスタグはサイトの管理者(クライアントではない)を記述する場合にはOK

参考: http://liginc.co.jp/designer/archives/11313


■timeタグ
pubdate(public date) --- タグhtml5では廃止


■mark タグ

ブラウザでの表示結果
f:id:sntkk3:20140609221656p:plain


ruby タグ

<p>
<ruby>日本猫<rt>にほんねこ</rt></ruby>
</p>
<p>
<ruby><rt></rt><rt>ほん</rt><rt>ねこ</rt></ruby>
</p>
<p>
<ruby>日本猫<rp>(</rp><rt>にほんねこ</rt><rp>)</rp></ruby>
</p>

Chromeでの表示結果
f:id:sntkk3:20140609221654p:plain


Firefoxでの表示結果
f:id:sntkk3:20140609221658p:plain

<ruby>日本猫<rp>(</rp><rt>にほんねこ</rt><rp>)</rp></ruby>


Firefoxで有効な書き方


参考サイト:

「ゼロから始めるレスポンシブWebデザイン入門」
http://ascii.jp/elem/000/000/700/700611/

「第2回 HTML5で使い方が変更されたタグをまとめよう - MdN Design Interactive」
  http://www.mdn.co.jp/di/articles/2605/?page=3

「ITかあさん」
http://www.kaasan.info/

「Webデザインレシピ」
http://webdesignrecipes.com/

WordPress

https://wordpress.com/

WordPressのページが即座にできる
が、カスタマイズはCodexが必要
(知識が無い人にはカスタマイズがほとんどできない)

注意:

  • WordPressは、注意していないと乗っ取られる可能性がある。
  • こまめに管理ページ状況をチェックすること

参考書:
iPhone & WordPressで作るホームページ」

iPhone & WordPressで作るホームページ

iPhone & WordPressで作るホームページ

国産WordPress テンプレート紹介
Stinger3
http://stinger3.com/

ダウンロードページ:
http://stinger3.com/dl/


企業向けWordPress テンプレート
http://bizvektor.com/