タイプ文字１■　タイプライター１行

●2018/09/19：即時関数で囲んで、グローバル変数を消しました。
こちらは、前回掲載分とJavaScriptはほぼ同じです。
ただ「タイプライター複数行」と同じような記述順位に修正し、装飾もグラデーションや影指定の文字など、最新のCSSを利用しました。
参考にしたタイプライター文字の原本は５・６年生にもわかるやさしいJavaScript（サイト消滅）から。
影指定の文字はrainingから。
背景の線形グラデーションのCSSでの作成方法はBINARYから。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>タイプ文字１■　タイプライター１行</title>

<!--★ここからコピー-->
<style type="text/css"><!--
body{background:#acf;}

/*★タイプ文字の装飾。#Lyidは必須ですが、後はお好みで*/
#Lyid{
/*★フォント指定。PCによって自動選択のフォント幅が違うため。背景を円形ピッタリにしないなら削除*/
font-family:Meiryo,sans-serif;
margin:30px auto;/*★円の左右中央位置指定*/
width:250px;/*★円の横幅*/ 
height:250px;/*★円の縦幅*/
border-radius:50%;/*★角丸(円)指定*/
background:linear-gradient(#630,#fff,#ff8,#000); /*★色の線形グラデーション */
text-align:left; 
font-weight:bold;/*★太字指定*/
font-size:33px;/*★文字サイズ指定*/
color:#fff;/*★文字の色指定*/
line-height: 250px;/*★上記のheightと同じ数値。これで文字の位置が上下の中央になる*/
text-shadow: 3px 3px 3px #865b32,/*★茶色。この行含めて４行が文字の影指定*/
    -2px 2px 1px #000,/*★黒*/
    2px -2px 1px #999,/*★濃い灰色*/
    -2px -2px 1px #fff000;/*★黄色*/
}
--></style>
<!--★コピーここまで。bodyの中にもコピーがあります-->

</head>
<body>

<!--★ここからコピー。下記一行が文章の指定位置。id="Lyid"を必ず記述-->
<div id="Lyid"></div>

<script type="text/javascript"><!--
/*=======================================================================================
タイプライター文字１行：参考サイト　５・６年生にもわかるやさしいJavaScript ★2018/09/19
http://www.sky.sannet.ne.jp/masapine/java_textbox8.html(サイト消滅)
=========================================================================================*/
(function (){   //即時関数で囲んでグローバル変数を消すため、この行はこのままで

var msg="動くJavaScript";　　//★メッセージ内容 
var speed=300; 　　//★文字表示の速さ
var speed2=5000; 　//★打ち終わった後の停止時間　1000=1秒

//指定ここまで----------------------------------------------------------------------------------
function $(id){return document.getElementById(id);}/*document.getElementByIdを簡略化*/
var i=0, len=msg.length;
function Msg(){
$("Lyid").innerHTML=msg.substring(0,i);
if(i<len){ i++; setTimeout(Msg,speed);} else{ i=0; setTimeout(Msg,speed2);}
}
Msg();
}());//即時関数終了
// --> </script>
<!--★ここまでコピー-->

</body>
</html>

タイプ文字１■ タイプライター１行 最終修正日時 : 2018/09/19

　タイプ文字１■　タイプライター１行　　　　最終修正日時 : 2018/09/19