Web designカテゴリーの前回分
『[CSS]立体的な横並びメニューボタンの作り方』
における「CSSの記述」を修正しました。
ページへのコード表示上、一部スペースを入れていましたが、
コピーペーストするとFirefoxではCSSが効かなくなるためスペースを抜きました。
（IEでは通りますがFirefoxでは効きませんでした。タブキーで空けるならOK。）

お問い合わせくださったjoさんありがとうございます。
試行錯誤させてしまった方、申し訳ありません！

関連ページ ≫ [CSS]立体的な横並びメニューボタンの作り方

このサイトで制作した、ページ上部の
CSSを使った立体的な横並びのメニューボタンの作り方を書いておきます。

リアルなボタンのように、カーソルを乗せるとボタンを押したように見せることができます。

CSSの記述

#Menu {
height: 18px;/*メニューの高さ*/
}

#Menu ul {
margin: 0;
padding :0;
list-style-type : none;/*リストスタイルはなしにする*/
}

#Menu li {
display : inline;
margin:0;
float:left;/*フロートを左に指定してボタンを横並びにする*/
}

#Menu a {
display: block;/*ブロックにして各ボタン全体をリンクエリアにする*/
text-decoration:none;
border-top:1px solid #69c;/*上線の幅（細）とカラー（薄）*/
border-right:2px solid #369;/*右線の幅（太）とカラー（濃）*/
border-bottom:2px solid #369;/*下線の幅（太）とカラー（濃）*/
border-left:1px solid #69c;/*左線の幅（細）とカラー（薄）*/
text-align:center;/*文字をボタンの中央にする*/
width: 75px;/*各ボタンの幅*/
padding-top: 4px;/*文字上部余白*/
padding-bottom: 2px;/*文字下部余白*/
font-size: 0.85em;/*文字サイズ*/
font-weight: normal;
background: #9ff;/*ボタン背景色*/
color: #369;/*文字色*/
}

#Menu a:hover {/*ここからマウスオーバー時の設定*/
display:block;
text-decoration:none;
border-top:2px solid #369;/*上線の幅（太）とカラー（濃）*/
border-right:1px solid #69c;/*右線の幅（細）とカラー（薄）*/
border-bottom:1px solid #69c;/*下線の幅（細）とカラー（薄）*/
border-left:2px solid #369;/*左線の幅（太）とカラー（濃）*/
text-align:center;
font-weight: normal;
background: #fff;/*マウスオーバー時の背景色*/
color: #369;
}

※各カラー、各サイズは変更してください。

HTMLの記述

メニューボタンを入れたい箇所に以下を記述します。
※リンク先とボタン内のテキストはご自分のコンテンツに合わせて変更してください。

<div id="Menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">photopop</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">links</a></li>
</ul>
</div>

HTMLは非常にシンプルですね。
HTML側に余計なレイアウトのタグが含まれないため読み込みが早く、検索にもスムーズになります。
また、CSSの指定で作られているので、ボタン画像を2枚使用してJavaScriptでマウスオーバーの設定をするよりも重くなくユーザーの負担になりません。

メニューは正しいマークアップという面でも通常リストタグで作られることが多く、
リストタグで作られたメニューは携帯で閲覧した場合、2ページ目以降折りたたむことができたりします。
これからはPCもモバイルもボーダレスになっていきますので、
よりいっそうCSSでのレイアウトが必要な時代になってきますね。

追記　2007.02.26

「CSSの記述」を修正しました。
ページへの表示上スペースを入れていましたが、
コピーペーストするとFirefoxでCSSが効かなくなるため不要なスペースを抜きました。

CSSで画像に本物の写真のように枠とドロップシャドウを付ける

CSSで画像に本物の写真のように枠をつけてドロップシャドウ（影）を付ける方法は、最近普及してきています。
下の画像も、CSSで枠（白太枠+その外側のグレー細枠）とドロップシャドウを表示させています。

枠とドロップシャドウを含めて1つの画像ではなく、
写真部分だけがimgで置いてあり、枠とドロップシャドウはCSSで表示させています。

CSSで表示させるメリット

「Photoshopで画像を加工したほうが簡単でしょ。」
そう最初は私も思っていました。
Web用に画像をサイズ変更や色調補正するからそのついでに。
でも毎回Photoshopでドロップシャドウをつける作業がないのは楽です。
そして、例えばすでにサイズもそのままで良くて色調も良い場合や、Flickrの画像を載せるとかPhotoshopを使わないときにはこの上なく便利。
CSSでこの写真枠とドロップシャドウを指定した画像に対して統一して表示をさせられるのもメリット。

Windows IE6（and lower）の後方互換モードへの対策

Windows IE6では、XHTMLでXML宣言をしていると後方互換モードになってしまうというバグがあります。（他のブラウザでは標準モードです。）
後方互換モードでは、指定したCSSが効かない場合があります。
"写真枠とドロップシャドウをつけるCSS"の一般的なCSS記述方法の場合、
XHTMLでXML宣言をしているとWindows IE6（and lower）でのみ写真枠の表示ができません。（ドロップシャドウは表示されます。）
これをWindows IEでも写真枠の表示をさせるには、私が解る限りでは以下の3つの方法があります。

1. XML宣言を削除してしまう
2. PHPでXML宣言をWindows IE6の時にだけ消す
3. CSSハックを使用してなんとか表示させる

1のXML宣言を削除する方法は、Web標準から外れるので避けたい。
2のPHPの方法はページに記述するだけなのでスマートですが、もう少し広く使用できるものにしたい。
そこで、私が選んだ道は、3です。

（※XHTMLではなくHTMLで記述している方や、XML宣言を削除しても良い又は元々XML宣言していないという方は、一般的な方法が小粋空間さんの「CSSで画像に影をつける」に詳しく書かれていますので参考になると思います。）

CSSハックを使ってWindows IE6（and lower）含めて写真枠とドロップシャドウを表示させる

Windows IE6（and lower）に他のブラウザと同じ表示をさせるために色々試しましたが、
私がたどり着いた結果はCSSハックを3種類使用してCSSを記述する方法。
使用するCSSハックは以下です。

• Star Hack
• Holly Hack
• The Owen Hack

HTML記述方法

Windows IE対策として、imgをspan要素で2重に括ります。
外側のspan要素は、class属性"photo"として、
内側のspan要素は、class属性"photo_ie"とします。

<span class="photo">
<span class="photo_ie">
<img alt="sky" src="0828.1.jpg" width="262" height="120" />
</span>
</span>

CSSの追加

少し長いですが、下記を追加します。

/* Hides CSS from MacIE \*/
* html .photo {
background: url(ドロップシャドウ画像のパス) right bottom;
margin-top: 8px;
float: left;
}
/* */

.photo {
background: url(ドロップシャドウ画像のパス) right bottom;
float: left;
}

/* Hides CSS from MacIE \*/
* html .photo_ie {
position: relative;
left: -4px;
top: -4px;
padding: 4px;
background-color: #fefefe;
border: 1px solid #98a5b9;
display: block;
}
/* */

head:first-child+body .photo img {
position: relative;
left: -4px;
top: -4px;
padding: 4px;
background-color: #fefefe;
border: 1px solid #98a5b9;
}

1番上の.photoと3番目の.photo_ieは、
Star HackとHolly Hackを組み合わせています。
Windows IE4～6とMac IE4～5のみにスタイルを適応するStar Hack（* html）を指定しておいて、
Mac IEにスタイルを適応させないHolly Hackをかぶせて指定してWindows IE 4～6のみにスタイルを適応させています。
4番目の.photo imgにはThe Owen Hack（head:first-child+body）を指定して、Windows IE4～6にスタイルを適応させないようにしています。

backgroundにある"ドロップシャドウ画像へのパス"は、背景画像として使用するアップロードしたドロップシャドウ画像へのパスを指定してください。
私が作ったのはこちらのドロップシャドウ画像です。
上記CSSは.photoで「float: left」を指定して右にテキストが回り込むようにしているので、
途中で回り込みをやめたい場合はbrなどにclass属性を与えて「clear: both」で解除していただければ良いかと思います。

もっとスマートな方法があるかもしれませんが、現時点ではこんな感じの結果になりました。

Special Thanks!

mikiちゃん、05さん、ちにゃと先生、
Macを含む各ブラウザでの確認のご協力いただきどうもありがとう！
こだわりだしたら止まらない、みんなを巻き込む迷惑な女pasに付き合ってくれて本当に感謝です。