Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8725

初心者に捧げる〜PHPを使って九九の表を作ろう〜

$
0
0

目次

・対象読者
・完成イメージ
・コードの記述・解説
・補足
・まとめ

対象読者

・progateやドットインストールでPHPを学習したばかりの方
・PHPの基礎の基礎を覚えた方
・PHPで何を作るか決まってない方

完成イメージ

スクリーンショット 2020-05-29 15.58.34.png
〜チェックポイント〜

・周りの1~9は目立つようにする
・偶数にだけ色をつける(今回はifを使います)
・tableタグなどを使い、表のようにする

コードの記述・解説(HTMLとPHP)

index.php
<h1>九九の表(今回はforを使います)</h1><table><tr><!-- &nbsp;は半角スペースの正規表現(ただのスペースではhtmlは無として扱うから) --><th>&nbsp;</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~


Viewing all articles
Browse latest Browse all 8725

Latest Images

Trending Articles

<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>