menu
menu

HTML5で3カラムレイアウト | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook9
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0

HTML5で3カラムレイアウト

  • Labs

HTML5

こんにちは(・∀・)

 HTML5を使用したサンプルをご紹介します。今回は3カラムレイアウトのテンプレートサンプルです。


 シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。

サンプルデモ

 サンプルデモはこちら!


HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="style.css">
<!--Require Javascript-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<h1>HTML5で3カラムレイアウト</h1>
<h2><a href="http://www.webdlab.com/">Webデザインラボ</a></h2>
</header>
<div id="contents">
<nav>
<ul>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
</ul>
</nav>
<div id="main">
<article>
<h3>サンプル</h3>
<section>
<h3>HTML5で3カラムレイアウト</h3>
<p>HTML5でレイアウトした超シンプル3カラムレイアウトのテンプレートサンプルです。シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。</p>
</section>
</article>
<!--main--></div>
<aside>
<p>ここはサイドバーです。</p>
</aside>
<!--contents--></div>
<footer>
<div id="copyright">&copy;WEB DESIGN LAB</div>
</footer>
<!--wrapper--></div>
</body>
</html>
CSS

header {
	min-width: 1060px;
	overflow: hidden;
	border-bottom: 2px solid #9fb7d4;
}
	header h1 {
		width: 1060px;
		margin: 0 auto;
		padding: 10px 10px 0 10px;
	}
	header h2 {
		width: 1060px;
		margin: 0 auto;
		padding: 0 10px 10px 10px;
	}
#contents {
	overflow: hidden;
	width: 1060px;
	margin: 0 auto;
}
#contents nav {
	float: left;
	width: 200px;
	margin: 0 auto;
	overflow: hidden;
	background: #ddd;
}
	#contents nav ul {
		padding: 10px;
		list-style: none;
		overflow: hidden;
	}
	#contents nav ul li {
		float: none;
		margin-right: 0;
	}
#contents #main {
	float: left;
	width: 660px;
	overflow: hidden;
	background: #9fb7d4;
}
	#contents #main article {
		overflow: hidden;
		padding: 10px;
	}
#contents aside {
	float: left;
	width: 200px;
	overflow: hidden;
	background: #ccc;
}
	#contents aside p {
		padding: 10px;
	}
footer {
	min-width: 1060px;
	overflow: hidden;
	border-top: 2px solid #9fb7d4;
}
	footer #copyright {
		width: 1060px;
		margin: 0 auto;
		padding: 10px;
	}

関連リンク

 HTML5・ページ作成の基本

 HTML5で1カラムレイアウト

 HTML5で2カラムレイアウト

  • カテゴリー:Labs
  • facebook9
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0