質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

694閲覧

PHP for文でテーブルの数や色を$_GETからの数値によって変化させる(その際のchromeのソースコードの表示についてがメインの質問です)

dobel-dog

総合スコア0

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

GET

GETとはHTTPが対応するリクエストメソッドの一つです。クライアントからサーバーへ送られたURLパラメータのデータを取得する時必要がある時に使われます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2021/07/06 18:24

前提・実現したいこと

学校の課題でinput.phpというファイルを用意してその中にhtmlで<form action="output.php(送信先のphpファイルです。)" method="get">

<p><input type="text" name="num"></p> <button type="submit">送信</button></form>と記述してoutput.phpに$_GET['num'];でデータを受け取り縦の列で交互に色を変化させたり受けとったデータが奇数か偶数かで色の配列を変化させたりしました。

発生している問題・エラーメッセージ

chromeのページのソースの表示をすると異常な隙間が空いていたりtableに対するCSSの効きが何回か更新しないと反映されなかったりとCSSの効きが悪いです。このサイトの三つ目のchromeとタイトルにしているコードのことです。phpの部分が抜けて隙間が空いてしまっていることはわかっていますがこの隙間をなるべくなくしてすっきりとさせたいです。それとCSSの効きが悪いのも原因を教えてくださると幸いです。
(output.phpのコード)

outputphp

1<?php 2$num = $_GET['num']; 3$num1 = $_GET['num']; 4$if_num = 0; 5$if_num1 = 0; 6 7?> 8 9 10<!DOCTYPE html> 11<html lang="ja"> 12 <head> 13 <meta charset="UTF-8"> 14 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <title>php 課題NO.3</title> 17 <link rel="stylesheet" href="./css/style1.css" type="text/css"> 18 </head> 19 20 <body> 21 <h1>課題</h1> 22 <table> 23 <?php for($i = 0; $i < $num; $i++){ ?> 24 <tr> 25 <?php $if_num = 0; ?> 26 <?php for($j = 0; $j < $num; $j++){ ?> 27 <?php if($if_num % 2 == 1){ ?> 28 <td class="color1"> </td> 29 <?php $if_num++; 30 } else { ?> 31 <td class="color2"> </td> 32 <?php $if_num++; } ?> 33 <?php } ?> 34 </tr> 35 <?php } ?> 36 </table> 37 38 <h1>課題2 奇数と偶数で配列が変わります</h1> 39 <table> 40 <?php for($k = 0; $k < $num1; $k++){ ?> 41 <tr> 42 <?php for($l = 0; $l < $num1; $l++){ ?> 43 <?php if($if_num1 % 2 == 1){ ?> 44 <td class="color1"> </td> 45 <?php $if_num1++; 46 } else { ?> 47 <td class="color2"> </td> 48 <?php $if_num1++; } ?> 49 <?php } ?> 50 </tr> 51 <?php } ?> 52 </table> 53 </body> 54</html> 55

input.phpのコードです。ここで入力された数値でテーブルの数や色の配列が変わるように設定しています。例:5 と入力されるとoutput.phpに送信され,縦5,横5でテーブルが作られます。一つ目のテーブルでは奇数列が黄色、偶数列が水色になるように作っていて、二つ目のテーブルでは交互に黄色と水色が表示されるように作成しました。

inputphp

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>php 課題NO.3</title> 8 </head> 9 <body> 10 <form action="output.php" method="get"> 11 <p><input type="text" name="num"></p> 12 <button type="submit">送信</button> 13 </form> 14 </body> 15</html>

今回使用したCSSです。効きが悪かったです。何回か更新したり時間をおくと更新されました。キャッシュの問題ではないです。定期的にキャッシュを削除しているからです。

style1css

1@charset "utf-8"; 2 3.color1 { 4 background-color: #81DAF5; 5} 6 7.color2 { 8 background-color: #F3F781; 9} 10 11table { 12 margin: 0 auto; 13 border: solid 3px #000000; 14} 15 16td { 17 border: solid 3px #000000; 18} 19 20h1 { 21 text-align: center; 22}

この異常な隙間をどうにかしたいです。文字数をオーバしたので一部省略

chrome

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>php 課題NO.3</title> 8 <link rel="stylesheet" href="./css/style1.css" type="text/css"> 9 </head> 10 11 <body> 12 <h1>課題</h1> 13 <table> 14 <tr> 15 <td class="color2"> </td> 16 <td class="color1"> </td> 17 <td class="color2"> </td> 18 <td class="color1"> </td> 19 <td class="color2"> </td> 20 <td class="color1"> </td> 21 <td class="color2"> </td> 22 <td class="color1"> </td> 23 <td class="color2"> </td> 24 </tr> 25 <tr> 26 <td class="color2"> </td> 27 <td class="color1"> </td> 28 <td class="color2"> </td> 29 <td class="color1"> </td> 30 <td class="color2"> </td> 31 <td class="color1"> </td> 32 <td class="color2"> </td> 33 <td class="color1"> </td> 34 <td class="color2"> </td> 35 </tr> 36 37 <h1>課題2 奇数と偶数で配列が変わります</h1> 38 <table> 39 <tr> 40 <td class="color2"> </td> 41 <td class="color1"> </td> 42 <td class="color2"> </td> 43 <td class="color1"> </td> 44 <td class="color2"> </td> 45 <td class="color1"> </td> 46 <td class="color2"> </td> 47 <td class="color1"> </td> 48 <td class="color2"> </td> 49 </tr> 50 <tr> 51 <td class="color1"> </td> 52 <td class="color2"> </td> 53 <td class="color1"> </td> 54 <td class="color2"> </td> 55 <td class="color1"> </td> 56 <td class="color2"> </td> 57 <td class="color1"> </td> 58 <td class="color2"> </td> 59 <td class="color1"> </td> 60 </tr> 61 <tr> 62 <td class="color2"> </td> 63 <td class="color1"> </td> 64 <td class="color2"> </td> 65 <td class="color1"> </td> 66 <td class="color2"> </td> 67 <td class="color1"> </td> 68 <td class="color2"> </td> 69 <td class="color1"> </td> 70 <td class="color2"> </td> 71 </tr> 72 73 74 </table> 75 </body> 76</html>

補足情報(FW/ツールのバージョンなど)

学校の先生は珍しいタイプで質問するとキレます。皆さんが頼りです。誰がどこから見ても綺麗なコードを書けるエンジニアを目指しています。phpは今年の五月から始めて2か月目です。専門用語は極力調べますが少な目でお願いします。
ツールはXAMPPです。これまで習ったphpはecho,if,elseif,else,while,forです。ルールはfor文を使うことです。よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/07/06 20:47 編集

>学校の先生は珍しいタイプで質問するとキレます 自分本位な質問してないですかね。「教えて当然、答えて当然」が頭にあるなら先生じゃなくても不快になります。 それを言い訳に赤の他人に頼るのも問題あると思いますよ。 HTMLコード間のスペースは別に何の問題も起きません。 「CSSの効きが悪い」はキャッシュとかそんなんでしょうね。 >定期的にキャッシュを削除している 削除してない間じゃないでしょうか。 結局、コードは書いた通りにしか動きません。
dobel-dog

2021/07/06 23:37

こんなに早くコメントしてくださりありがとうございます。確かに僕の考え方に問題があったみたいです。いろいろな課程があったのにしろ自分の理屈で人を判断したり自分の考えを人に押し付けたり完全に人頼みにするのはいけないことですよね。今回の件は僕の考えすぎだったみたいですし、投稿してから友人といくつかの課題に取りくんでいたら自己解決をすることができました。しかし、CSSの反映に時間がかかるのは事実でして、原因としてはPHPファイルにHTMLを記述してそのHTMLの処理内にPHPを記述しそのPHPの中に記述したHTMLにCSSを記述してややこしくしてしまったのが原因かなと思っています。友人も僕の記述通りにしてもらうと反映されないって言われたのですがHTMLのCSSの読み込みの部分を書き直したら反映したらしいです。友人のCSSはさっきまで正常に反映されていました。。。二次元配列を使えばそんなこと気にせんでよくなるって言われて僕の知識不足が生んだ結果だと思っています。本当にコメントしてくださりありがとうございます。この先、僕が投稿する機会がありましたらコメントや回答をしてくださると助かります。
guest

回答1

0

自己解決

HTMLのタグはPHPで出力しない
OKな例

PHP

1<?php 2$color = 'red'; 3?> 4<!DOCTYPE html> 5<html lang="ja"> 6<head> 7 <meta charset="UTF-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <link rel="stylesheet" href="./style.css" type="text/css"> 11 <title></title> 12</head> 13<body> 14 <p class="<?php echo $color;?>">赤色</p>

CSS

1@charset "utf-8"; 2.red { 3color: red; 4}

ダメな例

PHP

1<?php 2$color = 'class=red'; 3?> 4<!DOCTYPE html> 5<html lang="ja"> 6<head> 7 <meta charset="UTF-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 10 <link rel="stylesheet" href="./style.css" type="text/css"> 11 <title></title> 12</head> 13<body> 14 <p <?php echo $color;?>>赤色</p>

投稿2021/07/06 23:10

編集2021/12/22 08:53
dobel-dog

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問