メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

(1)

1253-1 メニューのトランジション１ (text-overflow)

トランジションを利用して、面白い個性的なメニューを作ってみましょう。web ページもぐ

っと引き立つでしょう。ここで紹介するメニューも Illustrator や Photoshop でメニュー

の画像を作る必要はありません。JavaScript でスクリプトを書く必要もありません。すべ

て CSS3 の機能だけで作成されています。

■

text-overflow

テキストが要素に納まり切れない時の処理方法を指定します。

値

説　　　　　明

clip

ellipsis

文字列

テキストを切り取って要素に収める。（初期値）

テキストを切り取り、後ろに「・・・」を付加して、切り取ったことを表現する。

テキストを切り取ったことを示すために、指定された文字列を表示する。

（2013年6月現在では未対応。）

overflow: hidden;とセットで使用します。overflow: visible;または overflow の指定

がない場合は、text-overflow プロパティは適用されません。

(2)

〔使用例〕（サンプルソース：TextOverflow.html／TextOverflow.css）

次の４つの場合を示しています。

・overflow: hidden; text-overflow: clip;

・overflow: hidden; text-overflow: ellipsis;

・overflow の指定なし text-overflow: clip;

・overflow の指定なし text-overflow: ellipsis;

（注意）text-overflow: ellipsis; をメニューの表示で指定した場合、メニュー項目の

テキストがオーバーフローすると、テキストが切り取られて後ろに「・・・」が付加さ

れるので、このメニュー項目を選択するとさらにメニューがあるように誤解される恐れ

があります。メニューの場合には text-overflow: clip; で指定するようにしましょう。

もっともメニュー項目の場合は、テキストがオーバーフローしないようにすることが大

事です。

〔伸びてくるプルダウンメニュー１〕

大メニューをマウスカーソルで hover すると、小メニューが上から伸びてきます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenu01 の説明】

〔HTML の記述（NaviMenu01.html）

〕

id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。<a

href="#">MENU1</a>の href="#"は、a 要素には必ず href 属性を指定しなければならないの

で、大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように"#"と指

(3)

定しています。もちろんここへ#ではなく URL を記述すれば、その URL へジャンプすること

ができます。

<!DOCTYPE html> <html> <head> <title>NaviMenu01</title> <meta charset="UTF-8">

(4)

〔CSS の記述（NaviMenu01.css）

〕

先ず、id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほか

のトランジションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメ

ニューで使用していることを分かり易くするために#menu-box という id 名を付けています。

なお、右側にコメントが付いているところがありますが、実際にスタイルシートにコード

を記述する際には、コメントは記述しなくてもかまいません。

次に大メニューの ul 要素のスタイルを指定します。大メニュー項目３つを入れる枠になり

ます。#menu-box>ul としているのは、ul 要素は HTML 文書の中ではほかの場所でも記述さ

れるので、#menu-box の中の ul 要素に限定し、しかも、

「>」を付けることにより、#menu-box

の子供の ul 要素（大メニューの ul 要素）に限定してスタイルを指定するためです。

#menu-box の孫の ul 要素（小メニューの ul 要素）には影響しません。ul 要素は li 要素を

入れる領域として使用するので、次の指定をします。

① margin: 0px; padding: 0px; → ul 要素はこの指定をしないと margin と padding

の余白が自動的にとられてしまいます。

② list-style-type: none; → ul 要素の下に配置される各 li 要素のテキストの先頭

に“・”などのマークが付くのを防ぐために指定します。

③border-right: 1px solid #999999;と指定しているのは、li 要素（大メニュー項目）

同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none; の指定

をしているので、バーのいちばん右側のボーダー幅が 0px にならないように、ul 要

素の右側のボーダー幅を 1px で指定しています。

④小メニューが伸びた時に、#menu-box の div 要素以降に記述されている HTML のコンテ

ンツ（テキストや画像等）が動くのを防ぐために、#menu-box>ul（大メニューの ul）

を position: absolute; と指定し、#menu-box に対する絶対位置としてあります。

#menu-box { margin: 10px 0px 10px 15px; width: 765px; height: 52px; position: relative; } /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 764px; height: 52px; border-right: solid 1px #999999; list-style-type: none; position: absolute; /* 小メニューが伸びたときに、以降の HTML のコンテンツが動くのを防止するために必要 */ }

(5)

大メニューの li 要素のスタイルを指定します。#menu-box>ul>li としているのは、#menu-box

の子供の ul 要素（大メニューの ul 要素）の子供の li 要素（大メニュー項目）に限定して

スタイルを指定するためです。#menu-box の孫の ul 要素（小メニューの ul 要素）の子供

の li 要素（小メニュー項目）には影響しません。大メニュー項目を横に並べたいので float:

left;の指定をしています。

li 要素に表示する a 要素のテキストのスタイルを指定します。テキストにデコレーション

（飾り）が付かないように text-decoration: none;の指定をします。text-decoration:

none;がないと、テキストにアンダーラインが付いたり、リンク済みのテキストカラーに変

わったりします。大メニューの背景色を background-color: #99CCFF;で指定しています。

ボーダーを border: 1px solid #999999;で指定していますが、li 要素（大メニュー項目）

同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none; の指定をして

います。

次に小メニューの ul 要素のスタイルを指定します。大メニュー項目を hover した時に下に

伸びる小メニュー項目の３つの枠になります。margin-top: -52px;と指定しているのは、

小メニューの枠を大メニュー項目に重ねておくためです。重ねておかないと大メニューの

下側のはずれた部分を hover しても小メニューが伸びてしまいます。opacity: 0.0;と指定

して見えないようにしておきます。

#menu-box>ul>li { width: 191px; /* 大メニューの幅 */ float: left; /* 大メニューを横に並べる。 */ } #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; border: 1px solid #999999; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF;

text-shadow: 2px 2px 2px #666666; line-height: 50px;

display: block; }

(6)

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。margin-top: 0px;と指定して大メニュー項目に重ねていた小メニューの枠

を大メニュー項目の下に移動し、opacity: 0.8;と指定して、見えるようにします。

小メニュー項目の li 要素の指定をします。height: 0px;と opacity: 0.0; を指定して見え

ないようにしておきます。li 要素を徐々に高さが増して目に見えるように変化させるため、

transition の指定をします。0.5 秒、ease-in-out で変化するようにしています。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。height: 51px;と opacity: 0.8; を指定して、li 要素を徐々に高さが増して目に見え

るように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。width: 100%; height: 100%;

と指定することにより、li の幅と高さと同じになります。しかも height: 100%;の指定に

より、li の高さが徐々に高くなるのに合わせて a 要素の高さも変化します。ボーダーを

#menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの高を変え、可視にする */ height: 51px; opacity: 0.8; } /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる。 */ height: 52px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする。 */ } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する。 */ opacity: 0.8; /* 小メニューを可視にする。 */ } #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 190px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; }

(7)

border: 1px solid #999999;で指定していますが、li 要素（小メニュー項目）同士の間の

上下のボーダー幅を 1px にしたいため、

li 要素に border-top: none; の指定をしています。

overflow: hidden;と outline: none;を指定しているのは、Firefox ブラウザの場合にリン

ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです。

li 要素が hover された時の a 要素の変化を指定します。背景色を赤灰色 #FF9999 に、テキ

ストの色を白 #FFFFFF に変化させます。

〔伸びてくるプルダウンメニュー２〕

サンプルＣＳＳ１の NaviMenu01 の大メニューをグラデーションにしてみました。大メニュ

#menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; border-top: none; /* 小メニューの上下のボーダーを重ねる。 */ text-align: center;

text-overflow: clip; /* テキストの overflow 時は、カットする */ font-size: 26px;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

#menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色とテキストの色を変える */

background-color: #FF9999; color: #FFFFFF;

}

(8)

ーをマウスカーソルで hover すると、小メニューが上から伸びてきます。

小メニューを hover

すると、メニューの背景色とテキストの色が変わります。

【NaviMenu01B の説明】

〔HTML の記述（NaviMenu01B.html）

〕

NaviMenu01.html の<title>のテキストが「NaviMenu01B」に、<link>の href の css ファイ

ル名が「NaviMenu01B.css」に変更された内容です。

〔CSS の記述（NaviMenu01B.css）〕

サンプルＣＳＳ１の NaviMenu01 の大メニューをグラデーションにしただけなので、

NaviMenu01.css と違う部分だけ説明します。

大メニューの ul 要素のスタイルで、border-right: 1px solid #333333;と指定して、少し

黒くしています。

li 要素に表示する a 要素のテキストのスタイルで次の部分が違います。背景色を

background-color: #228B22;（forestgreen）で指定し、その上に background-image を利

用して白色のグラデーション（linear-gradient）をかけて、メニューバーの輝きを表現し

ています。テキストの色を color: #000000;に、テキストの影を text-shadow: 2px 2px 2px

#CCCCCC;で指定しています。

ボーダーを border: 1px solid #333333;で指定し、li 要素に border-right: none; の指定

をしています。

/* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに、以降の HTML のコンテンツが動くのを防止するために必要 */ } #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #228B22;

background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% );

(9)

以降の指定は、NaviMenu01.css と同じです。

〔伸びてくるプルダウンメニュー３〕

サンプルＣＳＳ２の NaviMenu01 の小メニューの高さを大メニューより低くして、小メニュ

ー間のボーダーをなくしました。

【NaviMenu01C の説明】

〔HTML の記述（NaviMenu01C.html）

〕

NaviMenu01.html の<title>のテキストが「NaviMenu01C」に、<link>の href の css ファイ

ル名が「NaviMenu01C.css」に変更された内容です。

〔CSS の記述（NaviMenu01C.css）

〕

サンプルＣＳＳ１の NaviMenu01 と違う部分だけ説明します。

大メニューをグラデーションにしています。NaviMenu01.css 大メニューの ul 要素のスタイ

ルで、border-right: 1px solid #333333;と指定して、少し黒くしています。

サンプルＣＳＳ３

background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000;

text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px;

display: block; }

(10)

li 要素に表示する a 要素のテキストのスタイルで次の部分が違います。背景色を

background-color: # FF6633;（オレンジ色）で指定し、その上に background-image を利

用して白色のグラデーション（linear-gradient）をかけて、メニューバーの輝きを表現し

ています。テキストの色を color: #000000;に、テキストの影を text-shadow: 2px 2px 2px

#CCCCCC;で指定しています。ボーダーを border: 1px solid #333333;で指定し、li 要素に

border-right: none; の指定をしています。

小メニューの ul 要素のスタイルを指定します。このサンプルでは小メニュー項目の li 要

素間のボーダーを表示しないので、小メニュー全体の枠取りが必要になります。width:

200px;と border: 1px solid #333333;を指定し height を指定しないことにより、小メニュ

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに、以降の HTML のコンテンツが動くのを防止するために必要 */ } #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #FF6633;

background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.0 ) 100% ); background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.0 ) 0%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000;

text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px;

display: block; }

(11)

ー項目の li の数により height が自動計算され、小メニュー全体の枠取りが描かれます。

border-top: none;は、大メニューと小メニュー間のボーダーを太くしないためです。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。高さは height: 32px;で指定し、opacity: 0.8; を指定して、li 要素を徐々に高さが

増して目に見えるように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーは指定しません。

テキストの先頭に空白を入れるために padding: 0px 0px 0px 10px;の指定をします。この

場合、width: 100%;を指定すると、padding 分だけ右へずれるので、height: 100%;の指定

だけにします。text-align: left;で、テキストを左寄せにしてあります。overflow: hidden;

と outline: none;を指定しているのは、Firefox ブラウザの場合にリンク済みのデコレー

ションとして点線の枠取りが表示されるのを防ぐためです。

#menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFCC; text-align: left;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; #menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの高を変え、可視にする */ height: 32px; opacity: 0.8; } /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる。 */ list-style-type: none; width: 190px; /* height を指定しないことにより、小メニューの li の数で height が自動計算される */ border: 1px solid #333333; border-top: none; opacity: 0.0; /* 小メニューを不可視にする。 */ }

(12)

以降の指定は、NaviMenu01.css と同じです。

〔伸びてくるプルダウンメニュー４〕

サンプルＣＳＳ２の NaviMenu01 の小メニューの高さを大メニューより低くして、小メニュ

ー間のボーダーをなくし、小メニューのテキストを普通のテキスト文字にしました。

【NaviMenu01D の説明】

〔HTML の記述（NaviMenu01D.html）

〕

NaviMenu01.html の<title>のテキストが「NaviMenu01C」に、<link>の href の css ファイ

ル名が「NaviMenu01D.css」に変更された内容です。

〔CSS の記述（NaviMenu01D.css）

〕

サンプルＣＳＳ１の NaviMenu01 と違う部分だけ説明します。

大メニューをグラデーションにしています。NaviMenu01.css 大メニューの ul 要素のスタイ

ルで、border-right: 1px solid #333333;と指定して、少し黒くしています。

/* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

サンプルＣＳＳ４

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 764px; height: 52px; border-right: solid 1px #333333; list-style-type: none; position: absolute; /* 小メニューが伸びたときに、以降の HTML のコンテンツが動くのを防止するために必要 */ }

(13)

li 要素に表示する a 要素のテキストのスタイルで次の部分が違います。背景色を

background-color: # 999999;（グレー）で指定し、その上に background-image を利用し

て白色のグラデーション（linear-gradient）をかけて、メニューバーの輝きを表現してい

ます。テキストの色を color: #000000;に、テキストの影を text-shadow: 2px 2px 2px

#CCCCCC;で指定しています。

ボーダーを border: 1px solid #333333;で指定し、li 要素に border-right: none; の指定

をしています。

小メニューの ul 要素のスタイルを指定します。このサンプルでは小メニュー項目の li 要

素間のボーダーを表示しないので、小メニュー全体の枠取りが必要になります。width:

200px;と border: 1px solid #333333;を指定し height を指定しないことにより、小メニュ

ー項目の li の数により height が自動計算され、小メニュー全体の枠取りが描かれます。

border-top: none;は、大メニューと小メニュー間のボーダーを太くしないためです。

#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none;

background-color: #999999;

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #CCCCCC; line-height: 50px; display: block; } /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる。 */ list-style-type: none; width: 190px; /* height を指定しないことにより、小メニューの li の数で height が自動計算される */

(14)

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。margin-top: 0px;と指定して大メニュー項目に重ねていた小メニューの枠

を大メニュー項目の下に移動し、opacity: 1.0;と指定して、見えるようにします。小メニ

ューのテキストを普通の文字にしているので、透過度を加えるとメニューの下にある文字

（ページの内容）に重なってメニューのテキストが読めなくなるので、opacity: 1.0;で透

過度をなくします。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。高さは height: 20px;で指定し、opacity: 1.0; を指定して、li 要素を徐々に高さが

増して目に見えるように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーは指定しません。

テキストの先頭に空白を入れるために padding: 0px 0px 0px 10px;の指定をします。この

場合、width: 100%;を指定すると、padding 分だけ右へずれるので、height: 100%;の指定

だけにします。text-align: left;で、テキストを左寄せにしてあります。overflow: hidden;

と outline: none;を指定しているのは、Firefox ブラウザの場合にリンク済みのデコレー

ションとして点線の枠取りが表示されるのを防ぐためです。

#menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFFF; #menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの高を変え、可視にする */ height: 20px; opacity: 1.0; } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する。 */ opacity: 1.0; /* 小メニューを可視にする。 */ } border: 1px solid #333333; border-top: none; opacity: 0.0; /* 小メニューを不可視にする。 */ }

(15)

li 要素が hover された時の a 要素の変化を指定します。背景色を赤灰色 #FF9999 に変化さ

せます。テキストの色は変えません。

〔伸びてくるプルダウンメニュー５〕

サンプルＣＳＳ３の NaviMenu01C の大メニュー背景色を、斜めに色が変化する虹色のグラ

デーションにしました。

【NaviMenu01G の説明】

〔HTML の記述（NaviMenu01G.html）

〕

NaviMenu01.html の<title>のテキストが「NaviMenu01C」に、<link>の href の css ファイ

ル名が「NaviMenu01G.css」に変更された内容です。

〔CSS の記述（NaviMenu01G.css）

〕

サンプルＣＳＳ３の NaviMenu01C と違う部分だけ説明します。

li 要素に表示する a 要素のテキストのスタイルで次の部分が違います。大メニューの背景

#menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色を変える */

background-color: #FF9999; }

サンプルＣＳＳ５

text-align: left;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; line-height: 20px;

display: block;

/* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

(16)

色を background-color: #FF6633;で指定しています。グラゲーション用に background-clip

プロパティ、background-repeat プロパティでグラデーションのみ指定をしています。

background-image プロパティについては、奇数番目の li 要素と偶数番目の li 要素のグラ

デーションの色の変化の方向を交互に反対方向にしたいので、ここでは指定せずに別

nth-child セレクタを使用して指定します。テキストの色を color: #FFFFFF;に、テキスト

の影を text-shadow: 2px 2px 2px #000000;で指定しています。

ボーダーを border: 1px solid #333333;で指定し、li 要素に border-right: none; の指定

をしています。

background-image プロパティについて、nth-child( )セレクタを使用して、奇数番目の li

要素と偶数番目の li 要素のグラデーションの色の変化の方向を交互に反対方向に指定しま

す。

小メニューの li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーは指

定しません。テキストの先頭に空白を入れるために padding: 0px 0px 0px 10px;の指定を

します。この場合、width: 100%;を指定すると、padding 分だけ右へずれるので、height:

100%;の指定だけにします。text-align: left;で、テキストを左寄せにしてあります。

overflow: hidden;と outline: none;を指定しているのは、Firefox ブラウザの場合にリン

#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #FF6633; background-clip: border-box; background-repeat: no-repeat; border: 1px solid #333333; border-right: none; /* 大メニューの左右のボーダーを重ねる。 */ text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #FFFFFF; text-shadow: 2px 2px 2px #000000; line-height: 50px; display: block; } #menu-box>ul>li:nth-child(2n+1)>a { /* 大メニューの奇数番目のグラデーション */ background-image: linear-gradient( 25deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); background-image: -webkit-linear-gradient( 65deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); }

#menu-box>ul>li:nth-child(2n+0)>a { /* 大メニューの偶数番目のグラデーション */ background-image: linear-gradient( -25deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); background-image: -webkit-linear-gradient( 115deg, #F00, #FF0, #0F0, #0FF, #00F, #F0F ); }

(17)

ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです。

以降の指定は、NaviMenu01.css と同じです。

〔大メニューの横から伸びてくるプルダウンメニュー１〕

大メニューをマウスカーソルで hover すると、小メニューが横から伸びてきます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenu02 の説明】

サンプルＣＳＳ６

#menu-box ul ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; background-color: #FFFFCC; text-align: left;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

(18)

〔HTML の記述（NaviMenu02.html）

〕

NaviMenu01.html の<title>のテキストが「NaviMenu02」に、<link>の href の css ファイル

名が「NaviMenu02.css」に変更された内容です。

〔CSS の記述（NaviMenu02.css）

〕

先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー

トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。

次に大メニューの ul 要素のスタイルを指定します。margin: 0px; padding: 0px; 、width、

list-style-type: none; を指定します。

大メニューの li 要素のスタイルを指定します。

li 要素に表示する a 要素のテキストのスタイルを指定します。NaviMenu01.css とほぼ同じ

ですが、 border-bottom: none; の指定はしません。背景色を background-color: #99CCFF;

（淡いブルー）で指定し、その上に background-image を利用して白色のグラデーション

（linear-gradient）をかけて、メニューバーの輝きを表現しています。テキストの色を

color: #3333FF;（ブルー）に、テキストの影を text-shadow: 2px 2px 2px #CCCCCC;で指

定しています。ボーダーを border: 1px solid #999999;で指定しています。

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 200px; /* 大メニューの幅 */ list-style-type: none; } #menu-box>ul>li { width: 200px; height: 50px; /* 大メニューの幅・高さ */ } #menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */

(19)

次に小メニューの ul 要素のスタイルを指定します。大メニュー項目を hover した時に横か

ら下に伸びる小メニュー項目の３つの枠になります。margin: -52px 0px 0px 200px;と指

定しているのは、小メニューの枠を大メニュー項目の右横に並べておくためです。opacity:

0.0;と指定して見えないようにしておきます。

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。opacity: 0.8;と指定して、見えるようにします。

/* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する。 */ width: 200px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする。（小メニューの戻りを見せたい場合にはここを殺す。 */ } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ opacity: 0.8; /* 小メニューの ul を可視にする。（小メニューの戻りを見せたい場合にはここを殺す。 */ }

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #999999; text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF;

text-shadow: 2px 2px 2px #666666; line-height: 50px;

display: block; }

(20)

小メニュー項目の li 要素の指定をします。width: 0px;、height: 0px; と opacity: 0.0; を

指定して見えないようにしておきます。width: 0px;、height: 0px; と指定しておかない

と大メニューの右側のはずれた部分を hover しても小メニューが伸びてしまいます。li 要

素を徐々に高さが増して目に見えるように変化させるため、transition の指定をします。

0.5 秒で ease-in-out で変化するようにしています。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。width: 200px;、height: 50px;と opacity: 0.8; を指定して、li 要素を徐々に高さが

増して目に見えるように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーを border: 1px

solid #999999;で指定していますが、border-top: none; の指定はしません。

#menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; text-align: center;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; } #menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの幅と高を変え、可視にする */ width: 200px; height: 50px; opacity: 0.8; } #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 0px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; }

(21)

li 要素が hover された時の a 要素の変化を指定します。背景色を赤灰色 #FF9999 に、テキ

ストの色を白 #FFFFFF に変化させます。

〔大メニューの横から伸びてくるプルダウンメニュー２〕

大メニューをマウスカーソルで hover すると、小メニューが横から伸びてきます。大メニ

ューごとに背景色を緑色、黄色、水色に変えてあります。小メニューを hover すると、メ

ニューの背景色とテキストの色が変わります。

【NaviMenu02B の説明】

〔HTML の記述（NaviMenu02B.html）

〕

NaviMenu02.html の<title>のテキストが「NaviMenu02B」に、<link>の href の css ファイ

ル名が「NaviMenu02B.css」に変更された内容ですが、大メニューの li 要素に id 属性で<li

id="menu1">、<li id="menu2">、<li id="menu3">と id 名をつけてあります。

#menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色とテキストの色を変える */ background-color: #FF9999; color: #FFFFFF; }

サンプルＣＳＳ７

<!DOCTYPE html> <html> <head> <title>NaviMenu02B</title> <meta charset="UTF-8">

(22)

〔CSS の記述（NaviMenu02B.css）

〕

NaviMenu02.css と違う部分だけ説明します。

大メニューの li 要素に表示する a 要素のテキストのスタイルで、background-color を id

名ごとに違う色で指定します。その上に background-image を利用して白色のグラデーショ

ン（linear-gradient）をかけて、メニューバーの輝きを表現しています。

#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; border: 1px solid #999999; text-align: center;

<body>

<h1>■メニューバーを作る。（hover で小メニューを開く。）</h1> <div id="menu-box">

<ul>

(23)

小メニューの li 要素に表示する a 要素のテキストのスタイルで、background-color を指定

しません。それにより、大メニューと同じ背景色で小メニューが表示されます。

#menu-box ul li ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; border: 1px solid #999999; text-align: center;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; #menu-box>ul>li#menu1>a { /* 大メニュー１の背景色 */ background-color: #33FF33; } #menu-box>ul>li#menu2>a { /* 大メニュー２の背景色 */ background-color: #FFFF33; } #menu-box>ul>li#menu3>a { /* 大メニュー３の背景色 */ background-color: #33FFFF; } font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; }

(24)

小メニューの li 要素が hover された時の a 要素の変化を大メニューの li 要素の id 名ごと

に指定します。背景色を赤灰色 #FF9999 に、テキストの色を白 #FFFFFF に変化させます。

〔大メニューの横から伸びてくるプルダウンメニュー３〕

大メニューをマウスカーソルで hover すると、大メニューが横に伸びて、その下に小メニ

#menu-box ul li#menu1 ul li a:hover { /* 大メニュー１の小メニューの hover 時に

背景色とテキストの色を変える */ background-color: #FF9999;

color: #FFFFFF; }

#menu-box ul li#menu2 ul li a:hover { /* 大メニュー２の小メニューの hover 時に背景色とテキストの色を変える */ background-color: #FF9999;

color: #FFFFFF; }

#menu-box ul li#menu3 ul li a:hover { /* 大メニュー３の小メニューの hover 時に背景色とテキストの色を変える */ background-color: #FF9999; color: #FFFFFF; }

サンプルＣＳＳ８

display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

(25)

ューが伸びてきます。右方向を向いていた楔「>」が小メニューの方向を向きます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenu02C の説明】

〔HTML の記述（NaviMenu02C.html）

〕

NaviMenu02.html の<title>のテキストが「NaviMenu02B」に、<link>の href の css ファイ

ル名が「NaviMenu02B.css」に変更された内容ですが、大メニューの li 要素の a 要素のテ

キストを<li><a href="#"> MENU1   </a><span>></span>として

いて、

「MENU1」と「>」

（ > が「>」を表します）を分けてあります。「>」は回転させた

いので、<span>タグで囲んであります。

<!DOCTYPE html> <html> <head> <title>NaviMenu02C</title> <meta charset="UTF-8">

<body>

<h1>■メニューバーを作る。（hover で小メニューを開く。）</h1> <div id="menu-box">

<ul>

(26)

〔CSS の記述（NaviMenu02C.css）〕

先ず、id 名が#menu-box の div 要素のスタイルを指定します。NaviMenu02.css と同じです。

次に大メニューの ul 要素のスタイルを指定します。NaviMenu02.css と同じです。

大メニューの li 要素のスタイルを指定します。hover した時にメニューの四角形が徐々に

横長に伸びるように変化させるため、transition の指定をします。0.5 秒で ease-in-out

で変化するようにしています。float: left;を指定しておくと、伸びたメニューが元へ戻

る動きがスムーズになります。

大メニューの li 要素が hover された時の li 要素の変化を指定します。幅を 402px に変化

させます。

margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が自動的に採られてしまう。 */ width: 200px; /* 大メニューの幅 */ list-style-type: none; } #menu-box>ul>li { width: 200px; height: 50px; /* 大メニューの幅・高さ */ float: left; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; } </ul> </div> </body> </html>

(27)

li 要素に表示する a 要素のテキストのスタイルを指定します。NaviMenu02.css と同じです。

li 要素に表示する span 要素とテキストのスタイルを指定します。li 要素の四角形の中に

納まるように、margin: -50px 0px 0px 0px;、width: 50px; height: 50px;、float: right;

の指定をしています。大メニューの li 要素を hover した時に「>」が時計回りに 90 度回転

するように変化させるため、transition の指定をします。0.5 秒で ease-in-out で変化す

るようにしています。

#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; background-color: #99CCFF; /* background-color に background-image で白のグラデーションをかぶせる */ background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.0 ) 0%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%,

rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.6 ) 50%, rgba( 255, 255, 255, 0.0 ) 100% ); background-clip: border-box; background-repeat: no-repeat; border: 1px solid #999999; text-align: center; font-size: 36px; font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; } #menu-box>ul>li:hover { /* 大メニューの hover 時に幅を変える */ width: 402px; } #menu-box>ul>li span { /* 大メニューのテキスト（クサビ文字） */ margin: -50px 0px 0px 0px; padding: 0px; width: 50px; height: 50px; text-decoration: none; text-align: center; font-size: 36px; font-weight: bold;

(28)

大メニューの li 要素が hover された時の span 要素の変化を指定します。margin-right:

75px;で右に移動させ、transform: rotateZ(90deg);で時計回りに 90 度回転させます。

次に小メニューの ul 要素のスタイルを指定します。NaviMenu02.css と違って width: 0px;

で指定します。

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。横長に伸びた大メニューの li 要素の下から小メニューが表示されるように

margin-top: 0px;、width: 200px;、opacity: 0.8;と指定して、見えるようにします。

/* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する。 */ width: 0px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする。 */ } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ margin-top: 0px; width: 200px; opacity: 0.8; /* 小メニューの ul を可視にする。 */ }

#menu-box>ul>li:hover span { /* 大メニューの hover 時にテキスト（クサビ文字）の向きを変える */

margin-right: 75px; transform: rotateZ(90deg);

-webkit-transform: rotateZ(90deg); }

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; float: right; display: block; cursor: pointer; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; }

(29)

小メニュー項目の li 要素の指定をします。NaviMenu02.css と同じです。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま

す。NaviMenu02.css と同じです。

li 要素に表示する a 要素のテキストのスタイルを指定します。NaviMenu02.css と同じです。

li 要素が hover された時の a 要素の変化を指定します。NaviMenu02.css と同じです。

#menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの幅と高を変え、可視にする */ width: 200px; height: 50px; opacity: 0.8; } #menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 0px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; } #menu-box ul li ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: #99FF99; border: 1px solid #999999; border-top: none; text-align: center;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

(30)

〔大メニューの横から伸びてくるプルダウンメニュー４〕

大メニューをマウスカーソルで hover すると、小メニューが横から伸びてきます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。サンプルＣＳＳ６

の NaviMenu02 の小メニューの高さを大メニューより低くして、小メニュー間のボーダーを

なくしました。

【NaviMenu02D の説明】

〔HTML の記述（NaviMenu02D.html）

〕

NaviMenu02.html の<title>のテキストが「NaviMenu02D」に、<link>の href の css ファイ

ル名が「NaviMenu02D.css」に変更された内容です。

〔CSS の記述（NaviMenu02D.css）

〕

サンプルＣＳＳ６の NaviMenu02 と違う部分だけ説明します。

小メニューの ul 要素のスタイルは次のように指定します。大メニュー項目を hover した時

に横方向と下方向に伸びる小メニューの枠になります。margin: -52px 0px 0px 200px;と

指定しているのは、小メニューの枠を大メニュー項目の右横に並べておくためです。width

と height は指定せず自動計算させます。ここがこのメニューの仕組みのミソです。border:

1px solid #999999;、 background-color: #FFFFCC;で指定します。 opacity: 0.0;と指定

して見えないようにしておきます。サンプルＣＳＳ６の NaviMenu02 と違って、各小メニュ

#menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色とテキストの色を変える */

background-color: #FF9999; color: #FFFFFF;

}

(31)

ー項目の border を表示しないで、小メニューの大枠となる ul 要素の border を徐々に伸び

るように変化させるため、transition の指定をします。0.5 秒で ease-in-out で変化する

ようにしています。

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。width: 200px;と指定し、height は指定しないで自動計算させます。opacity:

0.8;と指定して、見えるようにします。

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化は次のよう

に指定します。width: 200px;、height: 32px;と opacity: 0.8; を指定して、li 要素を徐々

に高さが増して目に見えるように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーは指定しません。

テキストの先頭に空白を入れるために padding: 0px 0px 0px 10px;の指定をします。この

場合、width: 100%;を指定すると、padding 分だけ右へずれるので、height: 100%;の指定

だけにします。 text-align: left; で、テキストを左寄せにしてあります。背景色

#menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの幅と高を変え、可視にする */ width: 200px; height: 32px; opacity: 0.8; } #menu-box>ul>li:hover ul { width: 200px; opacity: 0.8; /* 小メニューの ul を可視にする。（小メニューの戻りを見せたい場合にはここを殺す。 */ } /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する。 */ list-style-type: none;

/* width: 0px; height: 0px; */ /* width と height は指定せず自動計算させる（ココがミソ）。 */ border: 1px solid #999999; background-color: #FFFFCC; opacity: 0.0; /* 小メニューを不可視にする。（小メニューの戻りを見せたい場合にはここを殺す。 */ transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; }

(32)

（background-color）の指定はしません。

以降の指定は、NaviMenu02.css と同じです。

〔大メニューの横から伸びてくるプルダウンメニュー５〕

大メニューをマウスカーソルで hover すると、大メニューが横に伸びて、その下に小メニ

ューが伸びてきます。右方向を向いていた楔「>」が小メニューの方向を向きます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。サンプルＣＳＳ８

の NaviMenu02C の小メニューの高さを大メニューより低くして、小メニュー間のボーダー

をなくしました。

【NaviMenu02E の説明】

〔HTML の記述（NaviMenu02E.html）

〕

#menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; text-align: left;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }

(33)

NaviMenu02C.html の<title>のテキストが「NaviMenu02E」に、<link>の href の css ファイ

ル名が「NaviMenu02E.css」に変更された内容です。

〔CSS の記述（NaviMenu02E.css）〕

サンプルＣＳＳ８の NaviMenu02C と違う部分だけ説明します。

小メニューの ul 要素のスタイルは次のように指定します。大メニュー項目を hover した時

に横方向と下方向に伸びる小メニューの枠になります。margin: -52px 0px 0px 200px;と

指定しているのは、小メニューの枠を大メニュー項目の右横に並べておくためです。width

と height は指定せず自動計算させます。ここがこのメニューの仕組みのミソです。ボーダ

ーは border: 1px solid #999999; で指定し、大メニューと小メニューの接線となる

border-top は border-top: none;で指定します。 background-color: #FFFFCC;で指定しま

す。 opacity: 0.0; と指定して見えないようにしておきます。サンプルＣＳＳ８の

NaviMenu02C と違って、各小メニュー項目の border を表示しないで、小メニューの大枠と

なる ul 要素の border を徐々に伸びるように変化させるため、transition の指定をします。

0.5 秒で ease-in-out で変化するようにしています。

大メニューの li 要素（大メニュー項目）が hover された時の小メニューの ul 要素の変化

を指定します。margin-top: 0px;と指定して、小メニューの上端を大メニューの下に移動

させます。width: 200px;と height は指定しないで自動計算させます。opacity: 0.8;と指

定して、見えるようにします。

/* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin: -52px 0px 0px 200px; padding: 0px; /* 小メニューを大メニューの右横の位置に移動する。 */ list-style-type: none;

/* width: 0px; height: 0px; */ /* width と height は指定せずに自動計算

させる（ココがミソ）。 */ border: 1px solid #999999; border-top: none; background-color: #FFFFCC; opacity: 0.0; /* 小メニューを不可視にする。 */ } #menu-box>ul>li:hover ul { /* この変化には transition を指定せず、瞬時に変化させる。 */ margin-top: 0px; /* width: 200px; */ /* width は自動計算させる（ココがミソ）。 */ opacity: 0.8; /* 小メニューの ul を可視にする。 */ }

(34)

大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化は次のよう

に指定します。width: 200px;、height: 32px;と opacity: 0.8; を指定して、li 要素を徐々

に高さが増して目に見えるように変化させます。

li 要素に表示する a 要素のテキストのスタイルを指定します。ボーダーは指定しません。

テキストの先頭に空白を入れるために padding: 0px 0px 0px 10px;の指定をします。この

場合、width: 100%;を指定すると、padding 分だけ右へずれるので、height: 100%;の指定

だけにします。text-align: left;で、テキストを左寄せにしてあります。

以降の指定は、NaviMenu02C.css と同じです。

#menu-box ul li ul li a { /* 小メニューのテキスト */ margin: 0px; padding: 0px 0px 0px 10px; text-decoration: none; height: 100%; text-align: left;

font-weight: bold;

font-family: "ＭＳＰゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; /* line-height: 50px; */ display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; } #menu-box>ul>li:hover ul li { /* 大メニューの hover 時に小メニューの幅と高を変え、可視にする */ width: 200px; height: 32px; opacity: 0.8; }

(35)

〔横に広がるアコーディオンメニュー〕

大メニューをマウスカーソルで hover すると、アコーディオンのように大メニューの間が

広がり、小メニューが現れます。小メニューを hover すると、メニューの背景色とテキス

トの色が変わります。

【NaviMenu03 の説明】

〔HTML の記述（NaviMenu03.html）

〕

id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。大

メニューの項目名 MENU1、MENU2、MENU3 は<h1>タグで指定しています。

サンプルＣＳＳ１１

<!DOCTYPE html> <html> <head> <title>NaviMenu03</title> <meta charset="UTF-8">

1253-1 メニューのトランジション１ (text-overflow)

トランジションを利用して、面白い個性的なメニューを作ってみましょう。web ページもぐ

っと引き立つでしょう。ここで紹介するメニューも Illustrator や Photoshop でメニュー

の画像を作る必要はありません。JavaScript でスクリプトを書く必要もありません。すべ

て CSS3 の機能だけで作成されています。

■

text-overflow

テキストが要素に納まり切れない時の処理方法を指定します。

値

説 明

clip

ellipsis

文字列

テキストを切り取って要素に収める。（初期値）

テキストを切り取り、後ろに「・・・」を付加して、切り取ったことを表現する。

テキストを切り取ったことを示すために、指定された文字列を表示する。

（2013年6月現在では未対応。）

overflow: hidden;とセットで使用します。overflow: visible;または overflow の指定

がない場合は、text-overflow プロパティは適用されません。

〔使用例〕 （サンプルソース：TextOverflow.html／TextOverflow.css）

次の４つの場合を示しています。

・overflow: hidden; text-overflow: clip;

・overflow: hidden; text-overflow: ellipsis;

・overflow の指定なし text-overflow: clip;

・overflow の指定なし text-overflow: ellipsis;

（注意）text-overflow: ellipsis; をメニューの表示で指定した場合、メニュー項目の

テキストがオーバーフローすると、テキストが切り取られて後ろに「・・・」が付加さ

れるので、このメニュー項目を選択するとさらにメニューがあるように誤解される恐れ

があります。メニューの場合には text-overflow: clip; で指定するようにしましょう。

もっともメニュー項目の場合は、テキストがオーバーフローしないようにすることが大

事です。

〔伸びてくるプルダウンメニュー１〕

大メニューをマウスカーソルで hover すると、小メニューが上から伸びてきます。小メニ

ューを hover すると、メニューの背景色とテキストの色が変わります。

【NaviMenu01 の説明】

〔HTML の記述 （NaviMenu01.html）

〕

id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。<a

href="#">MENU1</a>の href="#"は、a 要素には必ず href 属性を指定しなければならないの

で、大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように"#"と指

定しています。もちろんここへ#ではなく URL を記述すれば、その URL へジャンプすること

ができます。

〔CSS の記述（NaviMenu01.css）

〕

先ず、id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほか

のトランジションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメ

ニューで使用していることを分かり易くするために#menu-box という id 名を付けています。

なお、右側にコメントが付いているところがありますが、実際にスタイルシートにコード

を記述する際には、コメントは記述しなくてもかまいません。

次に大メニューの ul 要素のスタイルを指定します。大メニュー項目３つを入れる枠になり

ます。#menu-box>ul としているのは、ul 要素は HTML 文書の中ではほかの場所でも記述さ

れるので、#menu-box の中の ul 要素に限定し、しかも、

「>」を付けることにより、#menu-box

の子供の ul 要素（大メニューの ul 要素）に限定してスタイルを指定するためです。

#menu-box の孫の ul 要素（小メニューの ul 要素）には影響しません。ul 要素は li 要素を

入れる領域として使用するので、次の指定をします。

① margin: 0px; padding: 0px; → ul 要素はこの指定をしないと margin と padding

の余白が自動的にとられてしまいます。

② list-style-type: none; → ul 要素の下に配置される各 li 要素のテキストの先頭

に“・”などのマークが付くのを防ぐために指定します。

③border-right: 1px solid #999999;と指定しているのは、li 要素（大メニュー項目）

同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none; の指定

をしているので、バーのいちばん右側のボーダー幅が 0px にならないように、ul 要

素の右側のボーダー幅を 1px で指定しています。

④小メニューが伸びた時に、#menu-box の div 要素以降に記述されている HTML のコンテ

ンツ（テキストや画像等）が動くのを防ぐために、#menu-box>ul（大メニューの ul）

を position: absolute; と指定し、#menu-box に対する絶対位置としてあります。

大メニューの li 要素のスタイルを指定します。#menu-box>ul>li としているのは、#menu-box

の子供の ul 要素（大メニューの ul 要素）の子供の li 要素（大メニュー項目）に限定して

スタイルを指定するためです。#menu-box の孫の ul 要素（小メニューの ul 要素）の子供

の li 要素（小メニュー項目）には影響しません。大メニュー項目を横に並べたいので float:

left;の指定をしています。

li 要素に表示する a 要素のテキストのスタイルを指定します。テキストにデコレーション

（飾り）が付かないように text-decoration: none;の指定をします。text-decoration:

none;がないと、テキストにアンダーラインが付いたり、リンク済みのテキストカラーに変

わったりします。大メニューの背景色を background-color: #99CCFF;で指定しています。

ボーダーを border: 1px solid #999999;で指定していますが、li 要素（大メニュー項目）

同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: none; の指定をして

います。

次に小メニューの ul 要素のスタイルを指定します。大メニュー項目を hover した時に下に

説　　　　　明

〔使用例〕（サンプルソース：TextOverflow.html／TextOverflow.css）

〔HTML の記述（NaviMenu01.html）

〔HTML の記述（NaviMenu01B.html）

li 要素に表示する a 要素のテキストのスタイルで次の部分が違います。背景色を

〔HTML の記述（NaviMenu01C.html）