body要素への記述１

body要素への記述

先の、head部分を記述したHTML文のbody部分の装飾（見え方）を記述して行きます。

コンテンツの内容はHTMLのタグを使い書きますが、ページの見え方、装飾はスタイルシート（CSS）を使って整えます。このサンプルページをテンプレートとして使えるように、字体、行間などの装飾的なものをCSSで設定して行きます。

サンプルページ

ページ全般の設定

まずは、ページ全般の設定を先に作成した2カラムレイアウトのスタイルシートに追加します。

*{ margin: 0; padding: 0;}   /* 全ての要素のmarginとpaddingを0に設定 */
html{ overflow-x: hidden;}　　/* 要素からはみ出し部分を非表示に */
article,aside,details,nav,section,footer,header{
  display:block;             /* 新要素をブロック要素に変更 */
}
body{
  font-family: "Open Sans",arial,sans-serif;
  font-size:100%;           /* フォントサイズの設定 */
  line-height:1.6;          /* 行の高さ設定 */
}
img{ border:0px}            /* リンク画像の枠線を非表示にする */
a{
  color:mediumblue;         /* リンク色の設定 */
  text-decoration:none;     /* リンクテキストの下線を消す */
}  
a:hover{color:#ff8c00}      /* リンクテキスト、マウスを乗せたときの色を設定 */

サイトタイトル領域の編集

サイトタイトルをテキストで見出しh1要素を使って記述します、下記のHTMLとCSSをそれぞれ追加します。又、タイトルロゴ画像使う場合は、テキストの部分をimg要素に置き換えます。

<header id="siteTitle">
   <h1>Sampleサイト</h1>
</header>

#siteTitle h1{
  font-style:italic;          /* フォントスタイルをイタリック（斜体）に */
  padding:20px 10px 0 20px;   /* 文字列の表示位置の設定 */
}

グローバルナビゲーション領域の編集

リストタグを使った横並びのリンクメニューにします。

   <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
   </ul>

ここでは、横並びメニューにするために<li>に”float”を使うことにします。

#nav ul{
   height:34px;                   /* 高さの設定 */
   list-style:none;               /* リストマークを非表示に */
   border: 1px solid #666;        /* 枠線のサイズ、スタイル、色を設定 */ } 
#nav li{
   float:left;                   /* リスト項目を右にフロート */
   border-right:1px solid #666;  /* 右枠線の設定 */ 
}
#nav li a{
   padding:0 20px;              /* 上下余白の設定 */
   line-height:35px;            /* 行の高さを設定 */
   display: block;              /* ブロック要素に設定 */
}
#nav li a:link     {color:#000080}  /* 未訪問のリンク色  */ 
#nav li a:visited {color:#178B65}   /* 訪問済みリンク色 */
#nav li a:active  {color:#178B65}   /* クリック時のリンク色 */
#nav li a:hover   {background-color:#ffff00}  /* マウスオーバー時の背景色 */

floatを使わず、link要素に”display: inline-block;”を使ってに横並びにすることもできます。

メインコンテンツ領域への記述の前に

main要素内の見出し、箇条書き、表などの装飾をしますが、その前にHTML5とそれ以前のアウトライン（階層構造）の記述の違いを比べてみます。

暗黙的アウトラインを生成するのに、サイトタイトルで<h1>タグを使っているため、main要素内での大見出しは<h2>から<h3>,<h4>とランクを下げてゆきます。

   <p><strong>【暗黙的アウトラインの生成】</strong></p>
   <h2 >ここは2hタグを使っています</h2>
   <h3 >ここは3hタグを使っています</h3>
   <h4>ここはh4タグを使っています。</h4>

   <section>
      <p><strong>【明示的アウトラインの生成】</strong></p>
      <h1>ここは1hタグを使っています</h1>
      <section>
         <h1>ここは1hタグを使っています</h1>
         <section>
            <h1>ここは1hタグを使っています</h1>
         </section>
      </section>
   </section>

section要素を使って明示的に生成したアウトラインでは全て<h1>タグを使っても暗黙的アウトラインと同じアウトラインになっていることがが分かります。これは、明示的にアウトラインを生成した場合h1~h6tタグが階層構造的には意味を持っていないことを表しています。

サンプルページを見るにはここをクリック