これは、htmlとcssとJavascriptを駆使して動的に静止画の動化をしようとする、試みのスクリプトである。
実践的に、プログラムの謎解きを収録した実話で、その証拠を示すものとする。
ここまで来ると、ぺらぺらとめくるだけでは済まず、詳細な内容を検討する必要があり２部に分割して、載せる事としました。
1部 htmlとcss
studio.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<LINK rel="SHORTCUT ICON" href="imge/name.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="たっちゃん,studio。">
<title>studio</title>
<link rel="stylesheet" href="studio.css" type="text/css">
<!-- styleダイレクト指定の2つした -->
<style>
body {background-image: url(imge/bgsc_1.png);}
/* styleダイレクト指定の一つした*/
</style>
<script>
//スクリプトが読み込るか確認 確認で読み込まれてはいない。
if(window.innerWidth< 455 || window.innerHeight < 375){
alert("ページが小さ過ぎます。1");
// document.getElementById('flex_top').innerHTML = "<h1>当コンテンツの有効外です。</h1>";
}
</script>
<!--<script src="faill_check.js"></script>-->
<script src="studio.js" defer></script>
<!-- styleダイレクト指定の一つ上 -->
</head>
<body onload="mystrto();">
<!-- HP ご案内 https://tattyan0-0.sakura.ne.jp/etc/index.html downlode zip-->
<!-- stato studio -->
<div id="flex1">
<div class="content1">
<!-- 1 gloop image,video base asist image -->
<div id="box01">
<table><tr><td id="my1td1"><div id="my1d1"></div></td><td></td></tr><tr><td></td><td><div id="my1"><img src="imge/my_img.jpg" width="640" alt="イメージがありません"></div></td><tr></table>
</div>
<div id="box01_2">
<table><tr><td id="my1_2td1"></td><td></td></tr>
<tr><td></td><td><div id="my1_2"><table class="im1_2"><tr><td> <br><br></td></tr></table></div></td></tr></table>
</div>
<!-- 2 gloop image base asist -->
<div id="box02">
<table><tr><td id="my2td1"></td><td></td></tr>
<tr><td></td><td><div id="my2"><img src="imge/gall.png" width="128" height="128"></div></td></tr></table>
</div>
<div id="box02_2">
<table><tr><td id="my2_2td1"></td><td></td></tr>
<tr><td></td><td><div id="my2_2"></div></td></tr></table>
</div>
<!-- 3 gloop image base asist -->
<div id="box03">
<table><tr><td id="my3td1"></td><td></td></tr>
<tr><td></td><td><div id="my3"><img src="imge/man1.png" width="128" height="128"></div></td></tr></table>
</div>
<div id="box03_2">
<table><tr><td id="my3_2td1"></td><td></td></tr>
<tr><td></td><td><div id="my3_2"></div></td></tr></table>
</div>
<!-- 4 gloop text 0to台紙 1totext1 2totext2 -->
<div id="box04">
<table><tr><td id="my4td1"></td><td></td></tr><tr><td></td><td><div id="my4"></div></td></tr></table>
</div>
<div id="box04_1">
<table><tr><td id="my4_1td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_1"> <mark><font size="6"><b>テキスト</b>を<font color="#f00"><b>変</b>え</font>られる。</font></mark> </div>
<!-- font-size:20px; text-shadow: 水平方向の距離 垂直方向の距離 影のぼかし半径 影の色; -->
</td></tr></table>
</div>
<div id="box04_2">
<table><tr><td id="my4_2td1"></td><td></td></tr><tr><td></td><td>
<div id="my4_2"></div></td></tr></table>
</div>
<!-- top mask infomatin-->
<div id="box05">
<table border="1" class="teb_b_c"><tr><td id="my5td1"><div id="my5d1"></div></td><td id="my5td2"><div id="my5d2"></div></td><td id="my5td3"><div id="my5d3">16:9</div></td></tr>
<tr><td id="my5td4"></td><td id="my5td5"><div id="my5_1"><table><tr><td></td></tr></table></div></td><td id="my5td6"><div id="my5d6">0000</div></td></tr>
<tr><td id="my5td7"></td><td id="my5td8"></td><td id="my5td9"></td></tr></table>
</div>
</div>
<div class="content2">
<div id="no_display"></div>
コントロール <input type="button" value=" ロック " onClick="rook_b();"><br>
<form>
<input type="button" value=" Relode " onClick="Relode();">
<input type="button" value=" Stato " onClick="Stato1();">
<input type="button" value=" Pause " onClick="Pause();">
<input type="button" value=" Re_Stato " onClick="Re_Stato();">
</form>
<hr>
<form name="my_form_0">
タイプ
<input type="button" value="初期化" onclick="init_stato();"><br>
<input type="radio" id="ra_g1_1" checked onchange="radio_glope1(1);">demo
<input type="radio" id="ra_g1_2" onchange="radio_glope1(2);">non
<input type="radio" id="ra_g1_3" onchange="radio_glope1(3);">readプレー<br>
比率<br>
<input type="radio" id="ra_g2_1" checked onchange="radio_glope2(1);">16:9
<input type="radio" id="ra_g2_2" onchange="radio_glope2(2);">9:16
<input type="radio" id="ra_g2_3" onchange="radio_glope2(3);">1:1<br>
サイズ <span id="dis_size_wh">640 * 360</span><br>
<input type="radio" id="ra_g3_1" onchange="radio_glope3(1);">1280 720(x)x<br>
<input type="radio" id="ra_g3_2" onchange="radio_glope3(2);">1088 612(450 800)1040*780(4:3)<br>
<input type="radio" id="ra_g3_3" onchange="radio_glope3(3);">720 405(405 720)<br>
<input type="radio" id="ra_g3_4" checked onchange="radio_glope3(4);">640 360(360 640)<br>
<input type="radio" id="ra_g3_5" onchange="radio_glope3(5);">320 180(180 320)
<input type="radio" id="ra_g3_6" onchange="radio_glope3(6);">free<br>
width<input type="textbox" size="2" value="100" id="tx_wid" onchange="text_3_w();">
height<input type="textbox" size="2" value="100" id="tx_hi" onchange="text_3_h();"><br>
<font size="2">mini(max) 100*100 (1280*800)以内に。</font><br>
再生<br><a name="my_0"></a>
<input type="checkbox" checked onchange="chec_g4_1(checked);">Video S off
<input type="checkbox" onchange="chec_g4_2(checked);">audio S off
<input type="checkbox" onchange="chec_g4_3(checked);">予備
</form>
<table width="100%"><tr><td width="60%">
<label class="my_1"><!--<label class="my_1" onclick="chk0();">-->
<span class="my_1">Stop.pop_up表示</span>
<input type="checkbox" name="checkbox1" class="my_1" onclick="chk1();">
<div id="popup">
<!--<form name="my_form_0"> 指定するとクリックが効かなくなる-->
<select name="my_sel1" id="my_selct" onchange="my_selct();">
<option value="b_none">bouder_none</option>
<option value="b_mini">bouder_mini</option>
<option value="b_mide">bouder_midoru</option>
<option value="b_rage">bouder_rage</option>
</select>
<select name="my_sel2" id="my_selct2" onchange="my_selct2();">
<option value="b_888">bouder_888</option>
<option value="b_fff">bouder_fff</option>
<option value="b_000">bouder_000</option>
<option value="b_f00" selected>bouder_f00</option>
<option value="b_0f0">bouder_0f0</option>
<option value="b_00f">bouder_00f</option>
<option value="b_f0f">bouder_f0f</option>
<option value="b_0ff">bouder_0ff</option>
<option value="b_ff0">bouder_ff0</option>
</select>
<select name="my_sel3" id="my_selct3" onchange="my_selct3();">
<option value="bk_none">back_none</option>
<option value="bk_888">back_888</option>
<option value="transparent">transparent</option>
<option value="bk_fff">back_fff</option>
<option value="bk_000">back_000</option>
<option value="bk_f00">back_f00</option>
<option value="bk_0f0">back_0f0</option>
<option value="bk_00f">back_00f</option>
<option value="bk_f0f">back_f0f</option>
<option value="bk_0ff">back_0ff</option>
<option value="bk_ff0">back_ff0</option>
</select><br>
<select name="my_sel4" id="my_selct4" onchange="my_selct4();">
<option value="front_only">front_only</option>
<option value="back_only">back_only</option>
<option value="image_none">image_none</option>
<option value="front_back">front_back</option>
<option value="img_video">img_video</option>
<option value="in_audio">in_audio</option>
<option value="to_text">to_text</option>
</select>
<select name="my_sel3_5" id="my_selct3_5" onchange="my_selct3_5();">
<option value="isr">img_sen_real</option>
<option value="ish">img_sen_half</option>
<option value="isq">img_sen_quar</option>
<option value="blr">bottom_left_r</option>
<option value="blh">bottom_left_h</option>
<option value="blq">bottom_left_q</option>
<option value="brr">bottom_right_r</option>
<option value="brh">bottom_right_h</option>
<option value="brq">bottom_right_q</option>
</select>
<select name="my_sel5" id="my_selct5" onchange="my_selct5();">
<option value="omax">op_1_0</option>
<option value="o75">op_0_75</option>
<option value="o50">op_0_50</option>
<option value="o25">op_0_25</option>
</select><br>
<select name="my_sel6" id="my_selct6" onchange="my_selct6();">
<option value="video_none">video_none</option>
<option value="video_1">1</option>
<option value="video_2">2</option>
<option value="video_3">3</option>
<option value="audio_none">audio_none</option>
<option value="audio_1">1</option>
<option value="audio_2">2</option>
<option value="audio_3">3</option>
</select>
<select name="my_sel7" id="my_selct7" onchange="my_selct7();">
<option value="imge/cyat.png">cyat</option>
<option value="imge/gall_1.png">gall_1</option>
<option value="stnbay">stanbay</option>
<option value="play">plal</option>
<option value="stpo">stop</option>
<option value="pause">pause</option>
</select>
<select name="my_sel7_5" id="my_selct7_5" onchange="my_selct8();">
<option value="none">bak</option>
<option value="1_teble">1_T</option>
<option value="1_image">1_I</option>
<option value="1_video">1_V</option>
</select>
<select name="my_sel8" id="my_selct8" onchange="mypop_test();">
<option value="none">test_mode</option>
<option value="imge">imge</option>
<option value="table_only">teble_only</option>
<option value="back_img">back_img</option>
<option value="back_front">back_front</option>
<option value="video">video</option>
<option value="audio">audio</option>
<option value="text">text</option>
<option value="spare">spare</option>
</select><br>
<!--</form>-->
<table><tr><td width="170" height="170">
<table border="1" class="sim1"><tr><td class="simtd1"><div id="my_i_01"><img src="imge/cyat.png" width="170px" height="170px" alt="ねこ"></div></td></tr></table>
<font size="2"><input type="checkbox" name="checkbox3" id="my_111">自在
<input type="checkbox" name="checkbox2" id="my_11" onclick="chk2();">上
<input type="checkbox" name="checkbox4" id="my_1v" checked>動
<input type="checkbox" name="checkbox5" id="my_v">右
<br></font>
</td><td>
<div style="color: #fff;">
<form name="my_form_1"></form>
<font size="2"><input type="checkbox" name="checkbox6" id="my_v1">表挿入<br></font>
<select name="ray_sel" id="ray_selct">
<option value="#my1td1">box_1</option>
<option value="#my1_2td1">box_1_2</option>
<option value="#my2td1">box_2</option>
<option value="#my2_2td1" selected>box_2_2</option>
<option value="#my3td1">box_3</option>
<option value="#my3_2td1">box_3_2</option>
<option value="#my4td1">box_4</option>
<option value="#my4_1td1">box_4_1</option>
<option value="#my4_2td1">box_4_2</option>
</select><br>
<font size="2">w0<input type="text" name="w0_w" id="w0" size="2" value="100">*<br>
h0<input type="text" name="h0_h" id="h0" size="2" value="100"><br>
w1<input type="text" name="w1_w" id="w1" size="2" value="170">*<br>
h1<input type="text" name="h1_h" id="h1" size="2" value="170"><br></font>
<input type="checkbox" name="my_1c" id="my_1c">書込<br>
<input type="button" value="送信" onclick="chk_3();"> <a href="#my_a1" id="a1_href" onclick="my_a1_hr();">text.</a>
</form>
</div>
</td></tr></table>
<!--<form name="my_form_2">-->
<input type="file" id="selfile1" accept="imge/.png, imge/.jpg, imge/.gif" onchange="chk_4(value);" /><br>
<span id="lod_fs"> in faill:</span><span id="lod_fs2">no_seting</span><br>
<input type="text" name="faill_in0" id="faill_in0" value="ここ"><!--errmessage2-->
<input type="button" value="ChangeCheck" id="b_txt_check" onclick="bu_txt_check();"><br>
<span id="lod_is"> imagi :</span><span id="lod_is2">no_seting</span><br>
<span id="lod_bs"> backe :</span><span id="lod_bs2">no_seting</span><br>
<!--</form>-->
<font size="2"><a href="#my_0" id="a_href">Scroll down the base html to see the text.</a></font><br>
<table><tr><td width="200">
<label class="my_3">
<span class="my_3">pop_up表示</span>
<input type="checkbox" name="checkbox3_1" class="my_3">
<div id="popup3">
<font size="2"><input type="checkbox" name="dis_pop3" id="dis_pop3">自在</font>
<font size="1"> FaileNeme:</font>
<input type="text" name="my3_pop" id="my3_pop" size="20" value="imge/my_img.jpg">
<font size="2"><font color="#0f0">layer:<span id="my3_pop_raydis"></span> </font><font color="#fff">
to action:</font><font color="#ff0"><span id="my3_pop_ste0"></span></font></font>
<form name="my_form_3"><!--it form in form-->
<font size="1">
<select name="model_sel" id="model_sel">
<option value="none" selected>none</option>
<option value="imge">imge</option>
<option value="video">video</option>
<option value="audio">audio</option>
<option value="img_tex">img_txt</option>
<option value="txt_only">txt only</option>
<option value="all">test all</option>
</select><div id="selectValue" style="display: inline;"></div>
<select name="mo_size" id="mo_size">
<option value="free" selected>free</option>
<option value="1:1">1:1</option>
<option value="2:3">2:3</option>
<option value="3:4">3:4</option>
<option value="9:16">9:16</option>
<option value="16:9">16:9</option>
</select>
<!-- div で改行が入ったり入らなかったりするからやらないとわからない。-->
始<input type="text" name="mo_size_w0" id="mo_size_w0" size="2" value="32">
<input type="text" name="mo_size_h0" id="mo_size_h0" size="2" value="32">
終<input type="text" name="mo_size_w1" id="mo_size_w1" size="2" value="640">"+wo"
<input type="text" name="mo_size_h1" id="mo_size_h1" size="2" value="360">"+h0"<br></font>
<hr>
<div id="mod_s">
<!-- patan 1 purogrambul select-->
<!-- patan 0 -->
<select name="mod0_pat" id="mod0_pat">
<option value="none" selected>none</option>
<option value="class">class</option>
<option value="style">style</option>
</select><div id="my3_pop_ste1" style="display: inline;"></div>
<!-- patan 1 -->
<select name="mod1_pat" id="mod1_pat">
<option value="vid_1" selected>vid_1</option>
<option value="vid_2">vid_2</option>
<option value="vid_3">vid_3</option>
</select><div id="my3_pop_ste2" style="display: inline;"></div>
<select name="mod1_act" id="mod1_act">
<option value="stop_play" selected>stop_play</option><!-- stop-play が正解だが演算避けた -->
<option value="play">play</option>
<option value="pause">pause</option>
<option value="stop">stop</option>
</select><div id="my3_pop_ste3" style="display: inline;"></div>
<br><input type="file" id="selfile3_1" accept="imge/.mp4" onchange="mod_fail_1(value);" />
<div id="errmessage3">ここ</div>
<!-- patan 2 -->
<select name="mod2_pat" id="mod2_pat">
<option value="aud_1" selected>aud_1</option>
<option value="aud_2">aud_2</option>
<option value="aud_3">aud_3</option>
</select><div id="my3_pop_ste4" style="display: inline;"></div>
<select name="mod2_act" id="mod2_act">
<option value="read_in" selected>read_in</option>
<option value="play">play</option>
<option value="pause">pause</option>
<option value="stop">stop</option>
</select><div id="my3_pop_ste5" style="display: inline;"></div>
<br><input type="file" id="selfile3_2" accept="voise/.mp3, voise/.wav" onchange="mod_fail_2(value);" />
<div id="errmessage4">ここ</div>
<!-- patan 3 -->
tabl patan<select name="tabl1_pat" id="tabl1_pat">
<option value="tabl1_1" selected>tabl_1</option>
<option value="tabl1_2">tabl_2</option>
<option value="tabl1_3">tabl_3</option>
</select><div id="my3_pop_ste6" style="display: inline;"></div>
<!-- patan 4 -->
<select name="txt_pat" id="txt_pat">
<option value="txt_1" selected>txt_1</option>
<option value="txt_2">txt_2</option>
<option value="txt_3">txt_3</option>
</select><div id="my3_pop_ste7" style="display: inline;"></div>
選択<br>
</div>
<hr><font size="2">
1st <input type="text" name="mod_t1" id="mod_t1" size="60" value="100"><br>
2nd <input type="text" name="mod_t2" id="mod_t2" size="60" value="100"><br>
補足<input type="text" name="mod_t3" id="mod_t3" size="60" value="100"><br></form>
<input type="button" name="pop3_w" value="書込" id="pop3_w" onclick="pop3_work();">
<input type="button" name="pop3_d" value="this del" id="pop3_d" onclick="pop3_del();">
NO.<input type="text" name="mod_no" id="mod_no" size="2" value="0">
Commnt:<input type="text" name="mod_come" id="mod_come" size="35" value="100"><br>
</form>
</div>
</label></td><td>
<input type="button" value="main" onclick="pop1_or_2();"></td></tr></table>
</div>
</label>
</td><td>
<label class="my_2">
<span class="my_2">controls</span>
<input type="checkbox" name="checkbox2_1" class="my_2">
<div id="popup2">
<form name="my_form_3">
<font size="2">
<input type="checkbox" name="dis_pop2" id="dis_pop2">自在
<input type="button" value="Editer" onclick="step_editer();">
<input type="checkbox" onclick="rook_c();">flexible Rook
</font><br>
<input type="button" value="Cller" onclick="stp0();">
<input type="button" value="SetC" onclick="stp1();">
<input type="button" value="SetT" onclick="stp2();">
<input type="button" value="Play" onclick="stp3();">
<input type="button" value="Pause" onclick="stp4();">
<font size="2">step
<input type="text" name="step" id="step" size="4" value="0">
<input type="text" name="step_t" id="my_tim_dis" size="4" value="0">秒</font><span id="my_you_dis">要素数</span><br>
<input type="button" value="Up" onclick="step_up();">
<input type="button" value="Down" onclick="step_down();">
<input type="button" value="End" onclick="step_end();">
<input type="button" value="書込み" onclick="step_ok();">
<input type="button" value="削除" onclick="step_del();">
<input type="button" value="挿入" onclick="step_ins();">
<input type="button" value="追加" onclick="step_add();">
<font size="2" class="t_dai"> work </font>
<input type="text" name="in_work" id="in_work" size="30" value="">
<input type="text" name="in_work2" id="in_work2" size="30" value=""><br>
<font size="2" class="t_dai"> value </font>
<input type="text" name="in_value" id="in_value" size="60" value=""><br>
<font size="2" class="t_dai"> come </font>
<input type="text" name="in_come" id="in_come" size="60" value=""><br>
<span style="color: #fff;">二行目</span><br>長いのを書いていくとどうなるのか。
</form>
<span id="my_i_02">kore</span>
</div>
</label>
</td></tr></table>
<hr>
<!--<div id='audio0'>0<br><audio src="voise/myout2_0.wav" type="audio/wev" controls autoplay></audio></div>-->
<div id='audio1'>1<br><audio src="voise/" controls stop-play muted></audio></div>
<div id='audio2'>2<br><audio src="voise/" controls muted></audio></div>
<div id='audio3'>3<br><audio src="voise/" controls muted></audio></div>
</div>
</div>
<div id="flex2">
<div class="content3">
<form name="my_form_4">
my_my1<input type="text" name="myf4_1" id="myf4_1" size="120" value="imge/my_img.jpg"><br>
my_my2<input type="text" name="myf4_2" id="myf4_2" size="120" value="imge/my_img.jpg"><br>
my_my3<input type="text" name="myf4_3" id="myf4_3" size="120" value="imge/my_img.jpg"><br>
my_my4<input type="text" name="myf4_4" id="myf4_4" size="120" value="imge/my_img.jpg"><br>
my_my5<input type="text" name="myf4_5" id="myf4_5" size="120" value="imge/my_img.jpg"><br>
<input type="button" value="読込" onclick="my4_1();">
</form>
<table border="1"><tr><td width="256"><div id="video1">video_in1</div></td>
<td width="256"><div id="video2">video_in2</div></td>
<td width="256"><div id="video3">video_in3</div></td></tr>
<tr><td><div id="img_viw1"> </div></td>
<td><div id="img_viw2"> </div></td>
<td><div id="img_viw3"> </div></td></tr>
</table><br>
高速読込エリア<br>
</div>
</div>
<div id="flex3">
<div class="content4">
<div id="test_my0">test0</div>
<hr><a name="my_a1"></a>
<b>form</b><br>
<form name="myfile">
<input type="button" id="but_faile1" value="テキストリード 1" onclick="button_fail_1();">
<input type="button" id="but_faile2" value="テキストリード 2" onclick="button_fail_2();">
<input type="file" id="selfile" accept="text/.txt" />
<div id="errmessage"></div>
<textarea name="texta" id="mytextr"></textarea>
</form>
<!-- <object class="obje" data="./text/steping.txt" type="text/plain"></object><!--ディレクトリを与えて読み込む場合 -->
<hr>
<!--<span id="my_inna_text" onclick="alert('it chenge!!');">てきすと<span><br>-->
<form name="my_form_5">
<input type="button" value="テキストリード to arrey" onclick="read();">
<button id="download" onclick="down_faile();">テキストファイルをダウンロード</button><br>
<textarea name="texta2" id="mytextr2"></textarea><br>
</form>
<form name="my_form_6">
<hr>
<input type="button" value="テキストリード to arrey" onclick="read2();"><br>
<textarea name="texta3" id="mytextr3"></textarea><br>
</form><!--font size-->
<font size="2">text is max6 line:<div name="my_in_a_text" id="my_in_a_text"></div></font>
<hr>
<p id="mfl">text</p>
<p id="my6_1"><font size="6" color="#f0f">あ</font><font size="1">っ</font><font size="3">かわった</font></p>
</div>
</div>
<div id="flex_end">
<div class="content_end">
<!-- end -->
<hr>
<div style="text-align: center;">
<p>tattyan(<a href="https://tattyan0-0.sakura.ne.jp/" name="administrator" target="~_blank">たっちゃん</a>) by 2023/11/14- </p>
</div>
</div>
</div>
</body>
<!--<script src="studio2.js" defer></script>-->
</html>
stdio.css
@charset "UTF-8";
/* ver. 1_00(test) */
/* 2024/03/24- */
/* test */
body {
margin: 0px;
background:#ffbbff;
}
#a_href:link {
color: #0000ff;
text-decoration: none;
}
#a_href:visited {
color: #0000ff;
text-decoration: none;
}
#a1_href:link {
color: #0000ff;
font-size: small;
text-decoration: none;
}
#a1_href:visited {
color: #0000ff;
font-size: small;
text-decoration: none;
}
/* <font class="f1">あ</font><font class="f2">い</font><font class="f1">う</font><font class="f2">え</font>お<br>font にクラスが使える。<br> */*/
.f1 {
color: violet;
font-size: 20px;
}
.f2 {
color: forestgreen;
font-size: 25px;
}
.f3 {
color: #ff0000;
font-size: 30px;
/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
text-shadow:
2px 2px 0px #fff, -2px -2px 0px #fff,
-2px 2px 0px #fff, 2px -2px 0px #fff,
2px 0px 0px #fff, -2px 0px 0px #fff,
0px 2px 0px #fff, 0px -2px 0px #fff;
}
/* まーかー の例 */
.mk1 {
background-color: #80ff80;
color: #ffffff;
padding: 14px;
}
.mk2 {
background: linear-gradient(transparent 40%, #FFF100 0%);
}
/* 背景画像の設定 */
.im1 {
width: 300px;
height: 170px;
background-color: rgba(255, 255, 255, 0.6); /* 透過の設定 */;
}
.im2 {
width: 300px;
height: 170px;
background-image: url("imge/R (1).jpg");
background-position: center; /* 画像の位置を中央に設定 */
background-repeat: repeat; /* 画像の繰り返し */
opacity: 0.6; /* 透過の設定 */;
}
.im3 {
background-position: center; /* 画像の位置を中央に設定 */
background-repeat: no-repeat; /* 画像の繰り返し */
/* 透過の設定 */;
}
.im4 {
text-align: center;
}
.t_box1 {
background-color: #80ff80;
color: #ffffff;
padding: 3px;
border: 1px #00f;
}
.t_box1_2 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
.t_box2 {
background-color: #80ff80;
color: #ffffff;
padding: 3px;
border: 1px #00f;
}
.t_box2_2 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
.t_box3 {
background-color: #80ff80;
color: #ffffff;
padding: 3px;
border: 1px #00f;
}
.t_box3_2 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
.t_box4 {
background-color: #80ff80;
color: #ffffff;
padding: 3px;
border: 1px #00f;
}
.t_box4_1 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
.t_box4_2 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
/* 2024/03/26-27 */
.sim1 {
background-color: #80ff80;
color: #ffffff;
padding: 3px;
border: 1px #00f;
}
.simtd1 {
background-color: #60aa60;
border: 0px solid #00f;
opacity: 1;
}
#my_selct {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct2 {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct3 {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct4 {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct5 {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct6 {/*文字の色*/
color: #000;
background-color: #666;
}
#my_selct7 {/*文字の色*/
color: #000;
background-color: #666;
}
/* 2024/04/27 */
#faill_in0[type="text"] {
width: 70%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#b_txt_check {
background-color: #ff0000;
color: #ffffff;
font-size: xx-small;
border: 2px solid #ccc;
border-radius: 2px;
padding: 2px;
margin: 2px;
}
#lod_fs {
color: #001aff;
font-size: x-small;
}
#lod_fs2 {
color: #fff;
font-size: x-small;
}
#lod_is {
color: #ffee00;
font-size: x-small;
}
#lod_is2 {
color: #ffee00;
font-size: x-small;
background-color: #666;
}
#lod_bs {
color: #ffee00;
font-size: x-small;
}
#lod_bs2 {
color: #ffee00;
font-size: x-small;
background-color: #666;
}
/* 2024/04/27 */
#flex1 {
display: flex;
}
#flex2 {
display: flex;
}
#flex3 {
display: flex;
}
#flex_end {
display: flex;
}
.content1 {
float: left;
background-color: #dcffb8;
border: 5px solid #5abbe4;
padding: 0px;
width: 1400px;/* *1280+32+64 *720+32*10 */
height: 840px;
justify-content: flex-start;
}
.content2 {
float: left;
border: 5px solid #a1d9f1;
padding: 0px;
width: 320px;
height: 840px;
justify-content: flex-end;
}
.content3 {
float: left;
padding: 32px;
width: 100%;
justify-content: flex-end;
}
.content4 {
float: left;
padding: 32px;
width: 100%;
/*justify-content: flex-start;*/
justify-content: flex-end;
}
.content_end {
float: left;
padding: 32px;
width: 100%;
justify-content: flex-end;
}
/* 2024/03/24- */
#test_my0 {
color: red;
}
/* box01 gloop back */
#box01 {
background-color: #8080ff;
position: fixed;
top: 0;/* タグによる位置の既定の位置に配置無視 */
left: 0;/* 無視 */
/*width: 64px;
height: 64px;*/
}
#my1td1 {
width: 34px;
height: 34px;
}
#my1td3 {
width: 32px;
}
#my1 {
width: 640px;
height: 360px;
background-color: #5abbe4;
}
#box01_2 {
position: fixed;
top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
left: 0;/* 既定の位置 */
}
#my1_2td1 {
width: 64px;
height: 64px;
}
/* box02 gloop */
#box02 {
/*background-color: #ff6a00;*/
position: fixed;
top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
left: 0;/* 既定の位置 */
/*width: 64px;
height: 64px;*/
}
#my2td1 {
width: 60px;
height: 280px;
}
#box02_2 {
position: fixed;
top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
left: 0;/* 既定の位置 */
}
#my2_2td1 {
width: 1px;
height: 1px;
}
/* box03 gloop */
#box03 {
/* background-color: #ffd800; */
position: fixed;
top: 0;/* タグによる位置の 絶対座標の位置 スクロール*/
left: 0;/* スクロール */
/*width: 64px;
height: 64px; */
}
#my3td1 {
width: 550px;
height: 280px;
}
#box03_2 {
position: fixed;
top: 0;/* タグによる位置の 相対位置に配置既定の位置 */
left: 0;/* 既定の位置 */
}
#my3_2td1 {
width: 1px;
height: 1px;
}
/* box04 gloop */
#box04 {
/* background-color: #26b138;*/
position: fixed;
top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
left: 0;/* 同じ位置 */
/* width: 58px;
height: 58px; */
}
#my4td1 {
width: 1px;
height: 1px;
}
#my4 {
/*background-color:rgba(127,127,255,1);*/
/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
font-size: large;
/* text-shadow:
2px 2px 0px #fff, -2px -2px 0px #fff,
-2px 2px 0px #fff, 2px -2px 0px #fff,
2px 0px 0px #fff, -2px 0px 0px #fff,
0px 2px 0px #fff, 0px -2px 0px #fff;*/
}
#box04_1 {
/* background-color: #26b138;*/
position: fixed;
top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
left: 0;/* 同じ位置 */
/* width: 58px;
height: 58px; */
}
#my4_1td1 {
width: 200px;
height: 350px;
}
#my4_1 {
background-color:rgba(255,127,255,0.5);
/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
text-shadow:
2px 2px 0px #fff, -2px -2px 0px #fff,
-2px 2px 0px #fff, 2px -2px 0px #fff,
2px 0px 0px #fff, -2px 0px 0px #fff,
0px 2px 0px #fff, 0px -2px 0px #fff;
}
#box04_2 {
/* background-color: #26b138;*/
position: fixed;
top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
left: 0;/* 同じ位置 */
/* width: 58px;
height: 58px; */
}
#my4_2td1 {
width: 420px;
height: 310px;
}
#my4_2 {
/* text-shadowを複数回使って文字の周りを四方八方に1周させている状態です。上、右、下、左、左上、右上、右下、左下に1pxのぼやけない影を指定しています。 */
text-shadow:
2px 2px 0px #fff, -2px -2px 0px #fff,
-2px 2px 0px #fff, 2px -2px 0px #fff,
2px 0px 0px #fff, -2px 0px 0px #fff,
0px 2px 0px #fff, 0px -2px 0px #fff;
}
/* box05 gloop */
#box05 {
/* background-color: #26b138;*/
position: fixed;
top: 0;/* タグによる位置の 絶対座標の位置 同じ位置*/
left: 0;/* 同じ位置 */
}
#my5td1 {
background-color: #1995ee;
width: 30px;
height: 30px;
}
#my5td2 {
background-color: #1995ee;
}
#my5td3 {
background-color: #1995ee;
width: 64px;
}
#my5td4 {
background-color: #1995ee;
}
#my5td5 {
width: 640px;
height: 360px;
}
#my5td6 {
background-color: #1995ee;
}
#my5td7 {
background-color: #1995ee;
height: 64px;
}
#my5td8 {
background-color: #1995ee;
}
#my5td9 {
background-color: #1995ee;
}
.teb_b_c { /* topside */
background-color: transparent;/*透明色*/
/* position: fixed;
top: 0; タグによる位置の既定の位置に配置無視
left: 0; 無視 */
/*width: 64px;
height: 64px;*/
border: 2px solid #333399;
}
/*pop_up1 表示させたいコンテンツのレイアウトと位置*/
#popup {
width: 340px;
/* line-height: 100px;*/
background: #333;
padding: 10px 10px;
vertical-align: text-top;
box-sizing: border-box;
display: none;
position: fixed;
top: 30%;
left: 55%;
-webkit-transform: translate (-50%, -50%);
transform: translate (-50%, -50%);
}
label.my_1 {
display:block;
color: #01b6ed;
}
/*ボタンの装飾*/
label.my_1 span.my_1 {
display: block;
background-color: #01b6ed;
color: #fff;
width: 100%;
line-height: 40px;
border-radius: 4px;
text-align: center;
}
label.my_1 span.my_1:hover {
cursor: pointer;
}
input.my_1[type="checkbox"] {
display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_1[type="checkbox"]:checked + #popup {
display:block;
}
/* controlu pop_up strto popup2表示させたいコンテンツのレイアウトと位置*/
#popup2 {
width: 530px;
/* line-height: 100px;*/
background: rgb(2, 2, 111);
padding: 10px 10px;
vertical-align: text-top;
box-sizing: border-box;
display: none;
position: fixed;
top: 10%;
left: 55%;
-webkit-transform: translate (-50%, -50%);
transform: translate (-50%, -50%);
}
label.my_2 {
display:block;
color: #01b6ed;
}
/*ボタンの装飾*/
label.my_2 span.my_2 {
display: block;
background-color: #028326;
color: #fff;
width: 100%;
line-height: 40px;
border-radius: 4px;
text-align: center;
}
label.my_2 span.my_2:hover {
cursor: pointer;
}
input.my_2[type="checkbox"] {
display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_2[type="checkbox"]:checked + #popup2 {
display:block;
}
/* contorol pop_up end */
.t_dai {
line-height: 0%;
padding: 0px;
margin: 0px;
}
#in_work[type="text"] {
width: 34%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#in_work2[type="text"] {
width: 54%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#in_value[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#in_come[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
/* 2024/04/16- */
/* controlu pop_up strto popup3表示させたいコンテンツのレイアウトと位置*/
#popup3 {
width: 530px;
/* line-height: 100px;*/
background: rgb(18, 18, 180, 0.7);
padding: 10px 10px;
vertical-align: text-top;
box-sizing: border-box;
display: none;
position: fixed;
top: 20%;
left: 30%;
-webkit-transform: translate (-50%, -50%);
transform: translate (-50%, -50%);
}
label.my_3 {
display:block;
color: #01b6ed;
}
/*ボタンの装飾*/
label.my_3 span.my_3 {
display: block;
background-color: #ed3ef4;
color: #fff;
width: 70%;
height: auto;
font-size: small;
line-height: 20px;
border-radius: 4px;
text-align: center;
}
label.my_3 span.my_3:hover {
cursor: pointer;
}
input.my_3[type="checkbox"] {
display:none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input.my_3[type="checkbox"]:checked + #popup3 {
display:block;
}
/* contorol pop_up3 strto */
#my3_pop[type="text"] {
font-size: 60%;
background-color: #fff;
border: 2px solid #c0c;
}
#mod_t1[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#mod_t2[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#mod_t3[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#mod_come[type="text"] {
font-size: small;
background-color: #fff;
border: 2px solid #00f;
}
#pop3_d {
width: 50px;
font-size: 60%;
background-color: #fff;
border: 3px solid #a00;
}
/* contorol pop_up3 end pop_up all end */
/* textr set */
#but_faile1 {
background-color: #ff0000;
color: #ffffff;
font-size: 60%;
border: 2px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
#but_faile2 {
background-color: #ffee00;
color: #000000;
font-size: 60%;
border: 2px solid #ccc;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
#mytextr {
word-wrap: normal;
width: 800px;
height: 150px;
overflow: scroll;
/* valuetext :"test.txt"*/
/* border: 1px solid white;*/
background: #fff;
padding: 10px;
/* box-sizing: border-box;*/
word-break: break-all;
border-radius: 5px;
font-family: monospace;
font-size: 0.75rem;
margin-top: 10px;
}
#mytextr2 {
word-wrap: normal;
width: 800px;
height: 150px;
overflow: scroll;
/* valuetext :"test.txt"*/
/* border: 1px solid white;*/
background: #fff;
padding: 10px;
/* box-sizing: border-box;*/
word-break: break-all;
border-radius: 5px;
font-family: monospace;
font-size: 0.75rem;
margin-top: 10px;
}
#mytextr3 {
word-wrap: normal;
width: 800px;
height: 150px;
overflow: scroll;
/* valuetext :"test.txt"*/
/* border: 1px solid white;*/
background: #80ffff;
padding: 10px;
/* box-sizing: border-box;*/
word-break: break-all;
border-radius: 5px;
font-family: monospace;
font-size: 0.75rem;
margin-top: 10px;
}
/* form4 */
#myf4_1[type="text"] {
width: 90%;
font-size: 60%;
background-color: #66f;
border: 2px solid #ccc;
}
#myf4_2[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#myf4_3[type="text"] {
width: 90%;
font-size: 60%;
background-color: #66f;
border: 2px solid #ccc;
}
#myf4_4[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88f;
border: 2px solid #ccc;
}
#myf4_5[type="text"] {
width: 90%;
font-size: 60%;
background-color: #88a;
border: 2px solid #ccc;
}
#test_my1 {
color: red;
}
2部に続く...