ホームページのテンプレートセンター

無料テンプレートをご紹介しています。

Number.007 / 2コラム左サイドバーのテンプレート

こちらのテンプレートでは、box-shadow:でサイドバーを外す、つけるを疑似的に表現し、transform: rotate;で回転を演出しています。※実際のテンプレートは回りません。

htmlファイル

こちらはファイル名と文字コードを以下のように保存してください。

ファイル名:「index.html
保存文字コード:「utf-8

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あなたのHPタイトル</title>
<meta name="description" content="ページの説明">
<meta name="keywords" content="ページのキーワードA,B,C">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="outer">
<header>
<div id="header-inner">
<h1>あなたのHPタイトル</h1>
<p class="description">あなたのHPの説明文</p>
</div>
</header>
<div id="content">
<div class="inner"><h2>記事ページ見出し・大</h2>
<p>文章あれこれ</p>
<h3>記事ページ見出し・中</h3>
<p>文章あれこれ</p>
<h4>記事ページ見出し・小</h4>
<p>文章あれこれ</p>
</div>
</div>
<aside>
<div id="side-inner">
<div class="side-title">サイドバータイトル</div>
<div class="side">
<ul>
<li>記事ページへのリンク</li>
<li>記事ページへのリンク</li>
</ul>
</div>
</div>
</aside>
<footer>© 2010 あなたのホームページ</footer>
</div></body>
</html>コピーボタンコピーチェックボタン

スタイルシート

こちらはCSSになります。

ファイル名:「index.css
保存文字コード:「utf-8

CSS
コピーボタンコピーチェックボタン



HOME > 2コラム・左サイドバー一覧