|
文字に動きをつける方法を解説いたします。
以下はそのサンプルです。
このように、文字に動きをつけたい場合、2つの方法があります。
1. サンプルソース
2. 外部CSS（スタイルシート）を使用したサンプル
尚、サンプルをご利用の際には以下の事を考慮し作成して下さい。
■ <marquee>タグを使用し、
任意の文字をスクロールさせる（目立たせる）事ができます。
■ <marquee>タグ内にdirectionで方向を記述すると、進行方向が変更できます。
<marquee direction="right"> → 左から右へ
<marquee direction="down"> → 上から下へ
■ 青文字で
記述されている箇所は、場合に応じて変更して下さい。
1. サンプルソース
<html>
<head>
<title>文字に動きをつける</title>
</head>
<body>
<table>
<tr>
<td width="200" bgcolor="#000000">
<div style="border-style:
solid;border-width:3px;border-color:#AAAAAA">
<font color="#00FF00">
<marquee>ここに記述した文字が表示され、左へ移動します。</marquee>
</font>
</div>
</td>
</tr>
</table>
</body>
</html>
2. 外部CSS（スタイルシート）を使用したサンプル
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="sample_moji1.css" type="text/css">
<title>文字に動きをつける</title>
</head>
<body>
<table class="waku">
<tr>
<td width="200">
<marquee>ここに記述した文字が表示され、左へ移動します。</marquee>
</td>
</tr>
</table>
</body>
</html>
次に、上記のHTMLファイルと同じ場所へ、外部CSSファイル「sample_moji1.css」を保存して下さい。
尚、このHTMLファイルには、「1. サンプルソース」の青文字部分をCSSファイルに分けて記述する事が出来る為、HTMLソースの容量が軽くなるだけでなく、わかりやすいソースになります。
■ 外部CSSファイル「sample_moji1.css」作成についての補足
＜操作方法＞InternetExplorer の場合
（１）文中の「sample_moji1.css」を右クリックし、表示されたサブメニューより【対象をファイルに保存(A)...】を
選択します。
（２)
『名前を付けて保存』の画面が表示されますので、【保存する場所（I）】を、上記で作成したHTML
ファイルの保存先と同じ場所に指定します。
（３）『名前を付けて保存』の画面で【保存(S)】ボタンをクリックするとダウンロードは終了して、
「sample_moji1.css」は上記で作成したHTMLファイルの保存先と同じ場所に保存されます。
■ 青文字で
記述されている箇所は、場合に応じて変更して下さい。
↑このページのトップに戻る
お問い合わせや設定・使い方の追加などありましたら、
info@cyber-concierge.co.jp まで。
|
