<style TYPE="text/css">
<!--
div {color:#ffddff;
font-family:"ＭＳ 明朝";
font size:100pt;
position:absolute;
top:90pt;
left:40pt;
z-index:-1;}
-->
</style>
上記の赤の部分全部をコピーして<title>〜</title>の
後に貼り付ける。
すなわち
<html>
<head>
<title>ミミズの学校</title>
<style TYPE="text/css">
<!--
div {color:#ffddff;
font-family:"ＭＳ 明朝";
font size:100pt;
position:absolute;
top:90pt;
left:40pt;
z-index:-1;}
-->
</style>
</head>
<body>
〜
ここに本文が入る。
〜
</body>
</html>
□改良点(青色の字は変更可能)
color:#ffddff;--->文字の色
font-family:"ＭＳ 明朝";---->
フォントです。ＭＳ ゴシック等いろいろあります。
font size:100pt;--->文字の大きさ
position:absolute;
top:90pt;--->上から文字を書き始める距離
left:40pt;--->左側からの文字を書き始める距離
z-index:-1;--->重ね合わせの順序。1の時は文字は上。
□利用場所
特に強調したいとき。
記念カウンタ番号のお知らせなどに使うと効果的かも。。
□利用方法
伝えたい文を<div>と</div>の中に入れて好きな場所に貼り付けると良い。
下の例２の赤い部分
例２のタグ
<html>
<head>
<TITLE>スタイルシート</TITLE>
<style TYPE="text/css">
<!--
div {color:#ffddff;
font-family:"ＭＳ 明朝";
font size:100pt;
position:absolute;
top:90pt;
left:40pt;
z-index:-1;}
p {line-height: 150%;}
p {letter-spacing:3px;}
-->
</style>
</head>
<body>
<div>こんにちわ</div>
<center>
<p><font color="cc0000">■</font>スタイルシートを使った例２
</center>
<p>
スタイルシートとは、「ページの見栄え」を定義するための技術です。<p>
今までＨＴＭＬタグを使ってページを作ってきて、「もっと大きさを指定したい」とか「もっと自由に
位置を決めたい」などと思ったことがあると思います。<p>
ＨＴＭＬタグではできなかった簡単な２つの例についてお話をします。<br>
</body>
</HTML>
|
| 