ソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>HTML5ソースこれからの基本となるカラム</title> 
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="./column.css">
	<link rel="stylesheet" href="./redact.css">
	<link rel="shortcut icon" href="">
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="icon" sizes="196x196" href="">
	<link rel="apple-touch-icon" sizes="152x152" href="">
</head>

<body>

	<header id="header" role="banner">
		<h1 id="title">HTML5ソースこれからの基本となるカラム</h1>
	</header>
    
	<main role="main">

		<article id="column">
			<section>
				<header>
					<h2 id="content-title">ソースコード</h2>
				</header>
				<div id="content-text">
					コンテンツ内容
				</div>
			</section>
		</article>

		<nav id="side">
			<section>
				<header>
					<h3 id="nav-title">メニュータイトル</h3>
				</header>
				<div id="nav-list">
					<ul>
						<li><a href="">タイトル</a></li>
						<li><a href="">タイトル</a></li>
						<li><a href="">タイトル</a></li>
						<li><a href="">タイトル</a></li>
					</ul>
				</div>
			</section>
		</nav>

	</main>

	<footer role="contentinfo">
		<p>HTML5ソースこれからの基本となるカラム</p>
	</footer>

</body>

</html>
					

CSSコード

@charset "UTF-8";


html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

header, nav, main, section, article, figure, aside, footer {
	display: block;
}

header, main, footer {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
}

/*     980px以下だったらスマホ表示     */
@media screen and (min-width : 981px) {

main {
	display: table;
}

#column {
	display: table-cell;
	vertical-align: top;
	width: 70%;
}

}
/*     980px以下だったらスマホ表示     */

h1, h2, h3, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}