XHTML/CSS・トップ | JavaScript&CSS・目次

●コピー&ペーストして作る1行テキストボックス

 フォーム内の一行テキストボックスに文字を流します。JavaScript とCSSのスタイルシート(style要素)を組み合わせて、誰もがテキスト領域、フォントサイズを自由に調整できるようにしました。メッセージが流れる所要時間、スピードも調整できます。動作確認は、Win IE(Ver.6.0)とNスケープ(Ver.7.1)です。

■ サンプル

  

■ HTML文書にコピー&ペースト↓

<script type="text/javascript">
<!---
var QT = 0;
var sam1 = "      "; //空白を適度な長さに調整します
var sam2 = "ここにメッセージを入力します";
var sam = sam1+sam2;
function fm() {
 if (QT < 1000) {//数字を変更することによりスクロールされている所要時間を変更できます
  QT++;
  document.fm.am.value = sam;
  sam = sam.substring(2,sam.length) + sam.substring(0,2);
  setTimeout("fm()",300)
  //この300を変更することによりスクロールのスピードを調整できます
 }
else { document.fm.am.value = "" }
}
//--->
</script>
<style type="text/css">
<!--
.sample {
 font-size: 1.2em;
 width: 20em;
 height: 1.5em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
}
-->
</style>

■↑解説↓

 <head>〜</head>の間にペーストする。できれば、<title>〜</title>の下へ。どうしても位置がわからない方はブラウザ、メニューバーの「表示」をクリックし、プルダウンメニューから「ソース」または「ページ ソース」をクリックし、位置を確認してください。(実際のソースは多少違いますが)注意する点としては、style要素の書式の真ん中がインデントされていますが、HTML文書に貼り付けると、作成ソフトによってはインデントが動いてしまうことがあります。その結果、スタイルが反映されないことがあります。インデントは半角スペース二つ分です。(上手くいかないときは確認してみてください。)

■body要素へコピー&ペーストする。↓

 <body onload="fm()">

 body要素の開始タグ<body>を上記に変更してください。

■1行テキストボックスをコピー&ペースト↓

<form name="fm"><input type="text" name="am" class="sample"></form>

※<body>〜</body>間の任意の場所へ

■まとめ↓

 ページの配置場所へコピー&ペーストして完了です。取りあえず、動作を確認しましょう。Win XPのIEでService Pack2を適用されている方はブラウザを立ち上げたときに、警告のダイアログボックスが表示されるはずです。ブラウザ上部の情報バーにポイントした後、右クリックして「ブロックされているコンテンツを許可」を選択し、そのまま実行してください。これは自分のパソコン上のことで、サイトへHTMLファイルをアップロードするか、または、ほかのブラウザ利用ならば警告は表示されません。

■変更する

 JavaScriptのほうはスクロールされるメッセージの表示時間とスピードを変更するだけなので、変更個所はソース内のコメントを参考にしてください。また、ソースはそのまま無料でお使いいただけますが、QT、sam、sam1、sam2、fm、amは作者の任意で違う文字に変えられます。使える文字は半角英数字の大文字・小文字です。(JavaScriptで使われるキーワードや予約語除く)

 1行テキストボックスの幅、高さ、フォントサイズ、上下のパディング領域が変更できます。パディング(padding)とは流れる文字列とテキストボックスのへりとの間の空間のことです。適度にパディングがあったほうが見やすくなります。変更は以下のCSSの書式の値を変更します。

<style type="text/css">
<!--
.sample {
 font-size: 1.2em;
 width: 20em;
 height: 1.5em;
 padding-top: 0.2em;
 padding-bottom: 0.2em;
}
-->
</style>

 それぞれ、font-sizeがフォントサイズ、widthがテキストボックスの横幅、heightが高さ、padding-topがメッセージの上の空間、padding-bottomが下の空間を意味しています。高さ(height)とパディング(padding)は同時に指定したほうが良いようです。ひとつだけ指定しても結果はよくありませんでした。(確認してみてください。)単位にここではem(エム)を使っていますが、そのほかの単位も使えます。長さを表す単位付きの数値ですが、パーセンテージ(〜%)も使えます。それぞれの値を変更し、調整してみてください。また、sampleはクラス名です。任意でそのほかの文字に変更できます。使える文字は半角英数字の小文字となります。そのほかも含め、詳細と応用についてはスタイルシートのコーナーを参照にしてください。

XHTML/CSS・目次 | JavaScript&CSS・目次

Copyright (C) 2005-2007 http://www.xml.vc/