<ul>
<li><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li><a href="../info/css_design1.html">Web製作</a></li>
</ul>

<div id="navbar">
<ul>
<li class="tp"><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li class="current"><a href="../info/css_design1.html">Web製作</a></li>
</ul>
</div>

  <style type="text/css">
<!--
/*  #navbarのCSSサンプル  */

/* ナビゲーションバーの表示指定 */
#navbar{
  width:auto; /* ←このような記号で囲まれているこの部分はすべて注釈→ */
  height:20px;
  background-color:#AFAFAF; /* 背景色 */
  border-color:#FFFFFF #565656 #6E6E6E #D5D5D5; /* 枠の色、順番は「上、右、下、左」 */
  border-width:1px 1px 2px; /* 枠の太さ、指定が3つの時の順番は「上、左右、下」 */
  border-style:solid; /* 枠の種類、solidは単色 */
  font-size:9pt;
  color:#CCC; /* 文字色、この色指定は「#CCCCCC」と同じ意味 */
  white-space:nowrap;
  }

/* 番号なしリスト UL の表示指定 */
#navbar ul{
  margin:0 0 0 10px; /* 0の場合の単位は省略可 、指定が4つの時の順番は同様に「上、右、下、左」 */
  padding:2px 0 0; /* 指定が3つなら「上、左右、下」、もし2つなら「上下、左右」*/
  list-style:none; /* リストマークを非表示に */
  font-size:100%;
  }

/* リスト項目 LI の表示指定 */
#navbar li{
  float:left; /* 左にフロートさせて1行に納める */
  width:90px; /* フロートの幅を指定 */
  margin:0; /* マージン指定 値が1つなので「上下左右のマージンが0」*/
  padding:0; /* パディング指定 */
  border-top:solid 1px #333; /* 枠の種類、太さ、色をこのように一括で指定しても良い */
  border-right:solid 1px #999;
  border-left:solid 1px #444444;
  border-bottom:solid 1px #666;
  background-color:#666; /* リスト項目背景色 */
  background-image:none; /* 背景画像なし */
  line-height:15px; /* 行間隔 */
  text-align: center; /* 文字中揃え */
  text-indent:0;
  color:#FFF;
  }

 /* tp 背景を透明に */
#navbar li.tp{
  background-color: transparent;
  border-width: 0px ;
  padding:0 5px 0 15px;
  text-align: right; /* 文字右揃え */
  }

  /* strong 文字を強調 */
#navbar strong{font-weight:bold;}  /* 改行しないでこのようにも書ける */

 /* リンクされている文字の色指定 */
#navbar a{
  padding:0 12px;
  background-color: transparent;
  font-weight:bold;
  text-decoration:none;  /* 下線表示などの装飾なし */
  }
#navbar a:link{color:#FFF;}  /* リンク部分：表示前 */
#navbar a:visited{color:#FFF;}  /* リンク部分：表示済み */
#navbar a:hover{color:#88FFFF;}  /* リンク部分：オンマウス */
#navbar a:active{color:#333;}  /* リンク部分：オンクリック */

 /* current 表示中のページの文字、背景、ボーダーの色を変更 */
#navbar li.current{
  background-color: #668888;
  border-right-color: #888888;
  color:#FFF; 
  }
#navbar li.current a:link, /* カンマで区切って、次と同じ指定に */
#navbar li.current a:visited{ color:#ECFFFF;}  /* リスト中のリンク部分の指定 */
#navbar li.current a:hover{ color:#B0BFBF;}
-->
  </style>

<div class="navbar">
<ul>
<li class="tp"><strong>Info</strong></li>
<li><a href="../info/index.html">Index</a></li>
<li><a href="../info/readme.html">ページの構成</a></li>
<li><a href="../info/history.html">更新履歴</a></li>
<li><a href="../info/domain.html">ドメイン取得</a></li>
<li class="current"><a href="../info/css_design1.html">Web製作</a></li>
</ul>
</div>

スタイルシート・サンプルブックの紹介

CSSに関心を持たれた方は、2004年に私がスタイルシートを書き直した時に、書店で時間をかけて選んだ一冊を紹介します。雑誌の特集はこの本の一部を紹介したような感じですから、この本だけでも十分です。CSSは、文法は単純なんですが「どのように適用するのか、それがどう反映されるのか」がわかりにくいので、豊富なサンプルを使って書かれているこの本は非常に参考になりました。さらに、紹介されているCSSサンプル、CSSを適用するために使うhtmlコードとも、特殊な書き方とかではなく、本質的でクリーンなコードですから、その点からもお勧めできます。是非読んでみてください。

• スタイルシート・サンプルブック
• 著者：大藤幹
• 発行：ソシム、1900円

スタイルシートは便利なのですが、各社のブラウザのサポートレベルに差があるためブラウザごとに確認が必要（特にIE6）であったりして悩みますが、BlogのカスタマイズにはCSSが必須ですから、ある程度覚えておくと便利です。 当方でもスタイルシートを前提にページを作成していますが、まだ私もスタートラインに立ったばかりというレベルです。 私に難しい質問を向けても...わからないかもしれません、いっしょにあれこれ試していきましょう。

zspc：大藤幹氏のウェブサイト