<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body {background-color:#cfd;} /* 背景色 */
</style>
</head>
<body>
<h3>見出し</h3>
<p>html5 本文内容</p>
</body>
</html>【参考サイト】
HTML5の書き方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style>
body {background-color:#cfd;} /* 背景色 */
</style>
</head>
<body>
<h3>見出し</h3>
<p>html5 本文内容</p>
</body>
</html>| 要素 | acronym
applet
basefont
bgsound
big
blink
center
dir
font frame frameset isindex marquee nobr noembed noframes strike tt |
| 属性 |
align, alink, background, bgcolor, border, cellpadding, cellspacing, char, charoff, clear, compact, frameborder, height, hspace, link, marginheight, marginwidth, name, noshade, nowrap, rules, scrolling, text, valign, vlink, vspace, width など |
| 構造要素 | article
aside
bdi
figcaption
figure
footer
header hgroup mark menu/menuitem nav picture ruby/rb/rp/rt/rtc section time |
| メディア | audio canvas embed source track video |
| フォーム | keygen meter output progress |
| その他 | command details datalist summary wbr |
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML5とCSS3によるページサンプル</title>
<style>
body { width:400px; margin:10px auto; }
header, nav, section, footer, article {
display:block; border:1px solid #ccc; margin:5px; padding:5px 10px; background: #eee;
}
article { background: #efe; }
header { text-align:center; padding:5px 0 10px 0; }
header ul, header li { list-style-type:none; display:inline; padding: 0 10px; }
.flexbox { display:flex; border:1px solid #c99; margin:5px; }
nav { flex:1; }
section { flex:2; }
nav li { list-style-type:none; margin-left: -2em; }
footer { text-align: center; }
</style>
</head>
<body>
<header>
<h1>header</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</header>
<div class="flexbox">
<nav>
<h1>Navi</h1>
<ul>
<li><a href="http://www.tagindex.com/html5/basic/basic.html">HTML 5</a></li>
<li><a href="http://www.htmq.com/html5/index.shtml">リファレンス</a></li>
<li><a href="http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html">flex</a></li>
<li><a href="#">example 4 </a></li>
<li><a href="#">example 5 </a></li>
<li><a href="#">example 6 </a></li>
<li><a href="#">example 7 </a></li>
</ul>
</nav>
<section>
<h1>section</h1>
<article>
<h1>section-article1</h1>
<p>ここは、article１</p>
</article>
<article>
<h1>section-article2</h1>
<p>ここは、article２</p>
</article>
</section>
</div>
<footer>
footer
</footer>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>html5-css3 サンプルページ</title>
<style>
body { margin:3px auto; width:640px; background:#33dd33; font-size:20px; }
.head { background:#ffff66; height:60px; color:green; text-align:center; font-size:48px; }
.main01 { margin:3px auto; background:#66ff99; width:480px; color:#ff0000; font-weight:bold; overflow:hidden;}
.main01 p { display:inline-block; padding-left:100%; white-space:nowrap; margin:0 0.5em; }
.main02 { margin-top:10px; text-align:center; }
.main02 img { width:120px; margin:3px 6px; }
@keyframes marquee01{ from { transform: translate(0%); } to { transform: translate(-100%); }}
.mq01 { animation: marquee01 8s infinite linear; }
@keyframes marquee02{ from { margin-left:70%; } to { margin-left: -70%; }}
.mq02 { animation: marquee02 20s infinite steps(60) normal;}
</style>
</head>
<body>
<div class="head">
html5-css3 サンプルページ
</div>
<div class="main01">
<p class="mq01">ようこそ、html5-css3 のホームページへ！！ </p>
</div>
<div class="main02">
( 図をクリックすると、関連ページへジャンプします。)<br>
<a href="../../index.html"><img src="./mi12.jpg" alt="くらげ" /></a>
<a href="../../jhana/hana.html"><img src="./botan1s.jpg" alt="ぼたん" style="height:150px;" /></a>
<a href="../../jsisen/jpanda/jpanda.html"><img src="./panda17.gif" alt="パンダ" /></a>
<a href="http://www2n.biglobe.ne.jp/~kurage/jfuji/fuji.html"><img src="./y0399s.jpg" alt="富士" /></a><br>
<img class="mq02" style="width:32px;" src="./a007icn.gif" alt="ひよこ" /><br>
<hr>
<a href="../hp_g.html" target="_self">「ホームページを作る」 トップページへ</a><br>
<a href="mailto:lvh09931@biglobe.ne.jp"><img src="./a018icn.gif" style="width:26px;" /> メール送信はここをクリックして下さい</A>
<hr>
</div>
</body>
</html>