HTML5+CSS3でのレイアウト

今日の夕方ぐらいからWEBページ更新用にHTML5+CSS3(のつもり)でコーディングしてたんですが、レイアウトの作りに悩んでしまい結果的にできたんだけどこれでいいの?って感じだったので誰か教えて!

無題

現状htmlとcssは以下の通りなんだけど、sectionにid指定した時のcss指定の仕方がわからない。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>website</title>
<meta name="Description" content="" />
<meta name="Keywords"  content="" />

<link rel="stylesheet" type="text/css" media="screen,print" href="style.css" />
</head>
<body>

<header> 
    <img src="img.png" alt="header image">
</header>

<article>
    <nav>
        <ul> 
	        <li><a href="#">リンク</a></li> 
	        <li><a href="#">リンク</a></li> 
	        <li><a href="#">リンク</a></li> 
	        <li><a href="#">リンク</a></li> 
	        <li><a href="#">リンク</a></li> 
        </ul> 
    </nav>

    <section> 
	    メインコンテンツテキスト。
	    メインコンテンツテキスト。
	    メインコンテンツテキスト。
	    メインコンテンツテキスト。
	    メインコンテンツテキスト。
	    メインコンテンツテキスト。
    </section> 
</article>

<script type="text/javascript" src="index.js"></script>
</body>
</html>

style.css

* {
	margin: 0;
	padding: 0;
}

body {
	font: 80% "Yu Gothic", Verdana, sans-serif;
	margin: 0 auto;
	padding-top: 0px;
	width: 800px;
}

h1 {
	text-align: center;
	margin: 0 auto 5px;
}

ul {
	list-style: none;
}

header {
	-webkit-box-sizing: border-box;
	width: 800px;
}

article {
	width: 100%;
    padding: 10px;
    display: -webkit-box;  
    display: -moz-box;
}

nav {
	background-color: #fac;
	-moz-box-ordinal-group: 1;
	-webkit-box-ordinal-group: 1;
	width: 200px;
}

section {
	width: 600px;
    padding: 10px;
	-moz-box-ordinal-group: 2;
	-webkit-box-ordinal-group: 2;
}
広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中