やってみたシリーズ5編1部 html , css js は2部になる 

これは、htmlとcssとJavascriptを駆使して動的に静止画の動化をしようとする、試みのスクリプトである。
実践的に、プログラムの謎解きを収録した実話で、その証拠を示すものとする。
ここまで来ると、ぺらぺらとめくるだけでは済まず、詳細な内容を検討する必要があり２部に分割して、載せる事としました。


1部　htmlとcss

studio.html
```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
```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部に続く...