質問: ### 前提・実現したいこと(概要) Bootstrapを使って、既存のphpファイルを装飾したいです。 phpで簡易のECサイトを作成したのですが、装飾部分をかっこよくしたいと思っております。 Bootstrapのexampleを流用して、装飾をしたいのですが、上手くいかず、調べても不明なため 質問させていただきたく思います。 具体的な問題点 ・ログインフォームの入力チェック画面に装飾ができない。 ### 状況 ・PHPで簡易ECサイトを構築しました。 ・ただ、CSSなどで全く装飾をしていないため、Bootstrapを用いて装飾をしたい。 ・login.html→login-check.php→ec_top.php という画面遷移をしています。 ### お聞きしたいこと ・既存のPHPファイルを装飾のため、htmlファイルに変換し、Bootstrapなどを使って装飾し、元にあったphp部分を埋め込んで「装飾された状態で既存のプログラムを実行したい。」 現状の画面です。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/8992b8e77d5d69e42c21b05936fc77bf.png) ↓ 実現したいデザインです。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/8dbd648248ecd4c8b891cdf5b9a436f3.png) https://getbootstrap.com/docs/4.1/examples/navbar-bottom/ ### 試したこと 1.上記のファイルがphpファイルなのでhtmlファイルに変更 2.Bootstrap読み込みのため、コードを追加 3.現状のphp部分を読み込ませる。 ※現状、phpファイルをhtmlファイルを変換したところでエラーが出てしまっているため、 Bootstrapでの装飾まで至っていません。 ※この後、Bootstrapのエグザンプルのソースをコピペしようとしていました。 下記のサイトです。 https://getbootstrap.com/docs/4.1/examples/navbar-bottom/ ### ソースコード (現状) ``` '; echo ' 戻る'; } else { session_start(); $_SESSION['member_login']=1; $_SESSION['member_code']=$rec['code']; $_SESSION['member_name']=$rec['name']; header('Location:shop_list.php'); exit(); } } catch(Exception $e) { echo 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?> ``` ↓ ↓ ↓ (試したこと) ``` Bootstrap Sample メールアドレスかパスワードが間違っています。'; echo ' 戻る'; } else { session_start(); $_SESSION['member_login']=1; $_SESSION['member_code']=$rec['code']; $_SESSION['member_name']=$rec['name']; header('Location:shop_list.php'); exit(); } } catch(Exception $e) { echo 'ただいま障害により大変ご迷惑をお掛けしております。'; exit(); } ?> ``` ### お聞きしたいことのまとめ ・既存のphpファイルがまったく装飾されていないため、Bootstrapを使って装飾したい。 ・ただ、phpファイルをhtmlファイルに変換し、元にあったphp部分を埋め込む方法が検討がつかない。 ・上記どうすれば実現できるかアドバイスを賜りたく思います。 ### 補足 ・商品一覧画面もphpファイル(list.php)で作られているため、今回教えていただけましたら、 そこに応用したい。
回答: PHPはあくまで何かしらサーバー上で処理をして例えばechoなどで文字列を出力しているだけで、それがHTMLであってブラウザから参照するからHTMLとして解釈されます。 「PHPを装飾する」というのは次元が違う話です。 「PHPで出力したHTMLに対して装飾する」という考え方に切り替えてください。 .htmlでは特別な設定を行わない限りPHPは動きません。特別な設定を行わないのであれば**.phpを.htmlに変更する必要はありません。** 簡単に例示しますと、下記は画面で確認した結果は全く同じです。 ``` test"; ``` ``` p{ color:red; } test"; ```