ホームページ作成(マウスで変化)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ

ロールオーバー 文字や下線、背景など

マウスが上に来た時に、文字や下線や背景などを変化させロールオーバー効果の様々なパターンです。

ボタンの様に全体に画像を使用したい場合には、
別々の画像を切り替える
1枚の画像を移動させる
全てのボタンを1枚の画像にして移動させる
をそれぞれ参考にして下さい。

ここでは、javaを使用しない方法になります。

また、リンク文字の色変更の仕方などは、文字の色を変えたい(リンク部分)で説明してますので確認して下さい。

sample
説明と書き方 
 

リンクした文字の下線をなくし、マウスが来た時に全体の文字を赤色に変更し、下線も表示する方法です。

もっとも多くのサイトで使用されていて、マウスが重なった場合に変化させるhoverを使用します。

文字の色を変えたい(リンク部分)マウスが来た時に再度下線を表示するも参照して下さい。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー(文字)</a></div>
スタイルシート素材コードの書き方は
/* リンク部分 */
a
   {text-decoration:none;}        /* リンク部分の下線を消す */

a:link
   {color:#0000ff;}               /* まだ見ていないリンク色 */

a:visited
   {color:#0000ff;}               /* 既に見たリンク色 */

a:hover
   {
    color:#ff0000;               /* マウスが上に来た時の文字色設定 */
    text-decoration:underline;   /* マウスが上に来た時に下線をだす。 */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

ボタンのイメージになる様に、『ロールオーバー1』の場合には、『下と右』の罫線を濃い色で『影』の様に見える様にし、マウスが上に来た時は『凹んだ感じ』になる様に、『左と上』が『影』になる様にする方法です。

ただ単に、罫線の引き方を反転しているだけの事ですが、『左と上』の罫線の太さ(2px)と、『右と下』の罫線の太さ(1px)が違う為に、反転した時に中の文字部分が動きます。(全てのブラウザに対応しているかは不明です。)

『ロールオーバー1(凹)』についての書き方です。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー1(凹)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */
div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */
a
   {
    display:block;                   /* リンクをブロックに変換 */
    width:100%;                      /* リンク幅をブロック全体に */
    height:100%;                     /* リンク高さをブロック全体に */
    text-decoration:none;            /* リンク部分の下線を消す */
    border-left:solid 1px #cccccc;   /* 左罫線 */
    border-top:solid 1px #cccccc;    /* 上罫線 */
    border-right:solid 2px #808080;  /* 右罫線 */
    border-bottom:solid 2px #808080; /* 下罫線 */
    background-color:#c0c0c0;        /* 背景色 */
   }

a:link
   {color:#000000;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#000000;}                  /* 既に見たリンク色 */

a:hover
   {
    border-left:solid 2px #808080;  /* 左罫線 */
    border-top:solid 2px #808080;   /* 上罫線 */
    border-right:solid 1px #cccccc; /* 右罫線 */
    border-bottom:solid 1px #cccccc;/* 下罫線 */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

最初から引いてある罫線(枠線)が、マウスが来た時に変化する方法です。

単に罫線の『種類』,『色』を変更しているだけの事ですが、罫線の『太さ』を変更してしまうと、全体のレイアウトが崩れる可能性がありますので太さを変更する事はしない様にします。

『ロールオーバー4(二重線)』の様に『罫線が現れる!』様にする場合には、必ず『背景色と同色線』を引いておいて、マウスが来た時に『色や、種類』を変更する様にします。最初に引いておかないとマウスが来た時に急にレイアウトが崩れる原因になります。

『ロールオーバー4(二重線)』についての書き方です。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー4(二重線)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */
div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */
a
   {
    display:block;               /* リンクをブロックに変換 */
    width:100%;                  /* リンク幅をブロック全体に */
    height:100%;                 /* リンク高さをブロック全体に */
    text-decoration:none;        /* リンク部分の下線を消す */
    border:solid 3px #c0c0c0;    /* 罫線を実線の3pxで引く(背景と同色) */
    background-color:#c0c0c0;    /* 背景色 */
   }

a:link
   {color:#000000;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#000000;}                  /* 既に見たリンク色 */

a:hover
   {border:double 3px #000000;}      /* 罫線を二重線の3pxで色を黒に*/

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

文字の『色』と『太さ』を変更する方法です。

マウスが重なった時に文字色を変更し、文字の太さも太くして変化させてます。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー5(太文字)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */

div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */

a
   {
    display:block;                   /* リンクをブロックに変換 */
    width:100%;                      /* リンク幅をブロック全体に */
    height:100%;                     /* リンク高さをブロック全体に */
    text-decoration:none;            /* リンク部分の下線を消す */
    border:solid 1px #000000;        /* 全体罫線 */
    background-color:#ff6600;        /* 背景色 */
   }

a:link
   {color:#000000;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#000000;}                  /* 既に見たリンク色 */

a:hover
   {
    color:#ffffff;                   /* 文字色 */
    font-weight:bold;                /* 文字を太く */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

『文字の色』と『背景色』を変更し、反転している様にする方法です。

マウスが重なった時に文字・背景色を変更し、文字の太さも太くして変化させてます。

枠線を最初から引いておく事がポイントです。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー6(反転)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */
div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */

a
   {
    display:block;                   /* リンクをブロックに変換 */
    width:100%;                      /* リンク幅をブロック全体に */
    height:100%;                     /* リンク高さをブロック全体に */
    text-decoration:none;            /* リンク部分の下線を消す */
    border:solid 2px #ff6600;        /* 全体罫線 */
    background-color:#ff6600;        /* 背景色 */
    color:#ffffff;                   /* 文字色 */
    font-weight:bold;                /* 文字を太く */
   }

a:link
   {color:#ffffff;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#ffffff;}                  /* 既に見たリンク色 */

a:hover
   {
    color:#ff6600;                   /* 文字色を反転 */
    background-color:#ffffff;        /* 背景色を反転 */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

一部の枠線の色を変化させる方法です。

『下線』の場合は、下線の色を『白』→『緑』,『左右の線』の場合は、『緑』→『赤』に変化させています。

『ロールオーバー8(左右の線)』についての書き方です。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー8(左右の線)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */
div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */
a
   {
    display:block;                   /* リンクをブロックに変換 */
    width:100%;                      /* リンク幅をブロック全体に */
    height:100%;                     /* リンク高さをブロック全体に */
    text-decoration:none;            /* リンク部分の下線を消す */
    border-left:solid 10px #009933;  /* 左の罫線 */
    border-right:solid 10px #009933; /* 右の罫線 */
    border-bottom:solid 1px #009933; /* 下の罫線 */
    border-top:solid 1px #009933;    /* 上の罫線 */
    background-color:#ffffff;        /* 背景色 */
    font-weight:bold;                /* 文字を太く */
   }

a:link
   {color:#009933;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#009933;}                  /* 既に見たリンク色 */

a:hover
   {
    border-left:solid 10px #ff0000;  /* 左の罫線 */
    border-right:solid 10px #ff0000; /* 左の罫線 */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲

 

左側の画像を入れ替える方法です。

このホームページ作成(ロールオーバー) , ホームページ作成(ロールオーバー) 画像自体を背景として設定をし、マウスが上に来た時に、このホームページ作成(ロールオーバー) , ホームページ作成(ロールオーバー) 背景画像に変える方法です。

画像の場所を指定するには、background-position:左右 上下;を使用して表示位置を指定しています。

『ロールオーバー11(左の画像)』についての書き方です。

HTML素材コードの書き方は

<div><a href="リンク">ロールオーバー11(左の画像)</a></div>
スタイルシート素材コードの書き方は
/* 全体 */
div
   {
    width:300px;                     /* 全体幅 */
    height:24px;                     /* 全体高さ */
    text-align:center;               /* 文字を中央 */
    line-height:150%;                /* 行の高さ */
   }

/* リンク部分 */
a
   {
    display:block;                   /* リンクをブロックに変換 */
    width:100%;                      /* リンク幅をブロック全体に */
    height:100%;                     /* リンク高さをブロック全体に */
    text-decoration:none;            /* リンク部分の下線を消す */
    font-weight:bold;                /* 文字を太く */
    text-align:left;                 /* 文字を左寄せ */
    text-indent:20px;                /* 文字の前の余白 */
    border-bottom:solid 3px #009933; /* 下の罫線 */
    background-color:#ffffff;        /* 背景色 */
    background-image:url(画像1);    /* 最初の背景画像 */
    background-repeat:no-repeat;     /* 背景画像を繰返さない */
    background-position:left center; /* 背景画像の表示場所 */
   }

a:link
   {color:#000000;}                  /* まだ見ていないリンク色 */

a:visited
   {color:#000000;}                  /* 既に見たリンク色 */

a:hover
   {
    background-image:url(画像2);   /* 変更の背景画像 */
    background-repeat:no-repeat;    /* 背景画像を繰返さない */
    background-position:left center;/* 背景画像の表示場所 */
   }

ホームページ作成TOP > マウスで変化 > 文字や下線や背景などいろいろ > このページのTOP ▲