--- title: HTML5/CSS3 2カラム 良く使うbase.html。 tags: HTML5 CSS3 author: shin_santa_claus_mikawa slide: false --- 別に深い考察はありません。良く使いそうな2カラムのHTML5ソースコードですので、個人的にファイリングしてみました。忙しいときに楽したいですから…。 ☆Webクリエイター能力認定試験HTML対応エキスパート公式テキスト 参照☆ ```HTML5:base-2column.html

2カラムの作り方

``` ```CSS3:2column.css @charset "utf-8"; /* 基本レイアウト ここから↓*/ body { background-color: #f3f2e9; color: #5f5039; } header, nav, #breadcrumb, #contents, footer { margin: 0 auto 0 auto; width: 840px; } header h1 { margin: 0 0 26px 0; padding-top: 28px; text-align: center; } nav ul { overflow: hidden; margin: 0 0 20px 0; padding-left: 0; list-style-type: none; } nav ul li { float: left; width: 210px; } nav ul li a { overflow: hidden; display: block; padding-top: 44px; height: 0; } nav ul li#nav_concept a { background-image: url(../images/nav-sanyuukaku-1-1.png); } nav ul li#nav_plan a { background-image: url(../images/nav-sanyuukaku-1-2.png); } nav ul li#nav_fair a { background-image: url(../images/nav-sanyuukaku-1-3.png); } nav ul li#nav_contact a { background-image: url(../images/nav-sanyuukaku-1-4.png); } #contents { overflow: hidden; } #main { float: left; width: 570px; } #sub { float: right; width: 230px; } footer { padding-top: 70px; } #main h1 { margin: 0 0 30px 0; padding: 35px 0 35px 65px; font-size: 156.25%; background-image: url(../images/bg_h1_head.png), url(../images/bg_h1_bottom.png); background-repeat: no-repeat, no-repeat; background-position: left top, left bottom; } #concept #nav_concept a, #plan #nav_plan a, #fair #nav_fair a, #contact #nav_contact a, nav ul li a:hover { background-position: 0 -45px; } .bnr_inner a p img:hover { opacity: 0.8; } /* 基本レイアウト ここまで↑*/ ```