|
WEB技術教えます
2005年2月23日
ホームページの作り方はHTMLで覚えたものの、CSSはリンクする時に色を変えるとか、背景を変える際に用いたものでした。しかし、昨今ではCSSをフルに活用されたホームページが多い感じがしますので、ここへ記述しておきたいと思います。
さて、CSStはスタイルシートと言って、HTML内のスタイル、デザインや配置、構成を決めるのにHTMLと一緒に用います。
私がこのCSSを本格的に勉強しようと思って購入した教本が
ＨＴＭＬ ＆スタイルシートデザインブック  です。今もまだ勉強中なので傍らに常にある状態が続いてます。この本を元に、当サイトを設計しているわけです。
【←左側にあるコンテンツのところはどうしているのか】
私がやり方を忘れないうちに書いておかなければいけないので、HTMLの事はひとまずおいといておく事にします。文字（以下テキスト）の上にカーソルを合わせると下の絵が自動的に切り替わる方法ですが、用意するものは・・・
- テキストの下のイメージを通常見えているイメージと、マウスをのせた状態のイメージの２通りを用意する。イメージは設定する大きさより少し大きめに作成しておくこと。
- 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の記述が長くなってしまうのを防ぎます。
- 記述した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のタグについては後日勉強しなおします。ではでは。
|
