【スタイルシートを使ったホームページ作成♪】
−初心者の初心者による初心者のためのCSS入門−


◆実践特別 リンクに変化する画像背景を使ってみよう ◆

実際の管理人のサイトのindexを変更してみた(笑
まー、ここまで来ておれば、下手に説明するより、スタイルシートとページのソースを見てもらってもらうのが一番かいの?



一応これがスタイルシートぢゃ。
中に解説も記入してあるからわかるぢゃろ?(笑
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* ページ全体 */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
body {
    color: navy;            /* 文字色 */
    font-size: 11pt;          /* 文字サイズ */
    line-height: 16pt;         /* 行間 */
    padding-left: 5px;    /* 内左側余白*/
    padding-right: 5px;    /* 内右側余白*/

    scrollbar-base-color: lightblue;   /* スクロールバーの全体の色 */
    scrollbar-arrow-color: lightblue;   /* スクロールバーの矢印の色 */
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* 通常リンクテキスト */
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
a:link, 
a:active {
    font-size: 10pt;          /* 文字サイズ */
color:#1e90ff;
text-decoration:none;
}
a:visited {
    font-size: 10pt;          /* 文字サイズ */
color:#4168e1; /*訪問済みページの文字色*/
}
a:hover {
    font-size: 10pt;          /* 文字サイズ */
color:#00bfff ; /*リンク・マウスを当てた時の文字色*/
font-weight:bolder;  /*リンク・マウスを当てた時文字を太く*/
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* ボタン背景リンク <div id="menu">内にあるリンク*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#menu a:link, 
#menu a:visited,
#menu a:active {
color:navy;
    font-size: 11pt;          /* 文字サイズ */
text-decoration:none;
background-image: url(botan-k1.jpg);
background-repeat: no-repeat;
width: 250px;
height: 100px;
display: block;
    padding-top: 10px;    /* 上余白*/
    padding-left: 20px;    /* 左余白*/
}

#menu a:hover {
background-image: url(botan-n1.jpg);
    font-size: 11pt;          /* 文字サイズ */
width: 250px;
height: 100px;
display: block;

}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* ボタン背景リンク 特定のリンクボタンのみ*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
a.tokubetu:link, 
a.tokubetu:visited,
a.tokubetu:active {
}

a.tokubetu:hover { /* 画像を少し動かす*/
    position: relative;
    top:3px; left:3px;
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* トップページメイン画像(背景)セル*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.topga{
background-image: url(07top.jpg);
display: block;
background-repeat: no-repeat;
width: 500px;
height: 300px;
    font-size: 11pt;          /* 文字サイズ */
    color: #00FFFF;            /* 文字色 */
font-weight:bolder;  /*文字を太く*/
}
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
/* トップページメイン画像(背景)セル内セル*/
/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
.topnaka{
    font-size: 11pt;          /* 文字サイズ */
    color: #00FFFF;            /* 文字色 */
font-weight:bolder;  /*文字を太く*/
}


で、実際にできあがった魔法陣グルグルトップページはこれぢゃ!
なんぢゃったら、ページの上でマウス右クリックして、ソースを覗いて、どこがどの部分のプロパティぢゃか、調べてみてくだされ。自分で調べて納得するのが一番良い学習方法ぢゃからのぉ。


にこにこ顔の助手
問題としている「変化するリンクボタン背景画像」は、右側の3つのリンクボタンですよ♪
上のスタイルシート内でいくと、「ボタン背景リンク <div id="menu">内にあるリンク」の部分です!


分からなかったら、気軽にBBSで、くずは・・おっと、HN変更したんぢゃったの。☆くず(ほしくずと読むそうぢゃ)に聞いてくだされ。
それから、閲覧推奨はIE6以上と書いておいたが、確認は、ネットスケープとOperaでもしておる。
ぢゃが、どうしてもデザインが崩れるんでのぉ・・・ネットスケープ(NN)とOpera愛用の方、ご容赦くだされ。

でもって、スタイルシートに記述してあるのに、ネスケ(ネットスケープ)ぢゃ、そのように表示してくれないので、二重になるが、タグの方(html)で、文字の色を指定したりして・・苦肉の策をとっておるが・・・これ以上、IEのようには表示されないので、ぎぶあっぷぢゃ。わはははは・・・。


にこにこ顔の助手
ひょっとすると教授の知識不足かもしれませんが、一応教授は教授なりに一生懸命調べてなんとかしようとした結果なので、IEのように見えなくても、ここまでで勘弁してやってくださいね。<あ、これ、教授には内緒にしておいてくださいね。

 

ん?助手がなにやら言っておるようぢゃが・・まー、いいぢゃろう・・・
それでは、また機会がありましたら、いつかお会いしましょう!
お元気での!



Back INDEX◆ ページトップ