テンプレートセンター

Number.003 / 2コラム・右サイドバーのテンプレート

ファイル名を「index.html」、文字コードを「utf-8」として保存してください。

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

こちらはCSSになります。「style.css」として保存してください。

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


HOME > 2コラム・右サイドバー