HTML + CSS Sample Code
HTML5 Semantic の基本形です。
注意
以下のソースは標準ブラウザを利用することが前提なので <main>タグを使用していますが、InternetExplorerではHTML5の<main>タグが使えません。またMicrosoft Edgeでも <main>を inline要素として認識するという異端ぶりなので、そのあたりが標準化されるまでは <main> のかわりに <div id="main"> などとする方がいいでしょう。2017年現在。
Sample 01をレスポンシブ（640px）にすると同時に、index.html と works.html の２ページを、ID を使ってレイアウトを書き分けた事例です。
ページごとのレイアウトの描き分けについて
１つのCSSで全てのページを制御するという前提に立てば、全てのページでHTMLの基本構造が同一であることが必要です。このサンプルでは、標準ページ（index.html）のレイアウトに対する、例外ページ（works.html）のレイアウトを、IDの追加と、追加のCSSを書く方法で実現しています。HTMLの構造をワイヤーフレームで比較すると右のようになります。section の部分に IDを追加しただけです。
<section id="gallery">
/******** Gallery Style ********/
section#gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
section#gallery article {
width: 160px;
margin-right: 1rem;
margin-bottom: 3rem;
line-height: 150%;
}
section#gallery article div{
margin-bottom: 0.5rem;
}
これ以下の記事は、float を使ってボックスをレイアウトする内容になっています。現実には古いPC・ブラウザで見ている方も多くいるので、以下のサンプルの方がみんなにやさしい・・のですが、これから学習する方は上記のFlexboxによるレイアウトサンプルを参考にして下さい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<img id="logo" src="images/logo.png" alt="Sample Site">
<h1 id="pageTitle">information</h1>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="#">profile</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
<div id="contents">
<article>
<h1>春はあけぼの</h1>
<p>
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、<br>
紫だちたる雲の細くたなびきたる。<br>
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。<br>
また、ただ一つ二つなど、ほかにうち光て行くもをかし。雨など降るもをかし。<br>
</P>
</article>
<article>
<h1>方丈記</h1>
<p>
行く川のながれは絶えずして、しかも本の水にあらず。<br>
よどみに浮ぶうたかたは、かつ消えかつ結びて久しくとゞまることなし。<br>
世の中にある人とすみかと、またかくの如し。<br>
</P>
</article>
</div>
<footer>
© Your Name http://www.xxxxx.com
</footer>
</div>
</body>
</html>
* {
margin: 0px;
padding: 0px;
border: none;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
body {
font-family: Tahoma, sans-serif;
background-color: silver;
}
#container {
margin: auto;
position: relative;
width: 960px;
background-color: white;
}
header {
height: 160px;
background-color: #e8e8e8;
}
#logo {
position: absolute;
top: 80px;
left: 40px;
width: 40px;
}
header h1 {
position: absolute;
top: 90px;
left: 100px;
color: #333333;
}
nav {
height: 40px;
padding-left: 40px;
background-color: #333333;
}
nav li {
float: left;
}
nav li a{
display: block;
width: 80px;
padding: 12px 0px;
font-weight: bold;
color: silver;
}
nav li a:hover{
color:white;
}
#contents {
margin: 40px;
}
article {
margin-bottom: 40px;
}
article p {
line-height: 180%;
}
article h1{
margin-bottom: 16px;
}
footer {
clear: both;
padding: 40px;
text-align: center;
background-color: #e8e8e8;
}
Webフォント・マルチカラムの例 →DEMO