kumausa.com  
 
HOME
ぬりえ
ARTギャラリー
WEB技術教えます
Macをもっと使おう!
これみつけた!
よってけ!地元情報
お友達サイト
著作権等について
このサイトについて
ご意見・ご感想

WEB技術教えます

本日のテーマ〔CSSでロールオーバー(上級者向け)〕
2005年2月23日

ホームページの作り方はHTMLで覚えたものの、CSSはリンクする時に色を変えるとか、背景を変える際に用いたものでした。しかし、昨今ではCSSをフルに活用されたホームページが多い感じがしますので、ここへ記述しておきたいと思います。

さて、CSStはスタイルシートと言って、HTML内のスタイル、デザインや配置、構成を決めるのにHTMLと一緒に用います。
私がこのCSSを本格的に勉強しようと思って購入した教本が
HTML &スタイルシートデザインブック です。今もまだ勉強中なので傍らに常にある状態が続いてます。この本を元に、当サイトを設計しているわけです。

【←左側にあるコンテンツのところはどうしているのか】

私がやり方を忘れないうちに書いておかなければいけないので、HTMLの事はひとまずおいといておく事にします。
文字(以下テキスト)の上にカーソルを合わせると下の絵が自動的に切り替わる方法ですが、用意するものは・・・

  1. テキストの下のイメージを通常見えているイメージと、マウスをのせた状態のイメージの2通りを用意する。イメージは設定する大きさより少し大きめに作成しておくこと。
  2. HTML内へ赤字部分のタグを挿入します。
    <HTML><HEAD><TITLE>ホームページの題名</TITLE>
    <style type="text/css"><!--
    <!--横幅と通常見えるイメージを設定 -->
    .side {
    width:98%;
    padding-top: 30px;
    }
    <!--表示位置を設定 -->
    .side {
    vertival-align:top;
    padding: 0px;
    }
    <!--リンクの見え方を設定 -->
    .side a {
    color: #FFFFFF;
    text-decoration: none;
    display:block;
    height: 31px;
    padding-left: 20px;
    padding-top: 10px;
    background:url(image1.gif) no-repeat;
    }
    <!--マウスが重なった時のリンクの設定 -->
    .side a:hover {
    color: #000000;
    background:url(image.gif) no-repeat;
    }
    --></style>
    この方法は直接ページ内にCSSを記述する方法です。もう一つ、赤字部分を別ページ(etc.css)で作成し添付する方法もあります。この方法は、HTMLの記述が長くなってしまうのを防ぎます。
  3. 記述したCSSを使用したい箇所へ挿入します。
    <table width="98%" border="0" cellpadding="0" cellspacing="2" class="side">
    <tr>
    <td height="30" class="side">
    <a href="index.html">HOME</a></td>
    </tr>
    </table>

    </body></html>

    太字で書かれている箇所の side が CSSです。side aなどの side タグの後ろにあるタグは、 side に含まれます。タグの中で使用する時はtable (td)内で記述されるか、span で個々に記述する方法があります。

ということで、イメージを用意して、このタグをコピー&ペーストすればできます。是非、チャレンジしてみて下さい。

今回は上級者向けでしたので、HTMLのタグについては後日勉強しなおします。ではでは。

 

 





 

△このページの先頭へ

 
  2005-2007 kuma kuma usagi. All Rights Reserved.