なぜだか見えないよ

ひとりごと

何が見えないのかというと、ソースを書いたときのscriptタグではさんでいるとこ。


例えば

<script type="text/javascript">
<!--

function nantoka(){
	alert("ナントカ");
}

// -->
</script>

これをトップページや日付のページだとちゃんと見えるのだけど、Permalinkからでは空っぽになってしまう現象がおこってしまうようですね。
原因は全くもってわからない。なんで！

innerHTMLって

JavaScript

XHTMLだとFirefoxじゃ動かないことを知った…。
HTMLだといけるんだけど、なんでだこれ。


例えば

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>innerHTML</title>

<script type="text/javascript">
<!--

function inner(){
	test.innerHTML = "インナー";
}

// -->
</script>

</head>

<body onLoad="inner()">

<p id="test"></p>

</body>
</html>

これだとちゃんと「インナー」って出るけど

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>

<script type="text/javascript">
<!--

function inner(){
	test.innerHTML = "インナー";
}

// -->
</script>

</head>

<body onLoad="inner()">

<p id="test"></p>

</body>
</html>

というふうにXHTMLにすると、IEは表示されるけど、Firefoxだとされないわけです。


しょうがないのでdocument.writeでいってみる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>innerHTML</title>

<script type="text/javascript">
<!--

function inner(){
	document.write("<p>インナー</p>");
}

// -->
</script>

</head>

<body>

<script type="text/javascript">
	inner();
</script>

</body>
</html>

これだとFirefoxでもいけた。
ブラウザのあれこれとか大変ですこれ。

ニコニコ動画で「初音ミク」を使って歌わした動画を最近よく見ますが

ひとりごと

ニコニコ動画(RC)‐キーワード検索 : 初音ミク


あえて藤田咲さん(初音ミクの中の人)の出演したアニメのアテレコをさせてみるとか。

VOCALOID2 HATSUNE MIKU

VOCALOID2 HATSUNE MIKU

アニメ「時をかける少女」の実写映画化

ひとりごと

という企画を思いついた。


叔母役は原田知世さん。
真琴は誰がいいかな。

時をかける少女 [DVD]

時をかける少女 [DVD]

id指定したdivボックスのスタイルをいじる

JavaScript

id属性で指定したdivボックスのスタイルシートのプロパティにアクセスするには、例えば位置座標を変えたいって時には

document.getElementById("id名").style.left = X座標;
document.getElementById("id名").style.top = Y座標;

という具合に「getElementById」というものを使うようだ。
簡単に例を作る。

クリックしたらX方向に5ピクセル、Y方向に5ピクセル移動するdivボックス

<html>
<head>
<title>クリックで移動するdivボックス</title>

<script type="text/javascript">
<!--

var x = 0; //X座標初期値
var y = 0; //Y座標初期値

function ido() {
	x = x+5;
	y = y+5;
	document.getElementById("box").style.left = x;
	document.getElementById("box").style.top = y;
}

// -->
</script>

</head>

<body>

<div id="box" style="position:absolute;left:0px;top:0px;width:300px;height:200px;background-color:pink;" onClick="ido()">Box</div>

</body>
</html>

幅300ピクセル、高さ200ピクセル、背景ピンクにして、一応分かり易くしてみた。
これは色々遊べそうだね。