CSSコード

table td {
   position:relative;
}

のように、borderが表示されない要素に｢position:relative;｣を指定すると、表示されることがあります。

これは、ブラウザが改行を空白類文字をして認識してしまうからです。つまり、改行を半角スペースが空いているとみなしてしまいます。

とすると、この余白を消すには、半角スペース分をCSSでネガティブマージンを使用して相殺してしまえばよさそうです。

例えば、以下のようなリストを横並びにします。

(X)HTMLコード

<ul class="menu">
<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>

CSSでは、半角スペース分をletter-spacingで制御します。ulのletter-spacingを0.40em分小さくしておいて、liのletter-spacingは元に戻しておきます。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
}

ただし、この方法ではOperaには効きません。

そこでさらに、ulのfont-sizeを0にして、liのfont-sizeを任意の値を指定します。ただしpx表記以外はブラウザ間で差異が出てしまうので注意です。Operaだけに有効なhackがあれば相対表示もできるのですが、無いようなので・・・。

CSSコード

ul.menu {
   letter-spacing:-0.40em;
   font-size:0;
}

ul.menu li {
   display:inline;
   letter-spacing:normal;
   font-size:16px;
}

ちなみに、font-sizeでの指定はSafariやChromeといったWebkit系ブラウザでは有効ではないようです。このCSSはWindowsXP上のFarefox3.6.13、Opera11.00、Safari5.0.2、Chrome8.0、IE6で確認済みです。

単純に、borderを使って、上線だけ1pxの線を表示すればよいのですが、IE6ではうまくいかないので、「height:1px」と「clear:both」を追加します。

CSSコード

hr {
   border:solid #000;
   border-width:1px 0 0 0;
   height:1px;/* for IE6 */
   clear:both;/* for IE6 */
} 

Firefoxで常にスクロールバーを出す - CSSデザインノート

FirefoxでもOperaでもスクロールバーを出す - CSSデザインノート

これらの記事を書いてから約2年が経ち、ブラウザの実装状況も変わってきました。

2010年5月現在は、主要の最新ブラウザで、以下の記述で、コンテンツ量が少なくても常に縦スクロールバーを出すことができます。

CSSコード

html {
   overflow-y:scroll;
}

最新のブラウザならCSS3の草案を取り入れているようですね。

また、以前は有効であったhtmlの高さを100%にし、マージンを1px空けて、縦スクロールバーを出す方法はFirefox3.6.3では効かなくなっていたので注意です。今のところ他のブラウザ（safari、Opera、Chome）には有効のようです。

CSSコード

html {
   height:100%;
   margin-bottom:1px;
}

という記事を見て、おお！全てのブラウザでword-wrap:break-word;が有効なのか！と嬉々としました。特に、お問い合わせフォームなどで、英数字が強制改行されないとレイアウトが崩れる原因になって、よくプログラム側で制御していたので、これは嬉しい。

word-wrapプロパティとは？

まず、word-wrapプロパティとは何かと申しますと、簡単に言えば、文章の改行方法を指定するものです。単語の途中で改行するかどうかを指定します。

word-wrapプロパティは確かIEが独自先行で実装してたと思ったのですが、CSS3で草案されていて、主要の最新のブラウザで実装されているようですね。

値には、narmal、break-allの２種類があり、意味は以下のとおりです。

normal

英単語の途中で改行しない。表示範囲をはみ出す場合は表示範囲を拡張する。日本語は表示範囲に合わせて強制的に単語の途中でも改行する。

break-all

日本語も英語も表示範囲からはみ出す場合は強制的に単語の途中でも改行する。

サンプル

ハイフンとかスラッシュがある場合は、場所によってはそこで強制的に改行するみたいです。

禁則処理

文字のレイアウトで重要なのは、禁則処理です。禁則処理とは、例えば日本語で言えば、句読点が行頭にこないなど、作文を書くときによく注意された、文章を書く上での決まりごとですね。

ブラウザによってもこの禁則処理に若干の違いがあります。Safari、Chome、Operaでは、一般的な禁則処理は行われます。

しかし、firefoxでは、｢段々｣などの｢々｣が行頭にきてしまうことがあります。また、IEでは小さい｢っ｣が行頭にきてしまうことがあります。

あと、似たようなのに、word-breakプロパティというのもあります。これも同様に改行方法を指定するものなのですが、ブラウザで実装状況が異なるようです。詳しくは別の機会に。

(X)HTMLコード

<ul>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSSコード

li {
   display:inline;
   float:left;
}

display:inline;にすると、他のブラウザで不都合は起こらないのか？という疑問が起こるわけですが、仕様どおりの動作をするブラウザでは起こりません。

というのも、｢floatを指定した要素にdisplayプロパティは無視される｣と仕様書に書いてあります。

float:left・・・左に浮動するブロックボックスを生成する。 続く内容は、（'clear'プロパティの指定に従いつつ）そのボックスの右側に上から流し込まれる。 このプロパティが'none'以外の値を取る場合、その要素の'display'プロパティは無視される。

視覚整形モデルより引用

また、リストを横並びにして、余白をマージンで空ける場合があります。その際、最後の余白は不必要な場合、親要素にマイナスのマージン（ネガティブマージン）を指定することで、各要素の間だけに余白を空けることが出来ます。しかし、IE6ではネガティブマージンが効かない場合があります。

余白のあるメニューの特定の余白を消す方法 - CSSデザインノート

IE6でネガティブマージンを有効にするために「zoom:1;」を指定します。

CSSコード

ul {
   zoom:1;
}

ウノウラボ Unoh Labs: hasLayoutとは何か

CSSコード

element{
   ⁄zoom:1;
}

element:after {
   content:'';
   display:block;
   clear:both;
}

これはNetScapeとMacのIEを考慮していないソースコードになります。｢/zoom:1;｣のようにプロパティの前にスラッシュをつけるとIE6と7だけに適用されるようです。今まで知りませんでした。

このclearfixを使う他に、単純に回り込みを解除させたい要素に｢overflow:hidden｣を適用すればよいというのもあります。印刷時に問題があるらしいのですが、印刷用のCSSを用意する場合は｢overflow:auto;｣などとしておけばよいので、結構使える技ではあります。

参考

いまどき ? いまさら ? clear fix のコード | ヨモツネット

せせらぎダイニング

このサイトで、左のメニューにカーソルを合わせると英語表記のところがゆっくりと色が変化していくのがわかると思います。トランジション効果と言えばよいのでしょうか、アニメーション処理がしてあります。

このサイトの場合は、画像のロールオーバー時に、JavaScriptでアニメーション処理をしていると思うのですが、今回画像なしで似たような動作をやってみます。CSS3とそれに対応しているブラウザを使用します。残念ながら現在はSafari4.0とGoogle Chomeしか動作しないようです。

サンプル

サンプルはこちらから

動作確認

Google Chrome 4.0、Safari 4.0.4 for Windows XPです。

CSS3はまだ正式勧告されていないので、使用する場合にはプロパティの前にベンダープリフィックスと呼ばれる接頭辞をつける必要があります。SafariおよびChomeは｢-webkit-｣です。

(X)HTMLコード

<ul>
<li><a href="concept.html">コンセプト<span><br />CONCEPT</span></a></li>
<li><a href="menu1.html">メニュー<span><br />MENU</span></a></li>
<li><a href="">新着・お得情報<br /><span>NEW&EVENTS</span></a></li>
<li><a href="">お問合せ・ご予約<br /><span>CONTACT</span></a></li>
<li><a href="info.html">店舗情報・地図<br /><span>INFORMATION</span></a></li>
</ul>

CSSコード

ul {
   width:200px;
   background:#735D4A;
   margin:0;
   padding:0 10px;
}

li {
   list-style:none;
   border-bottom:#524139 1px solid;
}

li:last-child {
   border-bottom:none;
}

li a {
   display:block;
   padding:15px 0 15px 30px;
   font-family:"ＭＳ 明朝",serif;
   color:#F7F3EF;
   font-size:14px;
   text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -moz-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   -webkit-text-shadow:2px 2px 2px rgba(0,0,0,0.6);
   line-height:1.4;
   letter-spacing:1px;
   background:url("bg_list.gif") 10px 50% no-repeat;
   text-decoration:none;
   outline: none;
}

li a span {
   color:#080808;
   font-family: "arial",sans-serif;
   font-size:10px;
   text-shadow:none;
   -moz-text-shadow:none;
   -webkit-text-shadow:none;
   -webkit-transition-duration:0.4s;
}

li a:hover span {
   color:#F79239;
}

｢-webkit-transition-duration:0.4s｣というのがアニメーション部分の指定になります。メニューをマウスオーバーしたときに、英語表記の部分だけが0.4秒かけて色がゆっくりと変わります。

また、CSS3のテキストにシャドーをつけれる｢text-shadow｣、親子関係の最後の子要素だけに適用する｢:last-child｣も併せて使用しています。

ちなみに全くソースコードは拝見していませんので、同じようには作られてはいないと思います。

前回の記事「アクセシビリティの高いCSSロールオーバーメニュー」を参考にすれば、比較的簡単に作れそうです。

サンプル

サンプルはこちらから

動作確認

Firefox3.5.7、Google Chrome 3.0、Safari 4.0.4 for Windows XPです。IE6はhoverに対応していませんので、強調する効果は得られませんが、不具合なく表示する事はできます。Opera 10.10は正常に動作しません。なぜでしょう。「ul#menu li a」に「display:inline-block;」を追加するとちゃんと動作しました。

(X)HTMLコード

<ul id="menu">
   <li class="menu1"><a href="#" class="current"><img src="images/menu1.gif" alt="menu1" /></a></li>
   <li class="menu2"><a href="#"><img src="images/menu2.gif" alt="menu2" /></a></li>
   <li class="menu3"><a href="#"><img src="images/menu3.gif" alt="menu3" /></a></li>
   <li class="menu4"><a href="#"><img src="images/menu4.gif" alt="menu4" /></a></li>
   <li class="menu5"><a href="#"><img src="images/menu5.gif" alt="menu5" /></a></li>
</ul>

CSSコード

img {
   border:0;
}

ul#menu {
   float:left;
   margin:0;
   padding:0;
}

ul#menu:hover {
   background: url(images/bg_menu_hover.gif) no-repeat;
}

ul#menu li {
   float:left;
   margin:0;
   padding:0;
   list-style:none;
}

ul#menu li a {
   display:block;
   display:inline-block;
   width:100px;
   height:30px;
}

ul#menu li a:hover,
ul#menu li a.current {
   background-image:url(images/bg_menu_on.gif);
}

ul#menu li.menu1 a:hover,
ul#menu li.menu1 a.current {
   background-position:0 0;
}

ul#menu li.menu2 a:hover,
ul#menu li.menu2 a.current {
   background-position:-100px 0;
}

ul#menu li.menu3 a:hover,
ul#menu li.menu3 a.current {
   background-position:-200px 0;
}

ul#menu li.menu4 a:hover,
ul#menu li.menu4 a.current {
   background-position:-300px 0;
}

ul#menu li.menu5 a:hover,
ul#menu li.menu5 a.current {
   background-position:-400px 0;
}

ul#menu li img {
   position:relative;
   z-index:-1;
}

考え方としては、リスト（ul）の背景に目立たない用のリスト画像を指定し、特定のメニューにカーソルがあったときはそのメニューだけオンマウス用の画像に切り替え、他のメニューはリストの一番下に回りこませてることにより目立たない用のリスト画像が表示されるというわけです。

また、現在表示しているページのメニューも目立たせたい場合は、a要素にcurrentというクラス名をつけて、CSSのほうで個別にスタイルを指定するとよいと思います。