目次
・対象読者
・完成イメージ
・コードの記述・解説
・補足
・まとめ
対象読者
・progateやドットインストールでPHPを学習したばかりの方
・PHPの基礎の基礎を覚えた方
・PHPで何を作るか決まってない方
完成イメージ
・周りの1~9は目立つようにする
・偶数にだけ色をつける(今回はifを使います)
・tableタグなどを使い、表のようにする
コードの記述・解説(HTMLとPHP)
index.php
<h1>九九の表(今回はforを使います)</h1><table><tr><!-- は半角スペースの正規表現(ただのスペースではhtmlは無として扱うから) --><th> </th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><?phpfor($i=1;$i<=9;$i++){echo'<tr>';// $iに格納した数字を表の見出しとして出力するecho'<th>'.$i.'</th>';// $iが1の時に$jは1~9全て掛けて<td>として出力(以下$iが9になるまで行う)for($j=1;$j<=9;$j++){$result=$i*$j;// 偶数の時だけbackgroundをつけて見やすくしますif($result%2===0){echo'<td class="even">'.$result.'</td>';}// 奇数はそのまま表示(elseはだと見辛くなるのであえて使わない)if($result%2===1){echo'<td>'.$result.'</td>';}}// "\n"は改行の正規表現(9まで計算したら改行する)echo'</tr>'."\n";}?></tr></table>
コードの記述・解説(CSS)
table{/* 隣接するセルのボーダーを重ねて表示する */border-collapse:collapse;}th,td{width:100px;border:1pxsolidlimegreen;}th{background:aquamarine;}td{text-align:center;}.even{background-color:aqua;}
補足(コード内に書くと長くなるコメント)
<!--
printでも表示できるよ?
A. echo と print の最も大きなちがいは式( expression )かどうか
PHP の仕様として「 echo は式ではなくて、 print は式である 」
※echo にできて print にはできないことがあります。 それは「複数の引数を受け取ること」です。
・echo は文( statement )。他の式や文の一部として使うことができない。戻り値を持たない。
・print は式( expression )。他の式や文の一部として使うことができる。戻り値を持っていて、それはいつも 1 。
今回はどちらでもOKなのでprogateで使っているechoにしました。
"\n"は必ずダブルクオーテーションで囲む
なぜならシングルクオーテーションで囲むとただの文字列として出力されるから
<tr></tr>:表でつくられる横一列のデータ(行)をまとめる。
<th></th>:セルの要素であり、表の見出しを意味します。
<td></td>:セルの要素であり、表の値(データ)を意味します。
-->
まとめ
自分はPHPを学習してまだ2日なので早速アウトプットしようと思い、記事を作成させていただきました!
コードなどに間違いがあれば是非お教えください🙇♂️
この記事を見たあなたの成長を応援します!!
~この記事も一緒にどうですか?~
・初心者に捧げるハンバーガーメニューの作り方
・初心者に捧げるヘッダーの作り方
・Vue.jsで作る!自動保存するToDoリスト~その1~