三十日目！（～ロールオーバー続き）

昨日の続き進めます。

次のようにグローバルナビゲーションを定義したXHTMLに、さまざまなテクニックでロールオーバー効果を設定していく。

XHTML
<ul id="nav">
   <li id="nav-top" class="current"><a href="/">トップページ</a></li>
   <li id="nav-service"><a href="/service/">サービス内容</a></li>
   <li id="nav-workflow"><a href="/workflow/">ご利用の流れ</a></li>
   <li id="nav-price"><a href="/price/"料金表</a></li>
   <li id="nav-estimate"><a href="/estimate/">自動見積</a></li>
   <li id="nav-faq"><a href="/faq/">よくあるご質問</a></li>
</ul>


●「テキストのみ」または「テキスト+background」で実現
「テキスト」のみではサンプルのようなデザインは実現できない。テキストをCSSでそれっぽくスタイリングしたり、backgroundプロパティで背景画像を指定することもできますが、デザインの完全再現はムリといえる。

●「テキスト+text-indent+background」で実現（画像置換）
a要素にテキストを含め、背景画像を指定しただけでは、背景画像の上にテキストが重なって表示されてしまう。テキストを非表示化する方法のひとつが、text-indentプロパティを利用すること。
たとえば、「text-indent: -9999px;」と指定する。

●li要素を横並びにする
サンプルではli要素に「float:left;」と指定することで、横並びにしている。「display:inline;」を使うこともできるが、その場合、行内に余白が確保されてしまうため、縦方向のmarginやpaddingを指定しても思い通りの表示ができない。

シンプルにテキストを横並びにするのであれば「display:inline;」を、グラフィカルで幅固定されたナビゲーションを横並びにするのであれば、「float:left;」を利用するというように適宜使い分ける。

●クリッカブル領域のアウトライン
text-indentプロパティをマイナス値で指定することで、a要素のクリッカブル領域のアウトライン（点線）がはみ出して表示されるブラウザがある。
これを回避するために「overflow:hidden;」と指定する。「outline:none;」ではクリッカブル領域を認識しづらくなる弊害があるため、「overflow: hidden;」のほうがよい方法である。

CSS
/* ナビゲーション全体のスタイリング */
ul#nav, ul#nav li, ul#nav li a {
  margin: 0;
  padding: 0;
  display: block;
  height: 28px;
}
ul#nav {
  background: url(bg.png) repeat-x;            /* 背景画像を横方向にリピート */
}
/* ナビゲーション項目に共通のスタイリング */
ul#nav li {
  float: left;                                           /* 項目を横並びにする */
  width: 100px;                                       /* 項目に含めた画像それぞれの幅は100px */
}
ul#nav li a {
  overflow: hidden;                                  /* クリッカブル領域の外にはみ出してしまうアウトライ                            ンを隠す */
  text-indent: -100000em;                       /* テキストを画面左側に追いやって見えなくする（オフレット） */
}
/* ナビゲーション項目それぞれのスタイリング */
ul#nav li#nav-top {
  background: url(hover/top.png) no-repeat;
}
ul#nav li#nav-top a {
  background: url(top.png) no-repeat;
}


・・・（中略）・・・


ul#nav li#nav-faq {
  width: 101px;
  background: url(hover/faq.png) no-repeat;
}
ul#nav li a:hover,
ul#nav li.current a {
  background-image: none !important;           /* ロールオーバー時に項目それぞれの背景画像を隠す */
}


次に、CSSだけでロールオーバー効果をどのように実現するか考えてみる。親要素のul要素にこのナビゲーション全体のリピート背景を指定、子要素のli要素それぞれにロールオーバー後の背景を指定、孫要素のa要素それぞれにロールオーバー前の背景を指定し、a要素の「:hover」（ロールオーバー時）だけ背景をなくすことで、li要素の背景が出現する仕組みでロールオーバーを実現している。

なお、現在表示しているページやカテゴリーに該当するli要素には「class="current"」と指定してはじめから背景をなくし、ロールオーバー後の背景が表示されるようにしている。

●CSS Sprites
このサンプルでは、リンクひとつひとつに対してそれぞれ単独の背景画像をしていしているが、画像をひとまとめにしてbackground-positionプロパティを使って位置指定する方法もある。

画像ファイルのリクエスト数を減らせる為、アクセス数の多い検索サイトやWebサービスなどでしばしば利用されているテクニックで、「CSS Sprites」と呼ばれている。


●「テキスト+display:none+background」で実現（画像置換）
text-indentプロパティを利用してテキストを非表示化するのではなく、「display:none;」で非表示化する方法もある。ただし、次のようにa要素のなかにspan要素を加えなければならない。

XHTML
<ul id="nav">
   <li id="nav-top" class="current"><a href="/"><span>トップページ</span></a></li>
   <li id="nav-service"><a href="/service/"><span>サービス内容</span></a></li>
   <li id="nav-workflow"><a href="/workflow/"><span>ご利用の流れ</span></a></li>
   <li id="nav-price"><a href="/price/"><span>料金表</span></a></li>
   <li id="nav-estimate"><a href="/estimate/"><span>自動見積</span></a></li>
   <li id="nav-faq"><a href="/faq/"><span>よくある質問</span></a></li>
</ul>


CSSはいたってシンプルで、span要素に対して「display:none;」と指定すれば非表示化される。

CSS
 ul#nav li a span {
   display: none;    /* テキストを非表示にする */
 }


ただし、音声ブラウザのなかには「display: none;」と指定された内容を読み上げないものがあり、text-indentプロパティを利用する方法に比べてアクセシビリティが低くなる。また構造とは無関係にspan要素を使う点も好ましくない。

●画像置換とSEOの関係
img要素を使わずに、CSSの「画像置換」というテクニックを利用する動機には、デザイン変更時にCSSだけを修正すれば済むという「メンテナンス性の向上」のほか、「SEO」もある。検索サービスのなかにはalt属性値を収集対象に含めないものがあるというわれており、（また、クローラーの挙動やアルゴリズムが変更される可能性があるため）、alt属性値よりも普通のテキストのほうが確実だから。
一方、検索サービス各社は、ガイドラインで「隠しテキストや隠しリンクは使用しないこと」としているため、違反するサイトはスパムと見なされ、大幅に検索順位が下がったり、検索結果に表示されなくなる（いわゆる「SEOスパムサイト」と判断されてしまう）恐れがある。Googleの「ウェブマスター向けガイドライン」を参照のこと。

ただし、Googleは「画像置換が視覚的なユーザーエクスペリエンスを改善するためであれば、スパムになると心配する必要はない」と述べているため、あからさまにスパム目的で無い限り問題はないと考えられる。

●「img要素+JavaScript」で実現
CSSの画像転換を利用したロールオーバーと異なり、従来通りimg要素を埋め込む方法は、CSSオン・画像表示オフ環境ではalt属性値が表示されるため、そこにどのような画像が埋め込まれているかユーザーに伝えることができる。デザイン変更時にすべてのXHTMLを修正する手間はありますが、どのような環境でも対応できる安全かつ確実な方法。

ただし、img要素だけではロールオーバーは実現できないので、専用のJavaScriptを用意したり、jQueryなどのJavaScriptライブラリを利用する。

なお、次のようにJavaScriptのイベントハンドラをimg要素に直接指定し、ロールオーバーを実現することもできるが、構造のなかに振る舞いの指定が含まれることになってしまうため、JavaScriptの外部ファイルから実行させるようがよい点に注意。

<img src="images/nav-top.gif" alt="トップページ"
onmouseover="this.src='images/nav-top_on.gif'"
onmouseout="this.src='images/nav-top.gif'"/>


ロールオーバーはHP作成となるとほぼ必須に近いテクニックだと思います。前回作成したHPでもトップページのサイドバーで使用されてましたが、作成した部分ではサイドバーは触れなかったため、まだ実践できてないので実際に試しに作成してみないと。。という感じです。

本日はここまで。

二十九日目！（リスト、ロールオーバー～）

リストとリンクのスタイリング

グローバルナビゲーション、パンくずリスト、リンクリスト、用語集など、よくある事例をもとにリストのスタイリングを学んでいく。リストではさまざまなスタイリングテクニックを利用することができ、CSSの実践力を頭と体に叩き込む絶好のチャンスである。

また、ナビゲーションにしてもパンくずリストにしても、項目のなかに（a要素）を含むケースが多いため、リストとリンクのスタイリングをまとめて取り上げる。

リストやリンクのスタイリングのコツは、XHTMLのブロックレベル要素とインライン要素という「しばり」にとらわれずに表現方法を考えること。たとえばリンク（a要素）はインライン要素だが、「display:block;」でブロックレベル要素のように見せることができるし、背景画像と組み合わせてロールオーバー効果をつけるなど、さまざまなコンテンツに応用できる。

サイドバーに配置した最新記事一覧の例

●リンクリストのスタイリング

2カラムでレイアウトしているサイトやブログで、サイドバーに最新記事一覧を配置しているところをよく見かける。

行頭では記事をあらわすアイコンが置いてあり、訪問済みリンクの右端には「訪問済みであること」を示すチェックマークが表示されている。

デザインとしては、すべての項目に同じアイコンを表示させていることもあり、一見「順不同」な（ul要素でマークアップする）リンクリストだが、新しい順序で並んでいることを考えると、次のように順序つきリスト（ol要素）でマークアップするこもできる。

XHTML

<div id="recent-entries" class="section">

  <h2><img src="h2.png" alt="最新ブログ記事" /></h2>

  <ol>

    <li><a href="article1.html">【連動書籍執筆中】 CSS Nite...</a></li>

    <li><a href="article2.html">Fireworks デベロッパーに...</a></li>
    <li><a href="article3.html">Twitter関連サイト...</a></li>
    <li><a href="article4.html">Web Designing 9月号...</a></li>
    <li><a href="article5.html">最近のお知らせダイジェスト</a></li>
  </ol>
</div>


このXHTMLをもとにCSSを製作していく。まずはスタイルを適用していない状態でXHTMLファイルをブラウザで開いてみる。

CSSを適用する前に、XHTMLファイルをブラウザで表示させた例

●リストの先頭に任意のアイコンを表示
ol要素でマークアップしているため、ブラウザのデフォルトスタイルでは項目の先頭に番号が振られている。これは、ol要素内のliに対して、ブラウザのデフォルトスタイルが「list-style-type: decimal;」（先頭に1,2,3と番号を振る）になっているため。まず「list-style-type:none;」と指定してマーカーを消す。

次に、小さなアイコンをリスト先頭に表示させる。ここではbackgroudプロパティでli要素の背景として指定することで、あたかもリストマーカーが小さくなってアイコンになっているようにする。ひとつだけ表示させるために「no-repeat」、位置を指定するために「0 3px」（左から0、上から3pxの位置）と指定する。最後に、アイコンの表示スペースを確保するために、padding-leftプロパティで「18px」と指定する。

CSS
#recent-entries ol li {
  list-style-type: none;                              /* ブラウザデフォルトのリストマーカーを消す */
  backgroud: url(icon.gif） no-repeat 0 3px;    /*  アイコン画像と表示方法、位置の指定 */
  padding-left:  18px;                                /*  アイコンの表示スペースを確保 */
}


※list-style-image/list-style-positionの注意点
行頭のアイコンはbackgroundプロパティではなくlist-style-imageプロパティでも指定できる。その場合、行頭アイコンの位置は、list-style-positionプロパティで指定できる。
ただし、list-style-positionプロパティでは、リストマーカーを内容の外側（outside）と内側（inside）のどちらかに表示するかしか指定がないため、細かな位置指定はできない。またli要素に「display: inline;」と指定してインライン化した（横に並べた）場合、ほとんどのブラウザでリストマーカーを自動的に消してしまう為、backgroundプロパティを利用するしかない。したがって、デザインの再現性やブラウザの挙動を考えると、リストマーカーを任意の画像にする場合は、backgroundプロパティで実現したほうがよい。

●リンクの末尾に任意のアイコンを表示させる
li要素の中のa要素について、訪問済みであることを示すための「ひと工夫」をする。訪問済みのスタイルは:visited擬似クラスで指定する。基本的なスタイルはリストの先頭にアイコンを表示させることと変わらないが、訪問済みリンクのみ末尾に「check.gif」（訪問済みを示すチェックマーク）が表示されるように設定する。

#recent-entries ol li a:visited {
  padding-right: 10px  /* アイコンの表示スペースを確保 */
  color: #222266;  /*訪問済みリンクの文字色 */
  background: url(check.png) no-repeat right 5px;  /* アイコン画像と表示方法、位置の指定 */
}


なお、a要素に指定する擬似クラスは、「:link」「:visited」「:hover」「:focus」「active」の順で指定する点に注意。

リンクリストスタイリング実現に必要なCSS
#recent-entries {
  width: 180px;
  background: #dce4b1 url(recent_bottom.gif) no-repeat left bottom;
}
#recent-entries ol {
  margin: 0;
  padding: 10px 0 10px 0;                                /* ボックス内のol要素の位置を調整 */
}
#recent-entries ol li {
  margin: 0 12px 7px 15px;                              /* liリストの位置、間隔を調整 */
  list-style-type: none;                              　　/* ブラウザデフォルトのリストマーカーを消す */               
  background: url(icon.gif) no-repeat 0 3px;        /* アイコン画像と表示方法、位置の指定 */
  padding-left: 18px;                                      /* アイコンの表示スペースを確保 */
}
#recent-entries ol li a {
  color: #ffffff;                                              /* リンク文字色 */
}
#recent-entries ol li a:visited {
  padding-right: 10px;                                    /* アイコンの表示スペースを確保 */
  color: #222266;                                          /* 訪問済みリンクの文字色 */
  background: url(check.png) no-repeat right 5px  /* アイコン画像と表示方法、位置の指定 */
}
#recent-entries ol li a:hover,
#recent-entries ol li a:focus,
#recent-entries ol li a:active, {
   color: #ffffff;     /* カーソルオン、フォーカス、アクティブ時の文字色 */
}


●ナビゲーションのスタイリングと画像置換
ロールオーバーで背景色や背景画像が入れ替わる、という視覚効果を設定したナビゲーションは、ユーザーに対してカーソルアクションを明確に伝えることができ、ユーザビリティの向上に効果がある。一般的なグローバルナビゲーションを例に、「画像置換」というテクニックを利用したロールオーバー効果の実現方法を解説。

グローバルナビゲーションの例

練習もかねてGINP2で例画像作成

ロールオーバー効果を実現するにはさまざまな方法があり、それぞれにメリットとデメリットがある。サイトの規模や更新のしやすさ、音声読み上げを含むユーザーの利用環境を考慮しながら、メリットとデメリットを理解した上で最適な方法を選ぶ。

中途半端ですが今日はここまで。

二十八日目！（フォントとテキストのスタイリング）

連休中は、GINP2をさわって遊んでました。だいぶ前ではありますが、イラストレーターやフォトショップも少しはやったことがあり、レイヤーやペシェ曲線などなんとなくはわかっていたので、少しずつ使い方が分かってきました。

続きすすめていきます。

フォントとテキストのスタイリング
●フォントはユーザー環境に依存
そのフォントが表示されるかどうかはユーザー環境に依存する（ユーザーのパソコンにインストールされていないフォントは別のフォントになってしまう）という条件があるものの、特に欧文フォントはさまざまな種類が最初からOSに入っており、それぞれから文字の表情をいろいろ読み取ることができる。

Webページの本文部分は読みやすさを重視すべきであり、文字が主張しすぎるのは考えものだが、見出しなどで個性的なフォントを効果的に使うことで、画像を使わなくてもかなり豊かな表現ができるようになる。

書体の選択の際には、すべての環境に完璧に対応するのは難しいことをまず認識する。Windows Vistaに入っているフォント、Windows XPに入っているフォント、Mac OS Xに入っているフォント、これら全てのOSに入っているフォント、名称は違うけれど雰囲気の似ているフォントなどを理解したうえで、イメージどおりに書体が選択されるように指定する。

「choco*choco Cafe And Sweets」というロゴを例に、XHTML+CSSだけでスタイリングする。このような表現を実現するには、画像を使うのが一般的だが、あえてチャレンジングなサンプルとして。

このロゴをXHTML+CSSで実現するために、次のような細かなポイントを順番に確認する。

書体	Verdana
色	「choco*choco」の文字色は#663300、「Cafe And Sweets」の文字色は#ffffff
文字同士の間隔	「Cafe And Sweets」の間隔が広めになっている
大文字・小文字	「choco*choco」はすべて小文字、「Cafe And Sweets」はスモールキャップスの大文字
背景色	「choco*choco」の背景色は#ffffff、「Cafe And Sweets」の背景色は#663300
上下左右のマージンとパディング	画像を拡大して値をどうするか確認

これらのポイントに注意しながら作成したXHTMLとCSS

XHTML
<h1>choco*choco<span>Cafe And Sweets</span></h1>


CSS
  h1  {
    margin: 0;
    padding: 0;
    width: 310px;
    height: 104px;
    color: #663300;
    font-size: 40px;
    font-weight: bold;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    text-align: center;
  }


  h1 span {
  margin: 5px auto 0;
  display: block;
  width: 300px;
  line-height: 1.6;
  color: #ffffff;
  background-color: #663300;
  font-size: 20px;
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: 5px;
 }


●希望の書体に近いフォントをあわせて指定する
font-familyプロパティでフォントの種類を指定する際は「Verdana」だけでなく比較的近いフォントを指定しておく。先に書いてあるフォントが優先的に適用され、もしもそのフォントがなければ次に書かれているフォントという順序で適用される。

「Verdana」に雰囲気が似たフォントとして、「Helvetica」はＭac OS Xの多くに、「Arial」はWindowsやMac OS Xの多くにインストールされているので、これらも指定しておく。いずれのフォントも入っていない環境のために総称ファミリー（ここではゴシック体を意味する「sans-serif」）を指定しておくことで、より多くの環境に対応させることができる。

h1 { font-family: Verdana, Helvetica, Arial, sans-serif; }


●文字の大きさを調整する
「choco*choco」は「Cafe And Sweets」に比べて文字が大きくなっている。フォントの大きさはfont-sizeプロパティで指定する。単位をピクセルで指定すれば大きさを忠実に再現できる。

なお、IE6以前では、単位がピクセルで指定されていると、文字サイズを変更してもフォントサイズが変わらないという問題がある。ロゴについてはこれでよしと考えるか、CSSハックでIEに対してのみ、「em」などの相対単位を適用する。

●文字の太さを調整する
「chocochoco」は「Cafe And Sweets」に比べて文字が太くなっている。文字の太さはfont-weightプロパティで指定。font-weightプロパティの値は「normal」「bold」「bolder」「lighter」「100～900」（100刻みの数値）が指定できる。ただし、現在普及しているブラウザでは「100～900」の数値で指定しても100から500は「normal」と同等に、600から900は「bold」と同等になるため、はじめから「normal」か「bold」を選ぶのが現実的。

「bold」を選んだ場合、そのフォントファミリーにbold用の書体が含まれている場合、その書体でレンダリングされる。たとえば、「ヒラギノ角ゴ Pro」ファミリーで表示されている要素に対し「font-weight: normal」と指定した場合は「ヒラギノ角ゴ Pro W6」で表示される。

ただし、ブラウザの種類やバージョンによって、この機能をサポートしていない場合がある。その場合は「normal」で表示される書体を単純に太らせたかたちで表示される。

●文字間隔を調整する
「Cafe And Sweets」の文字間隔を多少広めにするためにはletter-spacingプロパティを利用する。このロゴのように幅や高さを固定している場合にはピクセルで指定する。本文部分で文字の大きさに合わせて読みやすさを確保する目的で使う、letter-spacingプロパティには、ピクセルではなく「em」で指定し、文字サイズとのバランスをもとに間隔が設定されるようにする。

●スモールキャップスの設定
「Cafe And Sweets」単語の先頭が通常の大文字、他の文字は小さめの大文字となっている。このような表現を「スモールキャップス」といい、font-variantプロパティで「small-caps」と指定することで実現できる。

今日はここまで。

二十七日目！（フォームパーツのマークアップ）

続きいきます。
●フォームパーツのマークアップ
fieldset要素と、legend要素を利用してグループ化することができる。フォームの入力項目を内容的・段階的にグループ化できる場合などに利用。

fieldset要素でグループ化する部品の範囲を示し、legend要素でグループのタイトルを示す。この例では、fieldset要素の背景色を設定することで、グループであることがいっそう際立つようにスタイリングしている。これらの要素を使わなくてもフォームとしては十分機能するが、グループ化した方がユーザーが利用しやすかったり、構造的に必要な場合は、このようにマークアップを行う。

●フォームのユーザービリティ向上のためのlabel要素
label要素はフォームのユーザビリティを向上させるのに欠かせない要素である。たとえばラジオボタンやチェックボックスはブラウザで小さく表示され、マウスでクリックする領域が狭いため、使う人によってはたいへん操作しづらい。label要素を使えばテキストをクリックしてもパーツが反応するため、ユーザビリティが大幅に向上する。テキスト入力欄など比較的クリックできる範囲が大きいパーツも、ラベルが設定されていればパーツとラベルのどちらをクリックしてもきちんと反応するので、ユーザーの直観的な操作を支援することができる。

フォームパーツにラベルを設定する方法は少しややこしいので、順序立て手作業することが大切。

１、ラベルにするテキストを書く（たとえば「お名前」）
２、そのテキストをlabel要素でマークアップする（<label>お名前</label>）
３、フォームパーツにIDを名をつける（<input id="name" .../>）
４、label要素にfor属性をつけ、パーツと同じID名を値として指定する（<label> for="name">お名前</label>)

<input type="radio" name="sex" id="man" /><label for="man">男性</label>
<input type="radio" name="sex" id="woman" /><label for="woman">女性</label>


●フォームのマークアップの工夫
フォームの中身のマークアップにはさまざまな方法がある。p要素を積み重ねてつくるのがもっともシンプルだが、「ラベルテキスト」と「フォームパーツ」が対になっているケースが多いことから、dl要素やtable要素でまとめる方法がよく利用される。
でも解説の通り、どれもマークアップとして間違いではないため、ターゲットユーザーの好みや対応デバイスを意識したマークアップを心がけることが大切。

フォームの内容をdl要素でマークアップした例


<form action=".../cgi-bin/qu" method="post">
   <fieldset>
      <legend>お客様の情報</legend>
      <dl id="customer">
         <dt><label for="name">お名前</label></dt>
         <dd><input type="text" id="name" value="" /></dd>
         <dt>性別</dt>
         <dd>
            <input type="radio" name="sex" id="man" /><label for="man">男性</label>
            <input type="radio" name="sex" id="woman" /><label fot="woman">女性</label>
         </dd>
      </dl>
   </fieldset>
   <fieldset>
      <legend>評価</legend>
      <dl id="rating">
         <dt>作品の良かったところをお聞かせください（複数回答可）</dt>
         <dd>
            <ul>
              <!-- 以下のリスト内のlabel要素では、暗示的なマークアップ -->
               <li><label><input type"checkbox" value="all" />全体的によかった</label></li>
   ・・・・中略・・・・
               <li><label><input type"checkbox" value="other" />その他</label></li>
            </ul>
         </dd>
         <dt><label for="freetext">ご意見などがありましたら、お願いいたします</label></dt>
         <dd><input type="text" size="50" id="freetext" /></dd>
      </dl>
   </fieldset>
   <div><input type="submit" value="入力内容を確認する" /></div>
</form>




少し短いですがきりがいいので、今日はここまで。

二十六日目！（table,col要素、colgroup要素、scope属性）

今日は台風の影響で自宅からの仕事になりました。続きすすめます。

●表の列グループと行グループの使いどころ
表（テーブル）は、全体を囲むtable要素、行を定義するtr要素、ヘッダセルのth要素とデータセルのtd要素さえあれば、XHTMLの「表」として最低限の構造を示すことができる。さらに、列グループや行グループを定義する要素があるので覚えておく。

自動販売機の月別売り上げ表を例に考える。table要素で全体を囲み、tr要素で行を、th要素で項目名を、td要素で内容をマークアップするのが基本だが、col要素やcolgroup要素を使って「列グループ」を示すことができる。
そのため、自動販売機の月別売り上げ表では、列それぞれに構造的な意味を与えるために、ひとつひとつcolgroup要素でマークアップする。colgroup要素それぞれにIDを与えておくだけで、構造を明確に示せると同時に、CSSで列ごとに色を変更することも簡単にできる。

<table summary="自動販売機の月別商品売上表">
  <caption>自動販売機の月別商品売上表</caption>
  <colgroup id="month"></colgroup>
  <colgroup id="tea"></colgroup>
  <colgroup id="cola"></colgroup>
  <colgroup id="coffee"></colgroup>
  <thead>
    <tr>
       <th scope="row"> 商品名</th>
       <th scope="col">お茶</th>
       <th scope="col">コーラ</th>
       <th scope="col">コーヒー</th>
    </tr>
  </thead>
  <tbody>
    <tr>
       <th scope="row">9月</th>
       <td>40,000円</td>
       <td>10,400円</td>
       <td>30,220円</td>
    </tr>
・・・中略・・・
  </tbody>
</table>

※col要素はスタイルを適用するためのグループ化、colgroup要素は構造的なグループか（もちろんスタイルも適用可能）という違いがある。この違いは納得できるものではなく、本来はcolgroup要素で構造的にグループ化するのが当たり前だが、表の列に対して柔軟にスタイルを適用する方法がないため、苦肉の策としてcol要素が認められていると考えるべきである。したがって「colgroup要素で列グループを示すのが原則、スタイルを適用する目的だけならcol要素を」と判断する。

※scope属性
そのth要素の見出しがどちらの方向に対する見出しなのかを明示するための属性で「scope="col"」は縦方向、「scope="row"」は横方向を意味する。この属性はサポートしている音声読み上げ対応のブラウザでは、セルと見出しの関係を読み上げるようになる。

表では列グループたけではなく「行グループ」を示すことができる。thead要素（ヘッダー行）、tbody要素（ボディ行）、tfoot要素（フッター行）の3つが指定できる。行グループを示すことで、ボディ行のみにスクロールバーを表示させたり、印刷時にページをまたぐ表であっても、改ページごとにヘッダー行とフッター行を繰り返し印刷することができる。（ただしこれらの機能はブラウザのサポート状況に依存する）

例として、かなり内容量の多い社員名簿を考えてみる。

ブラウザではヘッダー行、ボディ行、フッター行の順で表示されるが、ＸＨＴＭＬ上はthead要素、tfoot要素、tbody要素の順に記述する決まりがある。現状普及しているブラウザでは、これらの行グループ要素に対応しており、tfoot要素は表の一番最後に表示される。

<table summary="未来コーポレーション社員名簿">
   <caption>社員名簿</caption>
   <colgroup id="number"></colgroup>
   <colgroup id="position"></colgroup>
   <colgroup id="name"></colgroup>
   <colgroup id="callno"></colgroup>
   <thead>
      <tr>
         <th scope="col">社員番号</th>
         <th scope="col">役職/所属</th>
         <th scope="col">氏名</th>
         <th scope="col">内線番号</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th scope="col">社員番号</th>
         <th scope="col">役職/所属</th>
         <th scope="col">氏名</th>
         <th scope="col">内線番号</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>01</td><td>代表取締役</td><td>山田美子</td><td>1000</td>
      </tr>
・・・・中略・・・・
      <tr>
         <td>99</td><td>経理部</td><td>鈴木幸子</td><td>3340</td>
      </tr>
   </tbody>
</table>


勉強の最初の頃に少しcol要素、colgroup要素が出てきてイマイチ理解できたなかったのですが、今回のでだいたい把握できたのではないかと思います。

本日はここまで。

二十五日目！（マークアップ選び～）

マークアップ選びの工夫
●ロゴのマークアップ
サイト全体で共通して利用する「ロゴ」のマークアップは次のようにアップされることが多い。
１、サイト全体を通し、h1要素でマークアップする。
２、トップページではh1要素でマークアップし、個別ページではp要素またはdiv要素でマークアップする。

もっとも広く採用されているのは１、の方法。一方、「ページ単体で考えて、一番大きい見出し（タイトルと同等の役割）をh1要素でマークアップすべき」と考え２、の方法を採用してるサイトも少なくない。

W3CのXHTML仕様では、見出し要素の使い方について厳格な規定はないが、ISO-HTMLでは「見出しはh1要素からはじめること」「見出しレベルが飛ばさないこと」という要件がある。
ただし、CMSやDreamweaverなどでテンプレートを利用するとき、すべてのページで「h1→h2→h3→h4・・」という見出し構造を守れないか、非常に守りにくいことがある。
ページバリエーションの多いサイトで無理やり守ろうとすると、テンプレートや条件分岐をムダに増やすことになってしまい、メンテナンス制が大幅に低下する。
結論としては、見出しのマークアップ品質という観点を、実際に運用効率のバランスを考えて適切なマークアップを心がける。

●順不同リスト（ul要素）の使いどころ
ul要素は「順不同リスト」、すなわち複数の項目を列挙するためのリスト。実務的には、単純に項目の列挙だけではなく、ナビゲーションのマークアップに利用されるケースが多い。

<ul id="nav">
    <li><a id="nav-home" href="/">ホーム</a></li>
    <li><a id="nav-ideas" href="/ideas/">こだわり</a></li>
    <li><a id="nav-shops" href="/shops/">店舗情報</a></li>
    <li><a id="nav-profile" href="/profile/">会社概要</a></li>
    <li><a id="nav-contact" href="/contact/">お問合せ</a></li>
</u/>


ブログ記事の最後に参考ページへのリンクをつける際に、参考ページが１つしかない場合、複数の項目を列挙するのがリスト本来のあり方であり、項目がひとつしかない場合リストとはいえないので
p要素あたりでマークアップしたほうがよい、という厳格な考え方もある。しかし、今は項目はひとつだとしても、今後参考ページが増えることを想定すれば、リストとしてマークアップしたほうが管理しやすいといえる。

●複数のマークアップ候補のなかでどれを選ぶべきか
料理の材料と分量のテキスト

薄力粉　50グラム
ベーキングパウダー　小さじ4分の1
砂糖　30グラム
無塩バター　50グラム
卵　1個
チョコレート　10グラム
チョコチップ　30グラム

上記のテキストをどのようにマークアップしたらよいか考えてみると、ul要素、dl要素、table要素の３つが候補としてあげらる。このように「書式や本来の使い方から考えて正しいか正しくないか」という次元とは別に、製作者や運営者の好みでマークアップが選べるケースが少なくない。

複数のマークアップ候補がある場合、ユーザーの利便性の観点から考える。たとえば携帯電話でアクセスするユーザーが多いなど、CSSが全く適用されないか、一部しか適用されないような環境で閲覧される場合には、ul要素でシンプルにマークアップしたほうがよい。

順不同リストでマークアップした例
<h2>材料</h2>
<ul>
  <li>薄力粉　50グラム</li>
  <li>ベーキングパウダー　小さじ4分の1</li>
 ・・・・・中略・・・・・
  <li>チョコチップ　30グラム</li>
</ul>


定義リストでマークアップした例
<h2>材料</h2>
<dl>
  <dt>薄力粉</dt>
  <dd>50グラム</dd>
  <dt>ベーキングパウダー</dt>
  <dd>小さじ4分の1</dd>
　・・・・中略・・・・・
  <dt>チョコチップ</dt>
  <dd>30グラム</dd>
</dl>


表でマークアップした例
<h2>材料</h2>
<table summary="材料の一覧表です。">
   <tr>
     <th>材料名</th><th>分量</th>
   </tr>
   <tr>
     <td>薄力粉</td><td>50グラム</td>
   </tr>
   <tr>
     <td>ベーキングパウダー</td><td>小さじ4分の1</td>
   </tr>
・・・・中略・・・・・
   <tr>
     <td>チョコチップ</td><td>30グラム</td>
   </tr>
</table>




●a要素の使い方
a要素はいわゆる「リンク」。アクセシビリティの観点から考えても。a要素の中身を「ここ」や「こちら」といった具体性のないテキストにしてしまうのはよくない。
a要素の中身からリンク先が想定できる内容にする。検索エンジンのアルゴリズムでも、a要素の中身とリンク先（のページタイトルなど）との一致性がいっそう重視されてきている。

●a要素のtitle属性の使い方
a要素には、補足情報を示す為にtitle属性を設定することができるほとんどのブラウザでtitle属性値
がツールチップとして表示される。また、一部の音声ブラウザはtitle属性値の読み上げに対応している。

●img要素につけるalt属性の使い方
IE 6/7では属性値だけでなくalt属性値もツールチップとして表示されるため、ツールチップとして利用する前提でalt属性を使ってしまいがちだが、本来はまったく目的が異なる。
見出し画像やボタン画像は、画像に含めたテキストをそのままalt属性の値として指定する。テキストの先頭で示す小さなアイコン画像や、罫線などに使う装飾的な画像では、alt属性の値を空（alt=""）にしておく。なぜなら画像ひとつひとつに「アイコン」や「罫線」と指定しまうと、音声ブラウザで「アイコン、アイコン・・・」「罫線、罫線・・・」といちいち読み上げられてしまい、適切な情報伝達の妨げになる。また、alt属性自体を指定しないとファイル名を読み上げてしまう場合があるので注意。

そもそも、このようにalt属性値を空にする画像は、構造的に不可欠な存在ではないので、できるだけCSSのbackgroundプロパティで埋め込むのがよい。むしろimg要素で埋め込むと、画像を変更する際にXHTMLをひとつひとつ修正する手間が生じるが、backgroundプロパティであればCSSのソースコードを変えるだけで変更できる。特にWebサイト内で同じ画像を複数利用するような場合にメンテナンス性が向上する。

このように、「alt属性をつけるならimg要素で、つけないならCSSのbackgroundプロパティで」と区別するのが原則。

今日はここまで。

二十四日目！（ID・クラス使い分け、名前）

つづき進めます。

IDとクラスの使い方・使い分け
XHTMLに用意されている要素だけでは示しきれない構造を補ったり、スタイルの適用対象を示すのに利用。
IDはXHTML内で1回しか利用できないのに対し、クラスは複数回利用できるが、出現回数を理由にIDにするかクラスにするかを決めるわけではない。あくまで名前をつけたい要素の役割にあわせて、こゆうの役割ならIDを、グループならクラスを、というように使う。

●見出しと本文のまとまりを構造化
例）
<h2>チョコチップクッキーの作り方</h2>
<p>チョコチップクッキーを簡単に作る方法を解説します</p>
<h3>材料を用意する</h3>
<p>チョコチップクッキーの材料は以下のとおりです。</p>
<ul>
  <li>小麦粉　200g</li>
  ・・・（中略）・・・
</ul>


h2要素の下にp要素（段落）、次の小見出しにはh3要素、その下にp要素、ul要素とつづく構成。マークアップとして何ら問題はないが、見出しと本文のまとまりをdiv要素でブロック化してIDやクラスを与えておくと、何に関するブロックなのかがひと目でわかるだけでなく、IDやクラスを手がかりに合理的にスタイリングできる。

<div id="how-to-making" class="section-lv2">
  <h2>チョコチップクッキーの作り方</h2>
  <p>チョコチップクッキーを簡単に作る方法を解説します。</p>
 <div id="materials" class="section-lv3">
    <h3>材料を用意する</h3>
    <p>チョコチップクッキーの材料は以下のとおりです。</p>
    <ul>
      <li>小麦粉　200g</li>
      ・・・・（中略）・・・・
　　</ul>
 </div><!--  /#materials  .section-lv3   -->
</div><!--  /#how-to-making   .section-lv2   -->


●一般的なID名・クラス名から命名ルールを学ぶ
広く使われているID名・クラスを知った上で、製作サイトに応じた命名方法を考える。

機能・エリア	命名例
本文全体を囲むボックス（コンテナ）	container、wrapper、page、pagebody、all
ヘッダー	header、header-area
ナビゲーション	nav、navi、navigation
グローバルナビゲーション	global-nav、gnav
ローカルナビゲーション	local-nav、lnav
補足ナビゲーション	assist-nav、utility、utility-nav
パンくずナビゲーション	topicpath、breadcrumbs
コンテンツ全体	content(s)、container、wrapper
メインコンテンツ	main、maincontent(s)、content(s)、alpha、primary
サブコンテツやサイドバー	sub、subcontent(s)、sidebar、beta、secondary、
見出しと本文のまとまり	section、entrybody、article(s)
記事全体	article(s)、entry(-ies)
フッター	footer、footer-area、copyright、publication
ロゴ	logo
キービジュアルやメインビジュアル	keyvidual、mainvisual
画像や写真、グラフなど	image、photo、fig、fugure
検索	search、search-area、search-box
注釈、ヒント、本題から外れた補足や囲み記事	aside、hint、note
商品一覧	products、item-list、shopitems

複数の単語で構成するID名・クラス名は、キャメルケース（globalNav)、ハイフン区切り（global-nav）、アンダースコア区切り（global_nav）の３つのパターンのいずれかを利用するのが一般的。

ID名・クラス名はアルファベットで開始する名称をつけるが、日本語のローマ字表記で「okaimono」とつけるのではなく、英単語で「shopping」とつけるのが一般的。あくまで慣習のようなものであって、ローマ字表記でも問題ないが、頭の中で一度音読して漢字やかなに変換する必要があるため、パッと理解できないことがある。

●XHTMLやmicroformatsで提唱されている名称を参考にする
よく使われるID名・クラス名のなかにHTML.5で追加予定の新しい要素名と同じものや似たようなものがある。HTML.5は、現在求められるWeb制作のニーズを満たすために提案されている新たなHTML仕様であり、HTML4.01やHTML1.0で足りなかった要素が追加されているため、ID名・クラス名を考えるときも参考になる。

microformats(http;//microformats.org/)は、Web全体で共通のクラス名を使うことで、情報の汎用性を高めるためのプロジェクトで、たとえば連絡先やプロフィールについて、microformatsの「hCard」にもとづいたマークアップをしていると読み込みに対応したロボットがvCard形式に自動変換し、アドレス帳などのアプリケーションで利用できるようになる。また、テクノラティなどの検索サービスがmicroformatsに対応しており、マークアップをきちんと理解してくれる。Webサイトでmicroformatsを正式に利用するかどうかは別途考えておきたいポイントですが、簡潔でわかりやすいクラス名が採用されているため、命名の参考に。

●クラスの便利な使い方
コンテンツがXHTMLで利用できる要素の種類にあてはまらない場合、div要素（汎用ブロックレベル要素）やspan要素（汎用インライン要素）を使って「それがどのようなコンテンツなのか」を示す。それぞれを「<div class="section">.....</div>で囲んでおくとCSSで簡単にスタイリングできます。あわせて、見出しレベルに応じて「section-lv2」「section-lv3」といったクラスをつけておくと、見出しの階層構造ごとに異なるスタイルが指定できる。

<div class="section section-lv2">
  <h2>役立つ趣味を身につけませんか？</h2>
  <p>趣味で。。。。。豊かにしましょう</p>
 <div class="section section-lv3">
  <h3>お料理を趣味に</h3>
  <p>食事は日々の生活にかかせないものです。。。。楽しみましょう！</p>
 </div>
 <div class="section section-lv3">
  <h3>おもてなしを趣味に</h3>
  <p>喜んでもらえたときの顔がみたい。。。。。だから私はおもてなしを趣味にします。</p>
 </div>
</div>


●複数のクラス指定
クラスは半角スペース区切りで複数適用させることができる。たとえば注釈文のような段落で、さらに注意を喚起する役割をもっているときは「<p class="note attention">....</p>」というようにふたつ以上のクラス名をつけ、スタイルを適用することが出来る。

.note {
  padding-left: 1.6em;
  font-size: 85%;
  background: url(note.png) no-repeat;
}


.attention {
  color: red;
}


今日はここまで。

二十三日目！（div要素でコンテンツブロック化 ボックス角丸に）

2日間、実際に作成したHPから勉強をしまたしたが今日からまた教材を参考に進めていきます。

教材通りに進めると今日は「デザインカンプからの画像書き出し」という勉強なんですが、まだあまり画像編集ソフトなどを詳しく勉強していないため、読み進めてみたもののピンと来ない点が多く、またWEB製作で有効なソフトとして「PHOTO SHOP」「Dreamweaver」を挙げていて説明しているのですが、今使っているPCにそれらのソフトも無いのでこの部分は飛ばして次の項の勉強を先に進めようと思います。画像加工ソフトに関しては、「GINP」というフリーソフトが高性能で使えるようなので、とりあえずはそれを勉強しておきたいと思います。

div要素によるコンテンツのブロック化
●さまざまなレイアウトパターンに対応する為のブロック化
XHTMLで定義されている要素で指定しきれないまとまりをグループ化することは、Webページの構造をよりわかりやすく伝える手助けになる。

汎用的な（いわばなんにでも使える）div要素にIDやクラスを与えておくことで、その範囲を手がかりに特定の場所だけスタイルを適用できるようになる。

たとえば上から下に積み上げるようにコンテンツが並ぶシンプルなデザインだったとして、そういう場合でも構造をグループかしておくことによって、あらゆるレイアウトに対応（ひとつのXHTMLを簡単に3カラムや2カラム、１カラムレイアウトへ切替えることも）できるようになる。

特にブログでは、トップページで「2カラムで、サイドバーには最新記事一覧を置くレイアウト」を、個別記事ページでは「記事本文に集中できるよう段組みなしで1カラムのレイアウトを」というように、ひとつのサイトのなかで柔軟なレイアウト変更が求められることがある。どのようなサイトでも設計の際には常に構造のグループ化を意識しておく。

●複数の背景画像を組み合わせて表示させる場合
CSS2.1においては、ひとつの要素に対して複数の背景画像を指定することができない。ボックスを角丸にしたい場合、ひとつの背景画像では内容量やフォントサイズの変更による高さの拡張に対応できない。複数の背景画像を組み合わせることになり、新たな要素が必要になる。



幅固定の角丸デザインを実現する場合、見出しとコンテンツのまとまりをdiv要素でまとめて背景を水色で塗りつぶし、h2要素の角丸上端を含む見出し画像を含め、ul要素に角丸下端用の背景画像を設置することで角丸ボックスを実現。

XHTML

<html>
  <head>
    <title>角丸例</title>
      <link rel="stylesheet" type="text/css" href="kadomaru.css" />
  </head>
  <body>
    <div class="section">
      <h2><p>Contents</p></h2>
      <ul>
        <li><a href="">会社概要</a></li>
        <li><a href="">ブログ</a></li>
        <li><a href="">ラボ</a></li>
        <li><a href="">お問い合わせ</a></li>
      </ul>
    </div>
  </body>
</html>


CSS

div.section {
  color:#4682B4;
  background-color:#c0d5df;
  width: 200px;
}


div.section li{
  list-styｌe: none;
  list-style-image: url(mark.png);
}


div.section li a {
  font-weight: bold;
  color: #4682B4;
}


div.section ul {
  background: url(list.png) no-repeat left bottom;
  padding: 0 0 1em 2em;
}


div.section h2 {
  font-size: large;
  background: url(list1.png) no-repeat left top;
}


div.section h2 p {
  padding: 8px 0 8px 55px;
  border-bottom:dotted 2px white;
}

幅を可変にするには、左上、右上、左下、右下の四隅の丸角画像が必要になるため、div要素を追加する必要がでてくる（あるいは、角丸用javascriptライブラリを利用して実現することも可能）。

なお、Safari 3やGoogle Chrome、Firefox 3では、CSS3で追加予定の border-radiusプロパティ（角丸）を先行実装している。
Safari 3とGoogle Chromeでは「-webkit-border-radius:8px;」、Firefox 3では「-moz-border-radius:8px;」と指定することで、ボックスの四隅が半径8pxの丸角になる。

Firefoxのデベロッパーツールで「-moz-border-radius: 8px;」を入力して角丸確認

他のブラウザでは丸角にならないのと、このようなCSS3追加予定のプロパティを利用すると、CSSのバリデーションを行ったときエラーになるため、気をつける。

今日はここまで。

二十二日目！（前回作成したHP復習）

今日も昨日と同じで、先月作成したＨＰの中で出来なかったところを復習し、できるように勉強していこうと思います。

今日やるのはこちら。

住所などは見えないように修正してありますが、現在ＵＰされているＨＰをキャプチャーしたものです。作成していたとき、アドバイス、指摘をしてくれていたＹさんが「担当：、ＴＥＬ：、Email：などが揃っていないので、できれば揃えたほうがいい」とおっしゃっていたんですが、時間が無かったため、上の画像の様にバラけたままＵＰしています。

今日はそのバラけている部分をきれいに揃えようと思います。
ＵＰしてるＨＴＭＬでは単にテキストを並べてるだけですが、table要素をつかって作ろうと思います。

ソースはこちら。
<html>
  <head>
    <title>お問合せ</title>
      <link rel="stylesheet" href="otoiawase.css" type="text/css" />
  </head>
  <body>
    <div id="otoiawase">
    <h5>お問合せ</h5>
    <table>
      <tr>
        <th>担当：</th>
          <td>株式会社○○○○○　　本社○○○○係</td>
      </tr>
      <tr>
        <th>TEL：</th>
          <td>123-456-7890　　　FAX： 987-654-3210</td>
      </tr>
      <tr>
        <th>E-mail：</th>
          <td>abcd@efgh.ne.jp</td>
      </tr>
      <tr>
        <th>所在地：</th>
          <td>〒123-4567<br>東京都大阪市京都町　名古屋ビル10F</td>
      </tr>
    </table>
    </div>
  </body>

これをCSS適用前にブラウザで表示するとこうなります。

●CSSでコーディングしていく所
文字サイズ、thの太字をノーマルに、thを揃える。お問い合わせの下のアンダバー。バックグラウンドカラー、全体のサイズや位置調整という感じでしょうか。

「担当：、TEL：」などのth要素のテキストがテーブル枠内の中央で揃えてあるので、右で揃えるため、text-align:rightを指定。
「所在地：」の部分は隣のセルのテキストが２行に渡っているからか、その２行の中央くらいの位置で固定されていたので、上（右上）に来て欲しいので、vertical-align:topと指定。
CSSソースはこんな感じで書きました。

table {
  font-size: small;
}


table th{
  font-weight: normal;
  vertical-align: top;
  text-align: right;
}


h5 {
  font-size: large;
  border-bottom:dotted 1px #666;
  padding: 0 0 5px 0;
  margin: 10px 20px 6px  0;
}


#otoiawase {
  width: 32.1em;
  background-color: #ffe9a9;
  margin: 0 0 0 0;
  padding: 2px 0px 2px 20px;
  height: 8.5em;
}

そして、CSSを適用させてブラウザで表示させたのがこちら。

担当：、TEL：、E-mail：、所在地：　がきれいに揃いました。FAX：も左に寄せてもよかったんですが、わざとtｄ内に書いてあります。
他の場所はUPしているもの（最初に載せた画像）とほぼ同じ表現になってるんではないかと思います。

今日はここまで。

二十一日目！（dl dt dd 定義リスト横並べ）

今日は先日作成したＨＰでうまくできなかった所をやってみようと思います。実際にＵＰしなおす訳ではないのですが、やろうと思ったことができず妥協する形になったので、勉強してみます。

これが今回勉強して作り直したい部分の画像。テキスト部分は書き換えてありますが、文字数やＣＳＳのデザインなどは全く同じです。

これのＨＴＭＬソースが
<table>
  <tbody>
    <tr>
      <td><p></p><h3>STEP－1<br>前回できなかったところ</h3><p></p></td>
      <td>前回のＨＰ作成時ではうまくできず、妥協するかたちになってしまったので色々調べ　　　　　　　　　　ながら再チャレンジしようと思います。</td>


    </tr>
    <tr>
      <td><p></p><h3>STEP－2<br>dlリストで作成</h3><p></p></td>
      <td>この表は、tableで作成しているのですが、本当は最初dlリストで作成し、floatを使っ　　　　　　　　　　　　てテキスト部分を右上に移動して、並べたかったんですが、うまくいかず妥協しまし
た。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－3<br>とりあえずは<br>勉強・挑戦</h3><p></p></td>
       <td>前回妥協して、tableで作ったのですが、今回はネットなどで調べながら、できなかった所を                    　　　　　　勉強して、dlリストを使い、これと同じようなものを作成しようと思います。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－4<br>ネットで検索</h3><p></p></td>
       <td>ＨＴＭＬやＣＳＳの勉強をはじめてから、色々な要素、属性など調べるようになったのです　 　　　　　　が、いろいろなブログ等で詳しく載っています。</td>
    </tr>
    <tr>
       <td><p></p><h3>STEP－5<br>実際に作成</h3><p></p></td>
       <td>ネットで今回の勉強の参考になりそうなブログや記事をみつけてきて、自分の作りたいも　　　　　　　のに応用させ、前回できなかったものを作ります。</td>
    </tr>
  </tbody>
</table>

かなり突っ込みどころ満載です。今table要素で作成していますが、これをdl要素（定義リスト）で作りたいと思います。

まずはＨＴＭＬから

<dl>
  <dt>STEP-1<br>前回できなかったところ</dt>
    <dd>前回のＨＰ作成ではうまくいかず、妥協するかたちになってしまったので色々調べ
　　　　ながら再チャレンジしようと思います。</dd>
  </dt>
  <dt>STEP-2<br>dlリストで作成</dt>
    <dd>この表は、tableリストで作成しているのですが、本当は最初dlリストで作成し、floatを使っ
　　　　　てテキスト部分を右上に移動して、並べたかったんですが、うまくいかず妥協しました。
    </dd>
  <dt>STEP-3<br>とりあえずは<br>勉強・挑戦</dt>
    <dd>前回妥協して、tableで作ったのですが、今回はネットなどで調べながら、できなかった所を
勉強して、dlリストを使い、これと同じようなものを作成しようと思います。</dd>
  <dt>STEP-4<br>ネットで検索</dt>
    <dd>HTMLやCSSの勉強をはじめてから、色々な要素、属性などを調べるようになったのです
が、いろいろなブログ等で詳しく載っています。</dd>
  <dt>STEP-5<br>実際に作成</dt>
    <dd>ネットで今回の勉強の参考になりそうなブログや記事をみつけてきて、自分のつくりたい
ものに応用させ、前回できなかったものを作ります。</dd>
</dl>

こんな感じです。ネットで「dｌを横並び」と検索するとたくさんヒットします。その中で見つけてきたやり方のＣＳＳソースがこちら。

dt {


  float: left;
  width: 10em;
}


dd {


  margin-left: 10em;
}



なのでさっき書き込んだdlリストのＨＴＭＬにこのＣＳＳを適用させると

こんな具合になぜか斜めにずれていきます。dl自体のwidthを指定していないからというのもあるのですが、ブラウザのサイズを変えると、その大きさに合わせて色んなズレかたをしてました。

色々調べた結果、dtのテキスト数が多い場合、floatを使って横並びにするとあまりうまくいかないらしい事が書いてありました。なので、floatは使わずにやってみます。
ＣＳＳソースはこちら。



 dl {
font-size: small;
margin: 0 0 0 0;
padding: 0 0 10px 0;
width: 550px;
}


 dl dt {
text-align: center;
margin-top: 20px;
padding: 5px 0 5px 5px;
width: 12.5em;
font-weight: bold;
border: 1px solid #000080;
padding: 5px 5px 5px 5px;
}


 dl dd {
padding: 5px 5px 5px 10px;
margin-left: 14em;
margin-top: -3.3em;
line-height: 1.2em;

}

ポイントは「margin-top: -3.3em;」この部分のようです。

これを適用させてブラウザで表示させるとこうなりました。

今日最初に載せた画像とほぼ同じに表現できたのではないかと思います。
今日はここまで。

二十日目！（CSSシグネチャ）

●body要素にID・クラスを指定し、それらを手がかりにスタイルを適用する
カテゴリーごとやページごとで異なるスタイルを適用したいことがよくあるため、どのカテゴリーに含まれるどのページなのかをbody要素のidやclass属性として示しておくと便利。このテクニックを「CSSシグネチャ」といい、body要素のIDやクラスを手がかりに、カテゴリーごとに異なるスタイルを適用する方法です。
個別の要素にIDやクラスを追加したり、専用のCSSファイルをつくってlink要素で読み込む方法は効率的でなく、一定規模以上のサイトでは管理や対応がきわめて困難。CSSシグネチャを利用することで、多様で柔軟なデザインを少ないソースコードで実現できる。

CSSシグネチャを使った効率的なスタイルングの代表例は、「ナビゲーションで現在のカテゴリーやページを示すハイライト表示」とカテゴリーごとのキーカラーやキービジュアルの変更」のふたつがあげられます。body要素に対するIDとクラスの使い分けについては、クラスでカテゴリーを、IDでページを示すことが多い。

CSSシグネチャを利用する際は、きちんとしたルールのもとでIDとクラスを割り振ることが大切。たとえば、カテゴリーファイルを保存しているフォルダ名とbody要素のクラス名を一致させておいたり、ページのファイル名とID名を一致させておいたりなど。


●ナビゲーションで現在のカテゴリーやページを示すハイライト表示
グローバルナビゲーション（カテゴリーを移動するためのリンクリスト）やローカルナビゲーション（カテゴリーのなかでページを移動するためのリンクリスト）では、現在見ているカテゴリーやページを示すために、背景などを変えてハイライト表示にすることがある。


対応するリンクそのものに「id="hare"」や「class="now"」と指定し、スタイルを適用してもいいが、ページひとつひとつにこのような指定を加えるのではなく、すべてのページで同一のソースコードを利用したほうが効率的。

そこで、ナビゲーションに含まれるリンクそれぞれにあらかじめIDを振っておき、body要素のクラスを手がかりにスタイルの適用対象を変えることで、自動的にカテゴリーやページに対応するリンクがハイライト表示される、という方法を利用する。

<body class="ideas">
.....
<div id="global-nav">
  <h2>主なカテゴリー</h2>
  <ul>
    <li><a id="nav-home" href="/">ホーム</a></li>
    <li><a id="nav-ideas" href="/ideas"/>こだわり</a></li>
    <li><a id="nav-shops" href="/shops/">店舗情報</a></li>
    <li><a id="nav-profile" href="/profile">会社概要</a></li>
    <li><a id="nav-contact" href="/contact/">お問い合わせ</a></li>
  </ul>
</div>


子孫セレクタでbosy要素のクラスとリンクのIDを対応させておけば、カテゴリーごにと異なる部分のハイライト表示が実現できる。

/* ナビゲーション　ハイライト表示 */
body.home #global-nav ul li a#nav-home,
body.ideas #global-nav ul li a#nav-ideas,
body.shops #global-nav ul li a#nav-shops,
body.profile #global-nav ul li a#nav-profile,
body.contact #global-nav ul li a#nav-contact {
  background: url(../img/bcg_global-nav_hare.jpg) repeat-x left center;
}


●カテゴリーごとのキーカラーやキービジュアルの変更
カテゴリーごとで雰囲気を変えたい場合、背景や見出しに異なるカラーを指定したり、異なるキービジュアルを指定する方法がある。この場合もCSSシグネチャを活用できる。


カテゴリーごとに異なるクラスを割り振ったbody要素を手がかりに、変えたい部分を子孫セレクタで指定すれば、スタイルを変更することができる。
たとえば「body.ideas #main」とセレクタを指定し、異なるスタイルを適用すればいい。

カテゴリー「こだわり」に含まれるページでの指定
<body class="ideas">
.....
<div id="main">
  <h1>こだわり</h1>
  <p>Choco mint が大切にしていることは、納得できる素材のみで安心して食べられるスイーツを作ること。</p>
</div>


カテゴリー「店舗情報」に含まれるページでの指定
<body class="shops">
.....
<div id="main">
  <h1>店舗情報</h1>
  <p>本店の青山をはじめとした、表参道、六本木、広尾、渋谷の各店舗のご紹介です。</p>
</div>


※カテゴリーごとにbody要素のクラス名は変えていても、内容のマークアップは全く同じ


/* サイト全体の基本スタイル */
#main {
  height: 100px;
}
#main h1 {
  padding: 10px 0 5px 110px;
  color: #600;
}
#main p {
  padding: 0 0 0 110px;
}
/* カテゴリー「こだわり」用スタイル */
body.ideas #main {
  background: url(../img/img_ideas.jpg) no-repeat left top;
}
/* カテゴリー「店舗情報」用スタイル */
body.shops #main {
  background: url(../img/img_shops.jpg) no-repeat left top;
}


●XHTML+CSSのチェックに便利なツール
W3C Markup Validation Service http://validator.w3.org/
W3C CSS Validation Service    http://jigsaw.w3.org/css-validator/
FireFoxアドオン「Html Validator」https://addons.mozilla.jp/firefox/details/249

個人的にはFireFoxアドオンの「Web Developer」を教えてもらい使ってます。

テキストに載っている画像はさすがに使えないため、ソースを書き込んだ部分の具体的な絵がないので少しわかりにくいかもしれない。。。
今日はここまで。