menu
menu

XHTML1.0で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だけでブロック要素の表示非表示(トグルボタン)
  • facebook4
  • はてなブックマーク3
  • Google+5
  • Pocket0
  • Twitter0

XHTML1.0で3カラムレイアウト

  • Labs

XHTML1.0

こんにちは(・∀・)

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


 センター固定レイアウトとリキッドレイアウトも簡単に変更できます。シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。

サンプルデモ

 サンプルデモはこちら!


HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Webデザインラボ</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<!--Require Stylesheet-->
<link rel="stylesheet" type="text/css" href="sample.css" />
<!--Require Javascript-->
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="head-inner">
<h1>XHTML1.0で3カラムレイアウト</h1>
<h2><a href="/" target="_blank"><img src="logo.png" alt="Webデザインラボ" /></a></h2>
<!--head-inner--></div>
<!--header--></div>
<div id="contents">
<div id="main">
<div id="main-inner">
<div id="main2">
<div id="main2-inner">
<article>
<section>
<h3>XHTML1.0で3カラムレイアウト</h3>
<p>今回は<strong>XHTML1.0</strong>でレイアウトした、超シンプル3カラムレイアウトのテンプレートサンプルをご紹介します。センター固定レイアウトとリキッドレイアウトも簡単に変更できます。シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。</p>
</section>
</article>
<!--main2-inner--></div>
<!--main2--></div>
<div id="right-sidebar">
<p>ここはライトサイドバーです</p>
<!--right-saidebar--></div>
<!--main-inner--></div>
<!--main--></div>
<div id="left-sidebar">
<p>ここはレフトサイドバーです</p>
<!--left-sidebar--></div>
<!--contents--></div>
<div id="footer">
<div id="foot-inner">
<p>&copy; WEB DESIGN LAB</p>
<!--foot-inner--></div>
<!--footer--></div>
<!--wrapper--></div>
</body>
</html>
CSS

#wrapper {
	width: 100%;
}
#header {
	background: #9fb7d4;
	min-width: 960px;
}
#header #head-inner {
	margin: 0 auto;
}
#contents {
	margin: 0 auto;
	overflow: hidden;
	min-width: 960px;
}
/*--------------------------------------------------------------------
(サイドバーの幅はここで変更 右は右、左は左で合わせる)
--------------------------------------------------------------------*/
#main {
	overflow: hidden;
	float: right;
	width: 100%;
	margin: 0 0 0 -160px;/*右カラム幅*/
}
#main-inner {
	position: relative;
	text-align: left;
	margin: 0 0 0 160px;/*右カラム幅*/
}
#main2 {
	float: left;
	width: 100%;
	margin: 0 -250px 0 0;/*左カラム幅*/
}
#main2-inner {
	text-align: left;
	margin: 0 250px 0 0;/*左カラム幅*/
}
#right-sidebar {
	float: right;
	width: 250px;/*左カラム幅*/
	text-align: left;
	background-color: #ccc;
	margin: 0 0 10px 0;
}
#left-sidebar {
	float: left;
	width: 160px;/*右カラム幅*/
	text-align: left;
	background-color: #ccc;
	margin: 0 0 10px 0;
}
/*------------------------------------------------------------------*/
#footer {
	border-top: 2px solid #9fb7d4;
	min-width: 960px;
}
#footer #foot-inner {
	margin: 0 auto;
}
#header #head-inner,
#contents,
#footer #foot-inner {
	width: 960px;/*センター固定 or リキッドレイアウトの変更(リキッドレイアウトにする場合はwidthを100%に変更)*/
}

関連リンク

 XHTML1.0で1カラムレイアウト

 XHTML1.0で2カラムレイアウト

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