menu
menu

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

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

  • Labs

XHTML1.0

こんにちは(・∀・)

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


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

サンプルデモ

 サンプルデモはこちら!


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>XHTML1.0で1カラムレイアウト</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で1カラムレイアウト</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">
<h3>XHTML1.0で1カラムレイアウト</h3>
<p>今回は<strong>XHTML1.0</strong>でレイアウトした、超シンプル1カラムレイアウトのテンプレートサンプルをご紹介します。センター固定レイアウトとリキッドレイアウトも簡単に変更できます。シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。</p>
<!--main--></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;
	min-width: 960px;
}
#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で2カラムレイアウト

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

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