トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成レッスン14]🌹レッスン14🌹
ｔｅｘｔ－ｓｈａｄｏｗでテキストに影を付ける方法他
1. ｔｅｘｔ－ｓｈａｄｏｗでテキストに影を付ける方法
🌻パソコンのブラウザはGoogle Chromeを使用しています。
テキストに影を付けるには、ｔｅｘｔ－ｓｈａｄｏｗプロパティを使用します。
当サイトの大見出し＜ｈ1＞も、このｔｅｘｔ－ｓｈａｄｏｗプロパティを使用しています。
ＣＳＳ３では、インターネットエクスプローラー9以前は非対応の様ですが、他のブラウザではほぼ対応しています。
値には、
- Ｘ方向の影の値（Ｘ方向の影の距離をｐｘ数で指定）
- Ｙ方向の影の値（Ｙ方向の影の距離をｐｘ数で指定）
- ぼかしの値（ぼかしの距離をｐｘ数で指定）
- 色の値（影の色を指定）
大見出しにｔｅｘｔ－ｓｈａｄｏｗを付けてみましょう！
【ＨＴＭＬ】
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>初めてのWebサイトづくり</title>
<link rel="stylesheet" href="style.css" media="screen,print">
</head>
<body>
<h1>ｔｅｘｔ－ｓｈａｄｏｗ</h1>
<p>Ｘ方向にマイナスの値を指定すると、影が左方向になります。</p>
<p>Ｙ方向にマイナスの値を指定すると、影が上方向になります。</p>
</body>
【ＣＳＳ】
@charset "utf-8"
body {
color: black;
}
h1 {
color: #808;
text-align: center;
font-size: 40px;
font-family:"Comic Sans MS","Meiryo","Avenir","Corbel","Osaka","fantasy";
font-weight: bold;
text-shadow: #f0f 20px 10px 8px;
padding: 0;
}
p{
text-align: center;
}
2. ロールオーバーした時に光るように表示する方法
🌻Ｘ方向Ｙ方向の距離を0にすると、リンク要素にマウスを重ねた時テキストが光ったように表示させることができます。
【ＨＴＭＬ】
<body>
<div id="gotop">
<a href="index.html">ＴＯＰページ</a>
</div>
</body>
【ＣＳＳ】
p{
text-align: center;
}
#gotop{
text-align: center;
font-size: 22px;
}
#gotop a:hover {
text-shadow: 0px 0px 10px #3cf;
}
ＴＯＰページのリンクにカーソルを重ねると、テキストが指定した色に光ります。
ＴＯＰページのリンクをクリックすると、レッスン４で作ったｉｎｄｅｘ.ｈｔｍｌが表示されます。
上記の画像のようになったかな？
★まとめ
いかがでしたか？大見出しが目立つので、どんな内容のページかすぐわかりますね！
色を変えてみたり、文字の大きさを変えてみたりすると、また違ったイメージがＣＳＳ３では、作ることができます。
お好みで試してみてくださいね(#^.^#)
次回レッスン15は、「ページ内リンクを貼る方法他」をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP