Q&A
タイトルは例えば「phpで出力するページをスタイルシートできれいに装飾したい」とかですかね。スタイリングしたい、で正直意味がわからなかった。装飾していくにも基本となるdivやspanほかhtml構造の駆使の仕方がわかってないとアドバイスの意味も伝わらなそうで。
php
1<!DOCTYPE HTML> 2<html> 3 <head> 4 <meta http-equiv="content-type" charset="utf-8"> 5 </head> 6 7 8 <body> 9 10 <?php 11 $nickname=filter_input(INPUT_POST,"nickname"); 12 $email=filter_input(INPUT_POST,"email"); 13 $goiken=filter_input(INPUT_POST,"goiken"); 14 15 $nickname=htmlspecialchars($nickname); 16 $email=htmlspecialchars($email); 17 $goiken=htmlspecialchars($goiken); 18 19 if($nickname=="") 20 { 21 print"ニックネームが入力されていません。<br>"; 22 } 23 else 24 { 25 print"ようこそ"; 26 print $nickname; 27 print"様"; 28 print"<br>"; 29 } 30 31 if($email=="") 32 { 33 print"メールアドレスが入力されていません。<br>"; 34 } 35 else 36 { 37 print"メールアドレス:"; 38 print$email; 39 print"<br>"; 40 } 41 42 if($goiken=="") 43{ 44 print"ご意見が入力されていません。<br>"; 45} 46else 47{ 48 print"ご意見『"; 49 print $goiken; 50 print"』<br>"; 51} 52 53if( $nickname==''||$email==''||$goiken=='') 54{ 55 print'<form>'; 56 print'<input type="button" onclick="history.back()" value="戻る">'; 57 print'</form>'; 58} 59else 60{ 61 print'<form method="post" action="thanks.php">'; 62 print '<input name="nickname" type="hidden" value="'.$nickname.'">'; 63 print '<input name="email" type="hidden" value="'.$email.'">'; 64 print '<input name="goiken" type="hidden" value="'.$goiken.'">'; 65 66 print'<input type="button" onclick="history.back()" value="戻る">'; 67 print'<input type="submit" value="OK">'; 68 print"</form>"; 69} 70?> 71 72 </body> 73</html>
現在、お問い合わせフォームが簡単に完成したのですが、確認画面のページにおいてどのようにスタイリングすれば良いのかがわかりません。
##表示結果
提示したスクリーンショットのようになります。
これでは、マークアップしただけで、なにもスタイリングできていませんよね。。
一度html/cssだけで同じ入力がされた時このようなページになってほしいということで、他サイトからデベロッパーツールで編集し、スクリーンショットしました。
##実現したいイメージ画像
このような感じで、行なっていきたいのですが、例として名前をスタイリングする時
下記のコードを一度定数として、html内の要素に改めて記述すれば良いのでしょうか？
php
1 if($nickname=="") 2 { 3 print"ニックネームが入力されていません。<br>"; 4 } 5 else 6 { 7 print"ようこそ"; 8 print $nickname; 9 print"様"; 10 print"<br>"; 11 }
ありがとうございます。
タイトルには、すこし抽象的にしないで具体的に記述しようと思ったのですが、このようになりました。
ご指摘いただいた様に改善させていただきました。
回答2件
0
どのレベルで理解できていないのかが掴みきれないのですが
print '内容'; ではなく
print '<div class="ooo">内容</div>';と書いて普通にCSSを読み込めば、普通にスタイル指定できますよ。
投稿2019/12/26 07:34
総合スコア973
https://teratail.com/questions/219859
前回の質問で、質問させていただきました。
失礼しました
私の質問文が説明が不十分で申し訳ございません。
文字列で表示しないというのは、いったいどのようにすれば良いのでしょうか？
0
ベストアンサー
下記のコードを一度定数として、html内の要素に改めて記述すれば良いのでしょうか？
できなくはないですが悪手です。
ブラウザから確認できるのはhtmlのコードのみです。
PHPなどサーバーサイドの処理は見ることはできませんし、利用者には関係のないことです。
一般的に用いられる手法は「固定情報で静的HTMLを作ってその後にPHPから得られる情報を当てはめていく」というやり方です。
この「固定情報をいれた静的HTML」を「モックアップ」「プロトタイプ」と呼ばれています。
頭三文字だけで表現されることの方が多いですね。
つまり、先に画面イメージを作っておくわけです。
画面は機能を決めるものにもなります。
そこでレイアウト、デザインも決めておくことで、作業の切り分けができ、スムーズに進めることができます。
あとからレイアウトを考えるのはスパゲティコードになりやすいやり方です。
※PHP単体で正しい動作をさせるために単体で組むのは良いことです
が、それは処理ロジック側の動作確認のためだけです
多くのフレームワークでは処理ロジックと画面部分をわけて作るように生っていますが、役割分担を明確にし、見通しのよいコードにする目的もあります。
それと同じですね。
先にPHP度外視でHTML組みましょう。
投稿2019/12/26 06:50
編集2019/12/26 06:56
総合スコア80850
一般的に用いられる手法は「固定情報で静的HTMLを作ってその後にPHPから得られる情報を当てはめていく」というやり方です。
> なるほど。イメージなどを一度html/cssで表現し、そこに足りないパーツ（今回でいう所の情報を）あてはめていくといった工程があるのですね。参考になりました。
一点質問なのですが、静的htmlを作成するのは、いわゆるサーバーサイドの人間なのでしょうか？
システムを作る人の静的htmlとフロントエンドの様な人にサーバーサイドの人が伝えて作成してもらうのでは、多少食い違いが生じるかと思いますが、どの様に行なっているのでしょうか？
もちろん、私は職ではなく一人で行なっているのですが、疑問に思った為、質問させていただきました。
一度静的htmlを作成しもう一度改めて質問させていただきます。
>なるほど。イメージなどを一度html/cssで表現し、そこに足りないパーツ（今回でいう所の情報を）あてはめていくといった工程があるのですね。参考になりました。
いえ。モック時点で「足りないパーツ」はあってはいけません。
ものすごく単純な例だと、モックだと
<div id="price">10,000</div>
となっているところを下記のようにするだけ。
<div id="price">{$price}</div>
これは「足りないところをあてはめる・追加する」ではなく「可変的なところをPHPで与える・組む」ということになります。
当然、一覧情報などはループさせることになるので、
モック時点では
<div>1</div>
<div>2</div>
<div>3</div>
となっていても
foreach($data as $key=>$row){
echo "<div>{$row['num']}</div>".PHP_EOL;
}
のようにし、出力結果がモックと同じ構造になっているか
ブラウザの「ソースを表示」で確認する必要があります。
>一点質問なのですが、静的htmlを作成するのは、いわゆるサーバーサイドの人間なのでしょうか？
別にどちらでも構いません。
ただ「役割分担」ができる部分なので、
Webデザイナにこの部分を担当してもらうことも多いと思います。
もちろんサーバーサイド担当もHTML、CSSをきちんと理解できていないと
折角の構造を壊してしまう可能性もあるので、「HTMLが読める」もしくは
「画面を見てHTMLが想像できる(CSS含めて）」くらいは出来るようになっておいた方が良いです。
> システムを作る人の静的htmlとフロントエンドの様な人にサーバーサイドの人が伝えて作成してもらうのでは、多少食い違いが生じるかと思いますが、どの様に行なっているのでしょうか？
いえ、ですから。サーバーサイドが絡む時点で既に画面レイアウトが出来上がっていないとおかしいのです。
最低でも基本設計時点で決まっているべきです。モックも基本設計用に作ることもあるくらいです。
もちろん完全なものは詳細設計以降としても、おおよそ決まっているべきです。
主動はあくまでブラウザに表示されるものなので、フロント側です。
だから「バックエンド」と呼ばれていると思ってください。
画面レイアウトは後付けではありません。
「画面は機能」と申し上げたように、機能が決まっていないのにバックエンドも何もありません。
1人でやっている場合も同じ。先に画面設計、機能設計、DB設計。そこからようやく「サーバーサイドでやること」が決まっていきます。
学習のためだけの単体プログラムを作っているのならまだしも
1つのシステムを作ろうとしているのでしたら、設計なしでは成り立ちません。
何もきちんとしたフォーマットに書いていく必要はなく、手書きでもメモレベルでも構いません。
画面レイアウトも初めからHTMLを組むのではなくざっくりとしたイメージをExcelにオブジェクト配置するのでも構いません。
そこからきれいにしていけば良いです。
もちろんPhotoshopやIllustratorのようなツールがあればキレイなデザインにもなろうかと思いますが、設計時点でどこまでやるかはそれも要件次第でしょう。
デザイン部分もある意味「要件」ですよ。
想定していなかったことを後付けで入れようとすると必ず不整合が起きてグチャグチャになります。
スパゲッティコードでメンテナンス性も何もないものが出来上がっても良いのでしたら止めませんが、場合によっては設計からきちんとやり直した方が早く確実でメンテナンスもしやすいシステムが出来上がります。
ご回答ありがとうございます。
これは「足りないところをあてはめる・追加する」ではなく「可変的なところをPHPで与える・組む」ということになります。
＞とても分かりやすい回答ありがとうございます。ユーザが入力するなど可変的な所はPHPで与え・組むという事ですね。
学習のためだけの単体プログラムを作っているのならまだしも
1つのシステムを作ろうとしているのでしたら、設計なしでは成り立ちません。
＞一度フォームを自身で作成しどの様な流れになっているのかなどを確認する単体プログラムとして作成し、これから自身で１つのシステムを制作しようと思い、質問させていただきました。
１つのシステムをする上で、優先順位や取り掛かる順番というのは大変重要になってくると思います。HTMLやCSSではある程度設計していなくても整合はカバーできていたという事もありますが、PHPとなってくると尚更思い通りに進まないという事が実感できました。
一度、設計し直してもう一度１つのシステムとして制作し直して見ようと思います。
あなたの回答
tips
プレビュー
