LogoMark.png

CSS/Sample のバックアップ(No.2)

CSS Sample

HTML + CSS Sample Code

↑

CONTENTS


↑

Sample01

HTML5 Semantic の基本形です。

注意
以下のソースは標準ブラウザを利用することが前提なので <main>タグを使用していますが、InternetExplorerではHTML5の<main>タグが使えません。またMicrosoft Edgeでも <main>を inline要素として認識するという異端ぶりなので、そのあたりが標準化されるまでは <main> のかわりに <div id="main"> などとする方がいいでしょう。2017年現在。



↑

Sample01 Variations

↑

基本形（Sample01 と同じ）

#container { header, nav, main { section, aside } , footer }


↑

header の中に nav があるパターン

sample01.jpg
#container{ header{ nav } , main{ section, aside } , footer }


↑

main の中に ３つのブロックがあるパターン（３カラム）

sample02.jpg
#container{ header, main{ nav, section, aside } , footer }


↑

header, footer が画面幅100%になるパターン

sample03.jpg
header{ nav } , main{ section, aside } , footer

上記３つの実現事例（コードまとめ）




↑

Sample 02

Sample 01をレスポンシブ（640px）にすると同時に、index.html と works.html の２ページを、ID を使ってレイアウトを書き分けた事例です。

↑

参考

ページごとのレイアウトの描き分けについて

Wireframe.png

１つのCSSで全てのページを制御するという前提に立てば、全てのページでHTMLの基本構造が同一であることが必要です。このサンプルでは、標準ページ（index.html）のレイアウトに対する、例外ページ（works.html）のレイアウトを、IDの追加と、追加のCSSを書く方法で実現しています。HTMLの構造をワイヤーフレームで比較すると右のようになります。section の部分に IDを追加しただけです。




↑

過去記事

これ以下の記事は、float を使ってボックスをレイアウトする内容になっています。現実には古いPC・ブラウザで見ている方も多くいるので、以下のサンプルの方がみんなにやさしい・・のですが、これから学習する方は上記のFlexboxによるレイアウトサンプルを参考にして下さい。

↑

index.html

<!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>
        &copy; Your Name　　http://www.xxxxx.com
     </footer>
  </div>
</body>
</html>


↑

style.css

* {
  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