【プログラミング】『RM換算表』を解説して「テーブルタグ」について理解する記事。

1ミリもプログラミングをしたことのない方に対して、「アプリとかブログとかがどのようにして動いているのか凄いざっくりと知りたい」という要望とかあったりします？と思い書きました。

概要のみ説明して、数記事に分けてアプリの成り立ちが理解いただければと思います。

【筋トレ】目的でいらっしゃる方で、プログラミングに全く触れたことのない方は、こういったアプリケーションがどのように動いているのかさらっとご確認いただき、「へーー(・ω・)」と思っていただければ幸いです。

できれば日曜大工としてプログラミングを始めていただければ、もっと幸いです。

『RM換算表』の「表示」部分について

『RM換算表』の表示はどのようにして行っているのか？

『RM換算表』の表示の部分は「<table>（テーブルタグ）」というもので主に作成されています。

「テーブル」とは？

「<table>（テーブルタグ）」は、文字通り「テーブルのような」表示の構造を簡単に作ることができます。

学生の頃にあった「靴箱」や、「ロッカー」のように規則正しい箱型のものを作成するのに使用します。

【テーブル例】

い	ろ	は
に	ほ	へ

こちらの表示は以下のような構造になっています。

<table>
  <tr>
    <td>い</td><td>ろ</td><td>は</td>
  </tr>
  <tr>
    <td>に</td><td>ほ</td><td>へ</td>
  </tr>
</table>

重要なのは、『RM換算表』も、この基本的な構造を発展させただけであるということです。

『RM換算表2.0』のソースコード。

『RM換算表2.0』では、かなりごちゃごちゃしているのですが、基本的には上記の構造を拡張しただけのものです。

    <table border="1">       
<tr>		<td><span>重量<br>/Reps</span></td>
		<td style="font-weight: bold; background-color: rgba(0, 255, 255, 0)"><span>1</span></td>
		<td style="font-weight: bold; background-color: rgba(0, 255, 255, 0)"><span>2</span></td>
<!--以下、何か同じようなものばかり続きます...-->
</tr><tr>	
        	<td style="font-weight: bold; background-color: rgba(0, 255, 255, 0.02)"><span>2.5</span></td>
		<td  class="weightcell" style="font-weight: bold; background-color: rgba(0, 255, 255, 0)"><div id="d1w1"><span class="rm">2.56</span><br><span style="color: white;">2.5x1</span></div></td>
		<input type="hidden" id="hdn1w1" value="2.56">
		<td  class="weightcell" style="font-weight: bold; background-color: rgba(0, 255, 255, 0)"><div id="d1w2"><span class="rm">2.63</span><br><span style="color: white;">2.5x2</span></div></td>
		<input type="hidden" id="hdn1w2" value="2.63">
<!--以下、また同じようなものばかり続きます...-->