【第4回】CSSの実装～TOPページ｜HTML5で作る企業サイトのコーディング

Yuuです。

今日はCSSの実装に移ります。 全体的なレイアウトのスタイリングを指定しています。

サイズの指定

1
2
3
4
5
6
7
8

#header,
#header #gNav,
#main,
#footer,
#footer #fNav{
     width:960px;
     margin:0 auto;
}

共通部分でまとめられるところはまとめてしまいます。 後々変更が必要になったときはここを変えれば、一括で変更できますしね。

Containerの実装

HTML

1
2
3
4
5
6
7
8
9
10

<div id="container">

  <header id="header">
  </header>
  <div id="main">
  </div>
  <footer id="footer">
  </footer>

</div>

CSS

1
2
3
4
5

#container{
  font-size:100%;
  line-height:150%;
  letter-spacing:0.05em;
}

各要素を入れるコンテナボックスを作ります。 人によっては、wrapperとかでしょうか。

CSSには、フォントサイズ、行間、文字間の指定を行っています。 また背景画像がある場合はこのcontainerに設定します。

Headerの実装

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

<header id="header">
  <h1 class="logo">Code Life株式会社</h1>
  <p class="description">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
  <nav id="gNav">
    <ul>
      <li><a href="">menu1</a></li>
      <li><a href="">menu2</a></li>
      <li><a href="">menu3</a></li>
      <li><a href="">menu4</a></li>
      <li><a href="">menu5</a></li>
    </ul>
  </nav>
</header>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#header .logo{
     width:360px;
     float:left;
}
#header .description{
     width:600px;
     float:right;
     text-align:right;
}
#header #gNav li,
#header #gNav li a{
     width:192px;
}
#header #gNav li{
     float:left;
     text-align:center;
}
#header #gNav li a{
     display:block;
     background-color:#ccc;
}
#header #gNav li a:hover{
     color:#fff;
     background-color:#000;
}

ここでは、おもにタイトル部分とグローバルナビゲーションの設定を行っています。

floatをするなら、親要素、float要素それぞれにwidthを指定してあげること。 これをしないと、レイアウト崩れの原因になります。

Main contents & sidebarの実装

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div id="main">
  <div id="slideShow">
    <!-- 略 -->
  </div>
  <div id="contents">
    <article id="information">
      <h1>最新のお知らせ</h1>
      <section id="news">
        <h2>トピックス</h2>
        <dl>
          <dt></dt>
          <dd></dd>
        </dl>
      </section>

      <!-- 略 -->

    </article>
  </div>
  <div id="sidebar">
    <!-- 略 -->
  </div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#main #slideShow{
  /* slideshow 後ほど実装 */
}
#main #contents,
#main #contents #information dl{
  width:720px;
}
#main #contents{
  float:left;
}
#main #contents #information dt{
  float:left;
  width:140px;
}
#main #contents #information dd{
  float:left;
  width:580px;
}
#main #sidebar{
  width:210px;
  float:right;
}

カラム部分となるcontentsとsidebarに対してfloatを。 それにあわせて、information部分のdlにスタイルを設定しています。

Footerの実装

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<footer id="footer">
  <ol id="breadCrumbs">
    <li><a href="#">HOME</a> ></li>
    <li>トップページ</li>
  </ol>
  <p id="pageTop"><a href="#top">Page Top</a></p>
  <nav id="fNav">
    <ul>
      <li><a href="">menu6</a></li>
      <li><a href="">menu7</a></li>
      <li><a href="">menu8</a></li>
      <li><a href="">menu9</a></li>
    </ul>
  </nav>
  <p id="copyRight">Copyright &copy; 2012 Code Life.inc, All Rights Reserved.</p>
</footer>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#footer #breadCrumbs{
  width:720px;
  float:left;
}
#footer #breadCrumbs li{
  float:left;
  margin-right:5px;
}
#footer #pageTop{
  width:210px;
  float:right;
  text-align:right;
}
#footer #fNav{
  clear:both;
  text-align:center;
}
#footer #fNav li{
  display:inline;
  padding-right:5px;
  border-right:1px solid #000;
}
#footer #fNav li:last-child{
  border-right:none;
}
#footer #copyRight{
  text-align:center;
}

パンくず、ページトップボタン、サブメニューのナビスタイルを実装。 サブメニューの部分は、display:inline;を使用しています。

float:left;だと一旦左寄せにしたものをセンター配置ということをしなくてはいけないので、ここは簡単にインライン要素にしています。

ということでこれで、具体的な調整はしていないものの、大まかなレイアウトの枠組みは完了しました。 あとはデザインに合わせて各スタイル要素を設定していくだけです。

Comments