<!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>ここは、article1</p> </article> <article> <h1>section-article2</h1> <p>ここは、article2</p> </article> </section> </div> <footer> footer </footer> </body> </html>
<!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の書き方