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

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

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

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

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

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2593閲覧

PHPにてサイト作成中、CSSのレイアウトが崩れてしまう

sato-san

総合スコア1

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

PHP

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

タブ

コンテンツの上下左右に参照用のメニューを設けることで、複数の要素やページの表示を可能にするユーザーインターフェイスパターンのこと。メニューをクリックすると、一つの要素が可視化され、他の要素は見えなくなる。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/15 15:17

編集2021/06/15 15:21

前提・実現したいこと

phpの練習でゲーム紹介サイトを作成しているのですが、flexbox使用しゲームの画面の概要タブをCSSで実装すると、
phpで文字が表示されているときは崩れず表示されます。
文字が消えるとレイアウトが崩れてしまいます。
1枚目のようにしたいのですが、phpの文字を消した状態で検証ツールでいろいろ試してもレイアウトが崩れたままです。

初学者のため拙い質問ですが、ご回答いただけますと幸いです。

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

イメージ説明
イメージ説明

該当のソースコード

html

1 <div class="tab-wrap"> 2 <input id="TAB-01" type="radio" name="TAB" class="tab-switch" checked="checked" /><label class="tab-label" for="TAB-01">ゲーム概要</label> 3 <div class="tab-content"> 4 <label>制作者名:</label><?php echo $value['made_name']; ?>(この制作者の他のゲームをみる)<br> 5 <label>ジャンル:</label><?php echo $value['category']; ?><br> 6 <label>プレイ時間:</label><?php echo $value['play_time']; ?><br><br> 7 <label>内容</label><br><?php echo $value['story']; ?> 8 </div> 9 <input id="TAB-02" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-02">操作方法・推奨環境</label> 10 <div class="tab-content"> 11 <label>操作方法</label><br><?php echo $value['system']; ?><br><br> 12 <label>推奨環境</label><br><?php echo nl2br($value['spec']); ?> 13 </div> 14 <?php endforeach; ?> 15 <input id="TAB-03" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-03">実況動画一覧</label> 16 <div class="tab-content"> 17 ハンター「いやーめちゃくちゃ怖かった!みんなもやってみて」  動画を見る 18 </div> 19 <input id="TAB-04" type="radio" name="TAB" class="tab-switch" /><label class="tab-label" for="TAB-04">レビュー一覧</label> 20 <div class="tab-content"> 21 クリス「初見だと難しいね。でも楽しかった」 22 </div> 23 </div>

CSS

1#game-detail{ 2 display: flex; 3 justify-content: center; 4 color: #ddd; 5 margin: 30px 0; 6 flex-wrap: wrap; 7} 8 9.game-detail img{ 10 border: double; 11 text-align: center; 12} 13 14.game-detail{ 15 line-height: 2.5; 16 width: 810px; 17} 18 19.outline{ 20 text-align: left; 21} 22 23.game-detail span{ 24 border-bottom: 1px solid #588da7; 25 color: #21cbff; 26 font-size: 20px; 27 display: block; 28 padding: 5px; 29} 30.tab-wrap { 31 height: 100%; 32 min-height: 300px; 33 display: flex; 34 flex-wrap: wrap; 35 flex-direction: column; 36} 37 38.tab-label { 39 width: 170px; 40 white-space: nowrap; 41 text-align: center; 42 border:1px solid #588da7; 43 border-radius: 4px 0 0 4px; 44 margin: 5px -1px 5px 1px; 45 padding: 10px .5em; 46 order: -1; 47 position: relative; 48 z-index: 1; 49 cursor: pointer; 50 float:left; 51} 52 53.tab-content { 54 display:none; 55} 56 57/* アクティブなタブ */ 58.tab-switch:checked+.tab-label { 59 color: #222; 60 background: #21cbff; 61 border-right-color: #21cbff; 62} 63 64.tab-switch:checked+.tab-label+.tab-content { 65 width: 640px; /* - ボタン幅 */ 66 height: 100%; 67 padding: 15px; 68 border-left: 1px solid #588da7; 69 display:block; 70 min-height: 200px; 71} 72 73/* ラジオボタン非表示 */ 74.tab-switch { 75 display: none; 76} 77

試したこと

heightやweightの調整、wrapの確認

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

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

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

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

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

guest

回答1

0

ベストアンサー

phpで文字が表示されているとき

PHPも結局文字列を出力しているだけで、レンダリングするのはブラウザの役割です。
つまるところ「レイアウトが想定通りにならないHTMLを出力している」ということです。

PHP度外視で、固定文言できちんとレイアウト組んでみたら如何でしょうか。
「モックアップ」と言って、画面イメージを静的HTMLに起こす工程になります。

固定文言で正しいレイアウトができてなければ、PHPから出力した文字列でも当然正しいレイアウトになりません(これはSQLとかでも同じ)

もし、静的イメージが既に出来ていたうえで、PHPから出力して正しいレイアウトになっていないのでしたら、PHPから出力した文字列と、モックアップが何か違うのだと思います。

モックアップとPHP実行込みでブラウザに出力したHTMLを「ソースを表示」などから取得し、見比べてみてください。

投稿2021/06/15 19:33

m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2021/06/16 00:16

<?php echo ~?> のあとに<br>がついたりつかなかったり、なにかルールや法則性でも?
m.ts10806

2021/06/16 00:21

無理やり調整しようとした後にも見えますね。 endforeachしか提示されてなかったり全体像見えないのも問題はあります。
sato-san

2021/06/16 16:11

みなさま様々なご指摘ありがとうございました! 力技すぎたことと、縦並びタブが操作性が悪いと感じたので、最終的に別のタブメニューにしました。
m.ts10806

2021/06/16 19:33

なんかあまり私の回答活きてないような。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問