© 2016 電脳 Papa 1
1252-1 ボタンのトランジション１
トランジションを利用して、ボタンを作ってみましょう。ボタンを工夫することでひとき
わ光る web ページにすることができます。もう Illustrator や Photoshop でボタンの画像
を作る必要はありません。JavaScript でスクリプトを書く必要もありません。すべて CSS3
の機能だけで作成されています。
〔形と色が変化するリンクボタン〕
マウスカーソルを hover すると、四角形のボタンの角が丸く変形し、色が変わります。
【NaviButton01 の説明】
〔HTML の記述 （NaviButton01.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
サンプルＣＳＳ１
<!DOCTYPE html> <html> <head> <title>NaviButton01</title>© 2016 電脳 Papa 2
〔CSS の記述（NaviButton01.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほか
のトランジションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメ
ニューで使用していることを分かり易くするために#menu-box という id 名を付けています。
なお、実際にスタイルシートにコードを記述する際には、右側のコメントは記述しなくて
もかまいません。
次に ul 要素のスタイルを指定します。#menu-box ul としているのは、ul 要素は HTML 文書
の中ではほかの場所でも記述されるので、#menu-box の中の ul 要素に限定してスタイルを
指定するためです。ul 要素は li 要素を入れる領域として使用するので、特にスタイルは指
定せず、次の２つだけ指定します。
① margin: 0px; padding: 0px; → ul 要素はこの指定をしないと margin と padding
の余白が自動的にとられてしまいます。
② list-style-type: none; → ul 要素の下に配置される各 li 要素のテキストの先頭
に“・”などのマークが付くのを防ぐために指定します。
#menu-box { margin: 10px; width: 208px; /* li の幅+ボーダーの幅 *//* （height は、li の高さ+ボーダーの幅+margin）* 3 で 自動的に計算される。 */
position: relative; }
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton01.css"> </head> <body> <h1>■リンクボタンを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html>
© 2016 電脳 Papa 3
li 要素のスタイルを指定します。#menu-box li としているのは、ul 要素と同じように li
要素が HTML 文書の中ではほかの場所でも記述されるので、#menu-box の中の li 要素に限
定してスタイルを指定するためです。
li 要素の四角形の４つの角を丸く変形し背景の色を変化させるため、transition の指定を
します。0.5 秒、linear で変化するようにしています。
li 要 素 が hover さ れ た 時 の 変 化 を 指 定 し ま す 。 background-color: #FF99FF; に 、
border-radius: 30px; 変化させます。
li 要素に表示する a 要素のテキストのスタイルを指定します。テキストにデコレーション
（飾り）が付かないように text-decoration: none;の指定をします。text-decoration:
none;がないと、テキストにアンダーラインが付いたり、リンク済みのテキストカラーに変
わったりします。overflow: hidden;と outline: none;を指定しているのは、Firefox ブラ
ウザの場合にリンク済みのデコレーションとして点線の枠取りが表示されるのを防ぐため
です。
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */ list-style-type: none; } #menu-box li { /* ボタンの四角形 */ margin: 0px 0px 5px 0px; width: 200px; height: 50px; background-color: #99FF99; border: 4px solid #999999; border-radius: 5px; transition: 0.5s linear; -webkit-transition: 0.5s linear; }
#menu-box li:hover { /* ボタン hover 時にボタンの色を変えて、四角形の 角を丸く変形する。 */
background-color: #FF99FF; border-radius: 30px; }
© 2016 電脳 Papa 4
〔押されたように沈み込む金属風リンクボタン〕
マウスカーソルを hover すると、金属風のボタンが沈み込むように変形します。
【NaviButton01B の説明】
〔HTML の記述 （NaviButton01B.html）
〕
NaviButton01.html の<title>のテキストと、<link>の href の css ファイル名だけ変更され
た内容です。
<!DOCTYPE html> <html> <head> <title>NaviButton01B</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="NaviButton01B.css"> </head>
サンプルＣＳＳ２
#menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }
© 2016 電脳 Papa 5
〔CSS の記述（NaviButton01B.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
ト に コ ー ド を 記 述 す る 際 に は 、 右 側 の コ メ ン ト は 記 述 し な く て も か ま い ま せ ん 。
NaviButton01.css の#menu-box の div 要素の指定と同じです。
次に ul 要素のスタイルを指定します。NaviButton01.css の#menu-box ul 要素の指定と同
じです。
li 要素のスタイルを指定します。background-image プロパティに repeating-linear-
gradient を使用して、ボタンの表面を金属風のグラデーションに仕上げています。また
box-shadow プロパティを使用して、ボタンに輝きと影をつけています。ボタンが瞬時に沈
み込むように見せるために、transition の指定はしません。
#menu-box { margin: 10px; width: 208px; /* li の幅+ボーダーの幅 *//* （height は、li の高さ+ボーダーの幅+margin）* 3 で 自動的に計算される。 */
position: relative; }
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */ list-style-type: none; } <body> <h1>■リンクボタンを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html>
© 2016 電脳 Papa 6
li 要素が hover された時の変化を指定します。box-shadow プロパティを使用して、ボタン
が押しこまれたような影をつけています。
li 要素に表示する a 要素のテキストのスタイルを指定します。NaviButton01.css の
#menu-box li a 要素の指定と同じです。
#menu-box li:hover { /* ボタン hover 時にボタンが押し込まれたような影を つける。 *
background-color: darkgray; /* グラデーションの機能がない場合の背景色 */ box-shadow: 4px 3px 6px rgba(0, 0, 0, 1) inset, -4px -3px 6px rgba(0, 0, 0, 0.4) inset, 4px -3px 6px rgba(0, 0, 0, 0.4) inset, -4px 3px 6px rgba(0, 0, 0, 0.4) inset, 10px 10px 12px rgba(255, 255, 255, 1) inset, -8px -8px 10px rgba(0, 0, 0, 0.3) inset; background-position: 2px 2px; } #menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;
font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; #menu-box li { /* ボタンの四角形 */ margin: 0px 0px 5px 0px; width: 200px; height: 50px; border: 5px solid #FF6600; border-radius: 30px; background-color: lightgray; /* グラデーションの機能がない場合の背景色 */ /* 金属風のグラデーションをつける */
background-image: repeating-linear-gradient( rgba( 255, 255, 255, 0.5 ) 2%, rgba( 255, 255, 255, 0.7 ) 8% ), repeating-linear-gradient( darkslategray 10%, darkslategray 20%, lightslategray 20%, lightslategray 30% ); background-image: -webkit-repeating-linear-gradient( rgba( 255, 255, 255, 0.5 ) 2%, rgba( 255, 255, 255, 0.7 ) 8% ), -webkit-repeating-linear-gradient( darkslategray 10%, darkslategray 20%, lightslategray 20%, lightslategray 30% ); background-clip: border-box;
background-repeat: no-repeat; /* 輝きと影をつける */
box-shadow: 5px 5px 8px rgba(255, 255, 255, 1) inset, -4px -4px 8px rgba(0, 0, 0, 0.6) inset; }
© 2016 電脳 Papa 7
li 要素が hover された時の a 要素の変化を指定します。transform プロパティの translate
関数を使用して、ボタンが押しこまれた時にテキストが右下へずれる様子を表しています。
〔押されたように沈み込むカラフルなリンクボタン〕
マウスカーソルを hover すると、カラフルなボタンが沈み込むように変形します。
【NaviButton01C の説明】
〔HTML の記述 （NaviButton01C.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton01.html の<title>のテキスト、<link>の href の css ファイル名が変更された内
容です。
#menu-box li:hover a { /* ボタン hover 時にボタンが押し込まれたように テキストをズラす。 */ transform: translate(1px, 1px); -webkit-transform: translate(1px, 1px); }
サンプルＣＳＳ３
line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }© 2016 電脳 Papa 8
〔CSS の記述（NaviButton01C.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
ト に コ ー ド を 記 述 す る 際 に は 、 右 側 の コ メ ン ト は 記 述 し な く て も か ま い ま せ ん 。
NaviButton01.css の#menu-box の div 要素の指定と同じです。
次に ul 要素のスタイルを指定します。NaviButton01.css の#menu-box ul 要素の指定と同
じです。
li 要素のスタイルを指定します。３つのボタンの形と色をそれぞれ変えたいので、要
#menu-box { margin: 10px; width: 208px; /* li の幅+ボーダーの幅 *//* （height は、li の高さ+ボーダーの幅+margin）* 3 で 自動的に計算される。 */
position: relative; }
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */ list-style-type: none; } <!DOCTYPE html> <html> <head> <title>NaviButton01C</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton01C.css"> </head> <body> <h1>■リンクボタンを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html>
© 2016 電脳 Papa 9
素 :nth-child(n) セ レ ク タ を 使 用 し て そ れ ぞ れ の ボ タ ン に border-radius と
background-color を指定しています。box-shadow プロパティを使用して、ボタンに輝きと
影をつけています。ボタンが瞬時に沈み込むように見せるために、transition の指定はし
ません。
li 要素が hover された時の変化を指定します。box-shadow プロパティを使用して、ボタン
が押しこまれたような影をつけています。
li 要素に表示する a 要素のテキストのスタイルを指定します。３つのボタンのテキストの
色をそれぞれ変えたいので、要素:nth-child(n)セレクタを使用してそれぞれのボタンに
color を指定しています。それ以外は NaviButton01.css の#menu-box li a 要素の指定と同
じです。
#menu-box li { /* ボタンの四角形 */ margin: 0px 0px 5px 0px; width: 200px; height: 50px; border: 5px solid #999999; background-color: #FFBB00; /* nth-child(n)セレクタの機能がない場合の背景色 */ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) inset, -1px 1px 2px rgba(0, 0, 0, 0.3) inset, -1px -1px 2px rgba(0, 0, 0, 0.3) inset, 1px -1px 2px rgba(0, 0, 0, 0.3) inset, 4px 4px 6px rgba(255, 255, 255, 0.8) inset, -2px -2px 6px rgba(0, 0, 0, 0.6) inset; } #menu-box li:nth-child(1) { border-radius: 15px; background-color: #DC143C; } #menu-box li:nth-child(2) { border-radius: 30px; background-color: #228B22; } #menu-box li:nth-child(3) { border-radius: 40% / 50%; background-color: #9370DB; }#menu-box li:hover { /* ボタン hover 時にボタンが押し込まれたような影を つける。 */
box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.8) inset, -2px 2px 2px rgba(0, 0, 0, 0.3) inset, -1px -1px 2px rgba(0, 0, 0, 0.3) inset, 2px -2px 2px rgba(0, 0, 0, 0.3) inset, 6px 6px 8px rgba(255, 255, 255, 0.8) inset,
-3px -3px 8px rgba(0, 0, 0, 0.6) inset; }
© 2016 電脳 Papa 10
li 要素が hover された時の a 要素の変化を指定します。transform プロパティの translate
関数を使用して、ボタンが押しこまれた時にテキストが右下へずれる様子を表しています。
#menu-box li:hover a { /* ボタン hover 時にボタンが押し込まれたように テキストをズラす。 */ transform: translate(1px, 1px); -webkit-transform: translate(1px, 1px); } #menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;
font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana;
color: #000000; /* nth-child セレクタの機能がない場合のテキスト色 */ line-height: 50px; text-shadow: 2px 2px 2px #666666; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; } #menu-box li:nth-child(1) a { color: #FFFFFF; } #menu-box li:nth-child(2) a { color: #FFFF00; } #menu-box li:nth-child(3) a { color: #FFB6C1; }
© 2016 電脳 Papa 11
〔形と色が変化する縦型のリンクボタン〕
マウスカーソルを hover すると、縦型の四角形のボタンの角が丸く変形し、色が変わりま
す。
【NaviButton01D の説明】
〔HTML の記述 （NaviButton01D.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。ボ
タンの文字を縦に並べるため、１文字ごとに<span>と</span>で囲みます。
〔CSS の記述（NaviButton01D.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。この本で紹介しているほか
のトランジションで使用している id 名が#stage の div 要素と同じものですが、ボタンやメ
サンプルＣＳＳ４
<!DOCTYPE html> <html> <head> <title>NaviButton01D</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="NaviButton01D.css"> </head> <body> <h1>■リンクボタンを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html"><span>P</span><span>A</span><span>G</span> <span>E</span><span>l</span><span>1</span></a></li> <li><a href="linkPages/page2.html"><span>P</span><span>A</span><span>G</span> <span>E</span><span>l</span><span>2</span></a></li> <li><a href="linkPages/page3.html"><span>P</span><span>A</span><span>G</span> <span>E</span><span>l</span><span>3</span></a></li> </ul> </div> </body> </html>
© 2016 電脳 Papa 12
ニューで使用していることを分かり易くするために#menu-box という id 名を付けています。
なお、実際にスタイルシートにコードを記述する際には、右側のコメントは記述しなくて
もかまいません。
次に ul 要素のスタイルを指定します。#menu-box ul としているのは、ul 要素は HTML 文書
の中ではほかの場所でも記述されるので、#menu-box の中の ul 要素に限定してスタイルを
指定するためです。ul 要素は li 要素を入れる領域として使用するので、特にスタイルは指
定せず、次の２つだけ指定します。
① margin: 0px; padding: 0px; → ul 要素はこの指定をしないと margin と padding
の余白が自動的にとられてしまいます。
② list-style-type: none; → ul 要素の下に配置される各 li 要素のテキストの先頭
に“・”などのマークが付くのを防ぐために指定します。
li 要素のスタイルを指定します。#menu-box li としているのは、ul 要素と同じように li
要素が HTML 文書の中ではほかの場所でも記述されるので、#menu-box の中の li 要素に限
定してスタイルを指定するためです。
ボタンを横に並べるため float: left;を指定します。
li 要素の四角形の４つの角を丸く変形し背景の色を変化させるため、transition の指定を
します。0.5 秒、linear で変化するようにしています。
#menu-box { margin: 10px; width: 253px; /* li の幅+ボーダーの幅 *//* （height は、li の高さ+ボーダーの幅+margin）で 自動的に計算される。 */
position: relative; }
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */ list-style-type: none; } #menu-box li { /* ボタンの角丸四角形 */ margin: 0px 10px 0px 0px; padding: 10px 0px 0px 15px; width: 50px; height: 200px; background-color: #99FF99; border: 4px solid #999999; border-radius: 10px; float: left; #menu-box li { /* ボタンの角丸四角形 */ margin: 0px 10px 0px 0px; padding: 10px 0px 0px 15px;
© 2016 電脳 Papa 13
li 要 素 が hover さ れ た 時 の 変 化 を 指 定 し ま す 。 background-color: #FF99FF; に 、
border-radius: 50px; 変化させます。
li 要素に表示する a 要素のテキストのスタイルを指定します。テキストにデコレーション
（飾り）が付かないように text-decoration: none;の指定をします。text-decoration:
none;がないと、テキストにアンダーラインが付いたり、リンク済みのテキストカラーに変
わったりします。
テキストを１文字ずつ縦に並べるため span 要素の width: 30px; height: 32px;を指定し、
float: left;を指定して、li 要素の中にテキストを縦に並べます。
overflow: hidden;と outline: none;を指定しているのは、Firefox ブラウザの場合にリン
ク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです。
#menu-box li:hover { /* ボタン hover 時にボタンの色を変えて、四角形の 角を丸く変形する。 */ background-color: #FF99FF; border-radius: 50px; } #menu-box>ul>li a span { /* ボタンのテキスト１文字ごと縦に並べる */ margin: 0px; padding: 0px; width: 30px; height: 32px; text-decoration: none; text-align: center; font-size: 32px; font-weight: bold;
font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; float: left; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; } width: 50px; height: 200px; background-color: #99FF99; border: 4px solid #999999; border-radius: 10px; float: left; transition: 0.5s linear; -webkit-transition: 0.5s linear; }
© 2016 電脳 Papa 14
〔形と色が変化するリンクボタン（横並び）
〕
マウスカーソルを hover すると、四角形のボタンの角が丸く変形し、色が変わります。
【NaviButton02 の説明】
〔HTML の記述 （NaviButton02.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton01.html の<title>のテキストと、<link>の href の css ファイル名だけ変更され
た内容です。
〔CSS の記述（NaviButton02.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。ボタンを
<!DOCTYPE html> <html> <head> <title>NaviButton02</title> <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="NaviButton02.css"> </head> <body> <h1>■リンクボタンを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html>
サンプルＣＳＳ５
© 2016 電脳 Papa 15
横に並べたいので、width と height の指定を NaviButton01.css の#menu-box の div 要素の
指定と変えてあります。
次に ul 要素のスタイルを指定します。NaviButton01.css の#menu-box ul 要素の指定と同
じです。
li 要素のスタイルを指定します。ボタンを横に並べたいので float: left;の指定をしてい
ます。li 要素の四角形の４つの角を丸く変形し背景の色を変化させるため、transition の
指定をします。0.5 秒、linear で変化するようにしています。
li 要 素 が hover さ れ た 時 の 変 化 を 指 定 し ま す 。 background-color: #FF99FF; に 、
border-radius: 30px; 変化させます。NaviButton01.css の#menu-box li:hover の指定と
同じです。
#menu-box { margin: 10px;
width: 579px; height: 58px; /* width は（li の幅+ボーダーの幅+margin）* 3、 height は li の高さ+ボーダーの幅 */
position: relative; }
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */ list-style-type: none; } #menu-box li { /* ボタンの四角形 */ margin: 0px 5px 0px 0px; width: 200px; height: 50px; background-color: #99FF99; border: 4px solid #999999; border-radius: 5px; float: left; transition: 0.5s linear; -webkit-transition: 0.5s linear; }
#menu-box li:hover { /* ボタン hover 時にボタンの色を変えて、四角形の 角を丸く変形する。 */
background-color: #FF99FF; border-radius: 30px; }
© 2016 電脳 Papa 16
li 要素に表示する a 要素のテキストのスタイルを指定します。NaviButton01.css の
#menu-box ul 要素の指定と同じです。
〔色が変化するリンクボタンバー〕
マウスカーソルを hover するとボタンの色が変わります。
【NaviButton03-L の説明】
〔HTML の記述 （NaviButton03-L.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton01.html の<title>のテキスト、<link>の href の css ファイル名、<h1>のテキス
トだけ変更された内容です。
#menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }
サンプルＣＳＳ６
© 2016 電脳 Papa 17
〔CSS の記述（NaviButton03-L.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。ボタンを
横に並べたいので、width と height の指定を NaviButton01.css の#menu-box の div 要素の
指定と変えてあります。
次に ul 要素のスタイルを指定します。リンクボタンバーのボーダーを border: 2px solid
#999999;で指定しています。border-right: 1px solid #999999;と指定しているのは、li
要素（ボタン）同士の間のボーダー幅を 1px にしたいため、li 要素に border-right: 1px
solid #999999;の指定をしているので、バーのいちばん右側のボーダー幅が 3px にならな
いように、ul 要素の右側のボーダー幅を 1px で指定しています。
#menu-box { margin: 10px;
width: 576px; height: 54px; /* width は ul の幅+ボーダーの幅、height は ul の 高さ+ボーダーの幅 */ position: relative; } <!DOCTYPE html> <html> <head> <title>NaviButton03-L</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton03-L.css"> </head> <body> <h1>■リンクボタンバーを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html> #menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */
width: 573px; height: 50px; /* width は（li の幅+ボーダーの幅）* 3、height は li の高さ */
© 2016 電脳 Papa 18
li 要素のスタイルを指定します。li 要素（ボタン）同士の間のボーダー幅を 1px にしたい
ため、li 要素に border-right: 1px solid #999999;の指定をしています。ボタンを横に並
べたいので float: left;の指定をしています。li 要素の背景色を変化させるため、
transition の指定をします。0.5 秒、linear で変化するようにしています。
li 要素が hover された時の変化を指定します。background-color: #66CC66; に変化させま
す。
li 要素に表示する a 要素のテキストのスタイルを指定します。NaviButton01.css の
#menu-box li 要素の指定に加えて、li 要素の背景色を変化させるため、transition の指定
をします。0.5 秒、linear で変化するようにしています。
#menu-box li { /* ボタンの四角形 */ width: 190px; height: 50px; background-color: #99FF99; border-right: 1px solid #999999; float: left; transition: 0.5s linear; -webkit-transition: 0.5s linear; }#menu-box li:hover { /* ボタン hover 時にボタンの色を変える。 */ background-color: #66CC66; } #menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;
font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ border: 2px solid #999999; border-right: 1px solid #999999; list-style-type: none; }
© 2016 電脳 Papa 19
li 要素が hover された時の a 要素の変化を指定します。テキストの色を color: #FF0000;
に、テキストの影を text-shadow: 2px 2px 2px #FFFFFF; に変化させます。
〔押されたように沈み込む金属風リンクボタンバー〕
マウスカーソルを hover すると、金属風のボタンが沈み込むように変形します。
【NaviButton03-L2.html の説明】
〔HTML の記述 （NaviButton03-L2.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton03-L.html の<title>のテキストと、<link>の href の css ファイル名だけ変更さ
れた内容です。
#menu-box li:hover a { /* ボタン hover 時にボタンのテキストの色を変える。 */ color: #FF0000; text-shadow: 2px 2px 2px #FFFFFF; }
サンプルＣＳＳ７
overflow: hidden; outline: none; transition: 0.5s linear; -webkit-transition: 0.5s linear; }© 2016 電脳 Papa 20
〔CSS の記述（NaviButton03-L2.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。ボタンを
横に並べたいので、width と height の指定を NaviButton03-L.css の#menu-box の div 要素
の指定と変えてあります。
次に ul 要素のスタイルを指定します。リンクボタンバーのボーダーを border: 2px solid
#666666;で指定しています。li 要素（ボタン）同士の間のボーダーを 1px にしたいので、
border-right: 1px solid #666666;を指定しています。
#menu-box { margin: 10px;width: 576px; height: 54px; /* width は ul の幅+ボーダーの幅、height は ul の 高さ+ボーダーの幅 */ position: relative; } <!DOCTYPE html> <html> <head> <title>NaviButton03-L2</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton03-L2.css"> </head> <body> <h1>■リンクボタンバーを作る。</h1> <div id="menu-box"> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> </ul> </div> </body> </html> #menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */
width: 573px; height: 50px; /* width は（li の幅+ボーダーの幅）* 3、height は li の高さ */
border: 2px solid #666666; border-right: 1px solid #666666; list-style-type: none;
© 2016 電脳 Papa 21
li 要素のスタイルを指定します。ボタンを横に並べたいので float: left;の指定をしてい
ます。background-image プロパティに repeating-linear-gradient を使用して、ボタンの
表面を金属風のグラデーションに仕上げています。
また box-shadow プロパティを使用して、
ボタンに輝きと影をつけています。ボタンが瞬時に沈み込むように見せるために、
transition の指定はしません。
li 要素が hover された時の変化を指定します。box-shadow プロパティを使用して、ボタン
が押しこまれたような影をつけています。
li 要素に表示する a 要素のテキストのスタイルを指定します。NaviButton01.css の
#menu-box li a 要素の指定と同じです。text-shadow を利用して、へこんだ文字のように
見せています。
#menu-box li { /* ボタンの四角形 */ width: 190px; height: 50px; border-right: 1px solid #666666; float: left; background-color: lightgray; /* グラデーションの機能がない場合の背景色 */ /* 金属風のグラデーションをつける */background-image: repeating-linear-gradient( rgba( 255, 255, 255, 0.5 ) 2%, rgba( 255, 255, 255, 0.7 ) 8% ), repeating-linear-gradient( darkslategray 10%, darkslategray 20%, lightslategray 20%, lightslategray 30% ); background-image: -webkit-repeating-linear-gradient( rgba( 255, 255, 255, 0.5 ) 2%,
rgba( 255, 255, 255, 0.7 ) 8% ), -webkit-repeating-linear-gradient( darkslategray 10%, darkslategray 20%,
lightslategray 20%, lightslategray 30% ); background-clip: border-box;
background-repeat: no-repeat; /* 輝きと影をつける */
box-shadow: 2px 4px 8px rgba(255, 255, 255, 1) inset, -1px -1px 8px rgba(0, 0, 0, 1) inset, -1px -1px 1px rgba(0, 0, 0, 1) inset; }
#menu-box li:hover { /* ボタン hover 時にボタンが押し込まれたような 影をつける。 */
background-color: darkgray; /* グラデーションの機能がない場合の背景色 */ box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8) inset, -1px 1px 2px rgba(0, 0, 0, 0.6) inset, -1px -1px 2px rgba(0, 0, 0, 0.4) inset, 1px -1px 2px rgba(0, 0, 0, 0.6) inset, 3px 5px 8px rgba(255, 255, 255, 1) inset,
-2px -2px 8px rgba(0, 0, 0, 1) inset; background-position: 2px 2px;
© 2016 電脳 Papa 22
li 要素が hover された時の a 要素の変化を指定します。transform プロパティの translate
関数を使用して、ボタンが押しこまれた時にテキストが右下へずれる様子を表しています。
NaviButton03-L と NaviButton03-L2 はリスト要素の ul と li を使用してリンクボタンバー
を作りましたが、テーブル要素の table、tr、td を使用して作ることもできます。
NaviButton03-T と NaviButton03-T2 でサンプルを用意してあるので見てください。
〔色が変化するリンクボタンバー２〕
マウスカーソルを hover するとボタンの色が変わります。
#menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 38px; font-weight: bold;font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #3333FF; /* text-shadow を利用して、へこんだ文字のように見せる */ text-shadow: -2px -2px 1px #666666, -2px -1px 1px #666666, -1px -2px 1px #666666, 1px 1px 2px #EEEEEE, 1px 1px 3px #FFFFFF; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }
#menu-box li:hover a { /* ボタン hover 時にボタンが押し込まれたように テキストをズラす。 */
transform: translate(1px, 1px);
-webkit-transform: translate(1px, 1px); }
© 2016 電脳 Papa 23
【NaviButton04 の説明】
〔HTML の記述 （NaviButton04.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton01.html の<title>のテキスト、<link>の href の css ファイル名、<h1>のテキス
トを変更、
リンクボタンバーの両端に半円形の飾りを div 要素
（id 属性 L-End および R-End）
で追加、li 要素を１行追加した内容です。
〔CSS の記述（NaviButton04.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。
次にリンクボタンバーの左端の半円形の div 要素のスタイルを指定します。背景色を
background-color: #3CB371;（mediumseagreen）で指定し、その上に background-image を
利用して白色のグラデーション（linear-gradient）をかけて、リンクボタンバーの輝きを
#menu-box {
margin: 10px 0px 10px 30px;
width: 729px; height: 54px; /* width は ul の幅+ボーダーの幅、height は ul の 高さ+ボーダーの幅 */ position: relative; } <!DOCTYPE html> <html> <head> <title>NaviButton04</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton04.css"> </head> <body> <h1>■リンクボタンバーを作る。</h1> <div id="menu-box"> <div id="L-End"></div> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> <li><a href="linkPages/page4.html">PAGE-4</a></li> </ul> <div id="R-End"></div> </div> </body> </html>
© 2016 電脳 Papa 24
表現しています。
次にリンクボタンバーの右端の半円形の div 要素のスタイルを指定します。
次に ul 要素のスタイルを指定します。border-right: none;および border-left: none;と
指定しているのは、li 要素（ボタン）同士の間のボーダー幅を 1px にしたいためです。
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */
width: 604px; height: 50px; /* width は（li の幅+ボーダーの幅）* 3、height は li の高さ */ #menu-box #L-End { /* リンクボタンバーの左端 */ margin: 0px; padding: 0px; width: 60px; height: 50px; border: 2px solid #666666; border-right: 1px solid #666666; border-radius: 50% 0% 0% 50%; background-color: #3CB371;
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%,
rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%, rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% ); float: left; } #menu-box #R-End { /* リンクボタンバーの右端 */ margin: 0px; padding: 0px; width: 60px; height: 50px; border: 2px solid #666666; border-left: none; border-radius: 0% 50% 50% 0%; background-color: #3CB371;
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%,
rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%, rgba( 255, 255, 255, 0.4 ) 70%,
rgba( 255, 255, 255, 0.0 ) 100% ); float: left;
© 2016 電脳 Papa 25
li 要素のスタイルを指定します。li 要素（ボタン）同士の間のボーダー幅を 1px にしたい
ため、li 要素に border-right: 1px solid #666666;の指定をしています。li 要素の背景色
を変化させるため、transition の指定をします。0.5 秒、linear で変化するようにしてい
ます。
li 要素が hover された時の変化を指定します。background-color: #008080; （teal）で暗
い緑色にして、白色のグラデーションも薄く変化させます。
#menu-box li:hover { /* ボタン hover 時にボタンの色を変える。 */ background-color: #008080;
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.4 ) 0%, rgba( 255, 255, 255, 0.7 ) 50%,
rgba( 255, 255, 255, 0.3 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.4 ) 0%, rgba( 255, 255, 255, 0.7 ) 50%, rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% ); } #menu-box li { /* ボタンの四角形 */ width: 150px; height: 50px; background-color: #3CB371;
background-image: linear-gradient( to bottom, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%,
rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% );
background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0.5 ) 0%, rgba( 255, 255, 255, 0.8 ) 50%, rgba( 255, 255, 255, 0.4 ) 70%, rgba( 255, 255, 255, 0.0 ) 100% ); border-right: 1px solid #666666; float: left; transition: 0.5s linear; -webkit-transition: 0.5s linear; } border: 2px solid #666666; border-right: none; border-left: none; list-style-type: none; float: left; }
© 2016 電脳 Papa 26
li 要素に表示する a 要素のテキストのスタイルを指定します。li 要素の背景色を変化させ
るため、transition の指定をします。0.5 秒、linear で変化するようにしています。
li 要素が hover された時の a 要素の変化を指定します。テキストの色を color: #FF0000;
に、テキストの影を text-shadow: 2px 2px 2px #FFFFFF; に変化させます。
〔押されたように沈み込む金属風リンクボタンバー２〕
マウスカーソルを hover すると、金属風のボタンが沈み込むように変形します。
サンプルＣＳＳ９
#menu-box li:hover a { /* ボタン hover 時にボタンのテキストの色を変える。 */ color: #FF0000; text-shadow: 2px 2px 2px #FFFFFF; } #menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 32px; 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; transition: 0.5s linear; -webkit-transition: 0.5s linear; }
© 2016 電脳 Papa 27
【NaviButton04B の説明】
〔HTML の記述 （NaviButton04B.html）
〕
id 属性 menu-box の div 要素を作り、その中に ul 要素と li 要素でリストを記述します。
NaviButton04.html の<title>のテキストと、<link>の href の css ファイル名だけ変更した
内容です。
〔CSS の記述（NaviButton04B.css）
〕
先ず、id 名が#menu-box の div 要素のスタイルを指定します。なお、実際にスタイルシー
トにコードを記述する際には、右側のコメントは記述しなくてもかまいません。
次にリンクボタンバーの左端の半円形の div 要素のスタイルを指定します。背景色を
background-color: gold;で指定（グラデーションの機能がないブラウザ用）し、その上に
background-image を 利 用 し て 金 色 の グ ラ デ ー シ ョ ン と 白 色 の グ ラ デ ー シ ョ ン を
（repeating-linear-gradient）をかけて、リンクボタンバーの輝きを表現しています。
#menu-box { margin: 10px 0px 10px 30px;width: 727px; height: 52px; /* width は ul の幅+ボーダーの幅、height は ul の 高さ+ボーダーの幅 */ position: relative; } <!DOCTYPE html> <html> <head> <title>NaviButton04B</title> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="NaviButton04B.css"> </head> <body> <h1>■リンクボタンバーを作る。</h1> <div id="menu-box"> <div id="L-End"></div> <ul> <li><a href="linkPages/page1.html">PAGE-1</a></li> <li><a href="linkPages/page2.html">PAGE-2</a></li> <li><a href="linkPages/page3.html">PAGE-3</a></li> <li><a href="linkPages/page4.html">PAGE-4</a></li> </ul> <div id="R-End"></div> </div> </body> </html>
© 2016 電脳 Papa 28
次にリンクボタンバーの右端の半円形の div 要素のスタイルを指定します。
#menu-box #L-End { /* リンクボタンバーの左端 */ margin: 0px; padding: 0px; width: 60px; height: 50px; border: 1px solid #666666; border-right: 1px solid #666666; border-radius: 50% 0% 0% 50%; background-color: gold; /* グラデーションの機能がない場合の背景色 */ float: left; /* 金属風のグラデーションをつける */background-image: repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), repeating-linear-gradient( gold 0%, goldenrod 40%,
goldenrod 60%, darkgoldenrod 100% ); background-image: -webkit-repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), -webkit-repeating-linear-gradient( gold 0%, goldenrod 40%, goldenrod 60%, darkgoldenrod 100% ); background-clip: border-box;
background-repeat: no-repeat; /* 輝きと影をつける */
box-shadow: 2px 4px 8px rgba(255, 255, 204, 1) inset, -1px -1px 8px rgba(0, 0, 0, 0.8) inset, -1px -1px 1px rgba(0, 0, 0, 0.8) inset; } #menu-box #R-End { /* リンクボタンバーの右端 */ margin: 0px; padding: 0px; width: 60px; height: 50px; border: 1px solid #666666; border-left: none; border-radius: 0% 50% 50% 0%; background-color: gold; /* グラデーションの機能がない場合の背景色 */ float: left; /* 金属風のグラデーションをつける */
background-image: repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), repeating-linear-gradient( gold 0%, goldenrod 40%,
goldenrod 60%, darkgoldenrod 100% ); background-image: -webkit-repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), -webkit-repeating-linear-gradient( gold 0%, goldenrod 40%,
goldenrod 60%, darkgoldenrod 100% ); background-clip: border-box;
background-repeat: no-repeat; /* 輝きと影をつける */
box-shadow: 2px 4px 8px rgba(255, 255, 204, 1) inset, -1px -1px 8px rgba(0, 0, 0, 0.8) inset, -1px -1px 1px rgba(0, 0, 0, 0.8) inset; }
© 2016 電脳 Papa 29
次に ul 要素のスタイルを指定します。リンクボタンバーのボーダーを border-right: none;
および border-left: none;で指定しているのは、li 要素（ボタン）同士の間のボーダーを
1px にしたいためです。
li 要素のスタイルを指定します。ボタンを横に並べたいので float: left;の指定をしてい
ます。背景色を background-color: gold;で指定（グラデーションの機能がないブラウザ用）
し、その上に background-image を利用して金色のグラデーションと白色のグラデーション
を（repeating-linear-gradient）をかけて、リンクボタンバーの輝きを表現しています。
ボタンが瞬時に沈み込むように見せるために、transition の指定はしません。
#menu-box li { /* ボタンの四角形 */ width: 150px; height: 50px; border-right: 1px solid #666666; float: left; background-color: gold; /* グラデーションの機能がない場合の背景色 */ /* 金属風のグラデーションをつける */background-image: repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), repeating-linear-gradient( gold 0%, goldenrod 40%,
goldenrod 60%, darkgoldenrod 100% ); background-image: -webkit-repeating-linear-gradient( rgba( 255, 255, 128, 0.1 ) 10%, rgba( 255, 255, 128, 0.4 ) 20% ), -webkit-repeating-linear-gradient( gold 0%, goldenrod 40%, goldenrod 60%, darkgoldenrod 100% ); background-clip: border-box;
background-repeat: no-repeat; /* 輝きと影をつける */
box-shadow: 2px 4px 8px rgba(255, 255, 204, 1) inset, -1px -1px 8px rgba(0, 0, 0, 0.8) inset, -1px -1px 1px rgba(0, 0, 0, 0.8) inset; }
#menu-box ul {
margin: 0px; padding: 0px; /* この指定がないと、margin と padding の余白が 自動的に採られてしまう。 */
width: 604px; height: 50px; /* width は（li の幅+ボーダーの幅）* 3、height は li の高さ */ border: 1px solid #666666; border-right: none; border-left: none; list-style-type: none; float: left; }
© 2016 電脳 Papa 30
li 要素が hover された時の変化を指定します。box-shadow プロパティを使用して、ボタン
が押しこまれたような影をつけています。
li 要素に表示する a 要素のテキストのスタイルを指定します。テキストの色を color:
#FF3333;（くすんだ赤色）で指定し、text-shadow を利用して浮き出た文字のように見せて
います。
li 要素が hover された時の a 要素の変化を指定します。transform プロパティの translate
関数を使用して、ボタンが押しこまれた時にテキストが右下へずれる様子を表しています。
#menu-box li:hover { /* ボタン hover 時にボタンが押し込まれたような影を つける。 */
background-color: goldenrod; /* グラデーションの機能がない場合の背景色 */ box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8) inset, -1px 1px 2px rgba(0, 0, 0, 0.4) inset, -1px -1px 8px rgba(0, 0, 0, 0.6) inset, 1px -1px 2px rgba(0, 0, 0, 0.8) inset, 4px 5px 8px rgba(255, 255, 204, 1) inset, -1px -1px 1px rgba(0, 0, 0, 0.6) inset; background-position: 2px 2px; } #menu-box li a { /* ボタンのテキスト */ text-decoration: none; text-align: center; font-size: 32px; font-weight: bold;
font-family: "ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro",Verdana; color: #FF3333; /* text-shadow を利用して、浮き出た文字のように見せる */ text-shadow: -2px -2px 3px #FFFF99, 2px 2px 2px #333333; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; }
#menu-box li:hover a { /* ボタン hover 時にボタンが押し込まれたように テキストをズラす。 */
transform: translate(1px, 1px);
-webkit-transform: translate(1px, 1px); }
© 2016 電脳 Papa 31
■メニューをＨＴＭＬ文書に組み込んだ例
サンプルライブラリの「Button Documents」にサンプルボタンをＨＴＭＬ文書に組み込ん
だ例があります。また「Button Documents(HTML5)」には HTML5 形式の文書に組み込んだ例
があります。
これらの例を基にしてボタンを組み込んだホームページを作ることができます。
© 2016 電脳 Papa 32
© 2016 電脳 Papa 33
