• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：PHPとTwitter Bootstrap）

PHPとTwitter Bootstrapの相性問題！フォームのデザインが崩れる原因と対処法とは？

このQ&Aのポイント
  • PHPコードをかいたファイルに Twitter Bootstrap を適用するとフォームのデザインが崩れます。どうしたらよいでしょうか？
  • PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させるとフォームのデザインが小さく？なってしまいます。PHPを記述していないページだとデザインは崩れることなく表示されます。
  • PHPと Twitter Bootstrap の相性の問題でどうしようもないことなのでしょうか？機能的にはなにも問題はないのですが、見栄えが悪いのでどうにかしたいです。
  • PHP
  • 回答数8
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
回答No.8

これは、UTF-8のBOMがついてますね。 結論としては、ご利用のテキストエディタで、今回のアプリケーションを作るにあたって使用したファイルを全て開き、 「UTF-8（BOMなし）」などといった文字コードに変換して下さい。 治ると思います。 BOMについては、ちょっと調べてみてもらうとして、簡単にいえば、ファイルの先頭に付加される3バイトほどのゴミのようなものです。UTF-16なんかでは意味があるものですが、UTF-8ではあまり意味が無い為、BOMなしの形式が選べるようになってます。 PHPは特に、言語の特性として、「<?php」から「?>」までの間がPHPであるとする言語で、PHPのくくりの外にあるものは全て即座に出力するようになってます。 その為、include/requireしてきたPHPファイルの先頭のBOMと、該当HTMLの先頭のBOMが合わせて２個出力されているため、今回のようなバグが起こっているものと思います。

hideyoshi_ZX
質問者

お礼

ありがとうございます！ UTF-8のBOMなしで保存すると解決しました！ 稚拙な質問と日本語にも関わらず最後までお付き合いくださりありがとうございました。 もっと知識を深めていきたいと思います。 本当に感謝しています！

その他の回答 (7)

回答No.7

ソースコードを比較する時は、WinMerge等のツールでやったほうがいいですよ。 php側のDOCTYPEの前にスペースが出力されているのが原因で、ブラウザがDOCTYPEを認識できずにQuirksモードになっています。 タグとは違ってDOCTYPEやDTD定義は完全一致しないと有効になりません。

回答No.6

そのPHPは、何か出力してないですか？echoだったりエラーだったり。 例えば、 <?php //何か処理 ?> <!DOCTYPE html> <html> ・・・・ という書き方をしている場合、改行コードがdoctype宣言より前に出力されることになります。 こういうことはないですか？ とにかく、Chromeでソースを開く、として両方のソースをテキストエディタに貼り付けて、改行含め相違ないか確認してみたほうが良さそうです。

hideyoshi_ZX
質問者

補足

たびたびありがとうございます！ <?php require_once('config.php'); ?> <!DOCTYPE html> 以下html といったphpの記述を入力しています（ただrequire_onceとは違う機能を記述しても同じ現象は起こります）。 ブラウザでひらいたソースをコピペして互いの違いを確認してみましたが全く同じでした。 しかしChromeの「要素を検証」機能のElementsの内容を見比べていたところ、PHPを記述したページのほうは<head></head>の中にあるべき記述が<body></body>のなかに入ってしまっていることに気づきました。おそらくこれが原因かと思うのですが検索しても対処の仕方がわかりません。。。 レンタルサーバーのほうにアップロードしましたのでページの方を実際みていただくのが早いかと思います↓ http://hideyoshizx.sakura.ne.jp/dancer/sample.html http://hideyoshizx.sakura.ne.jp/dancer/sample.php

回答No.5

再確認ですが、 inputタグのtype属性は、PHP適用前と適用後で一緒ですか？ CSS3では、input[type=text]などのようにtype属性ごとにスタイルきれるんですが、 PHP適用前後で、本当に全く一緒なのでしょうか。 例えば、type="text"とあったところを、type="email"などとした場合、若干小さくなるようなんですが・・・ （今更ながら検証してみました） 本当にタグレベルで全く一緒なのか、再度ご確認いただければと。

hideyoshi_ZX
質問者

補足

たびたびありがとうございます！ HTMLの部分は全く変えずに検証していますが、 <!DOCTYPE html>の上部にPHPコードを書き込んだ瞬間からフォームが小さくなってしまいます。 Chromeの「要素を検証」機能でいろいろとみてみたところ、どうもPHPを書き込むとフォームに対するPadding（内側の余白）が上手く反映されなくなっているようです。 しかしなぜそうなるのかは分からずじまいです。。。

回答No.4

ちょっと私には原因が分からないです。 これと似たようなものにUTF8を使用すると規定のフォントが変わってしまう現象があるのですが、画像を見る限りフォームのラベル文字のフォントが同じなので、どうもそれとは違うんですよね(一応、参考URLに張りました)。 ソースコードを読める方のようですので、IEでページを開いてF12を押すことで、描画モードや部分部分に適用されているスタイルを見ることができますので、それらを比較しながら原因を判断してみては…という提案しかできません。

参考URL：
http://www.softel.co.jp/blogs/tech/wordpress/wp-content/uploads/2009/11/fontfamily1.png
hideyoshi_ZX
質問者

補足

ご親切に本当にありがとうございます。 文字コードもあれこれ変えて試してみましたが変化がありませんでした。 教えていただいた方法を試して原因を探っていこうかと思います。

回答No.3

BootstrapのCSS内にフォームのデザインを変更する物がありますので、それが有効になっているだけかと思うのですが・・ 「PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させた後、PHPのコードを排除した状態」だとどうなるのですか？ それで「崩れない」のであれば確かにおかしいですね。

hideyoshi_ZX
質問者

補足

回答ありがとうございます！ 「PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させた後、PHPのコードを排除した状態」では崩れません。きれいに表示されます。 PHPを記述するとまた崩れてしまいます。

回答No.2

逆にChromeで現象が残るとは。 下位互換やローカルとの差異で最も違いが現れるのは、過去をひきずるIEぐらいで、 Chromeには互換表示用のタグ等といったものはなさそうです。 ちょっと、アップしていただいている添付の画像も小さすぎて全く見えないんですが・・・ ■表示されているフォントファミリは同じですか？ →もし違うようであれば、CSSでフォントファミリを指定してみて頂けますか？ http://d.hatena.ne.jp/n-yuji/20130225/p1 ↑のサイトの一番下の指定だと、日本語が一番ちょうどよく表示される感じです。 ■やっぱりソース違くない？ →サーバにUPし、PHPで出力されたHTMLをブラウザのソース閲覧機能で閲覧してみてもらえますか？ INPUTタグのClass指定等が違う、どこかタグが閉じてない、CSSの読み込みに違いがある、とかもなさそうですか？ あとはPHPで出力されたソースを全てコピーして、test.htmlとか適当なファイルに、全て貼り付け、ソレを更にローカルとサーバで表示した時に何か起こるかも確認してみたほうがよいかもしれませんね。 いかがでしょうか。

hideyoshi_ZX
質問者

補足

ご返事ありがとうございます！ フォントファミリをURLのサイトを参考にbootstrap.CSSのなかで指定しましたが、フォントが変わっただけで変化はありませんでした。 ソースの確認は嫌というほどしたのですが、見落としている点があるのかもしれません、今一度確認してみます。 添付画像が小さくて見えないので外部アップローダーにあげました↓参考にしていただければ幸いです。 http://i.imgur.com/jkk4YcA.jpg フォームの入力欄の下部分が少しなくなってしまう感じです。 FireFoxで確認してみたところ上手く表示されていました！ しかしSafariではChrome同様に崩れていました…

回答No.1

確認されたブラウザは何でしょう。 また、両方共Webサーバを介して表示の確認を行ってますか？ 例えば、IE系の場合、互換表示等でレイアウトに差異が出る場合があります。 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> などといったメタタグを挿入することで回避されたりとか。 また、DOCTYPE宣言より上に何らかの出力（文字列、改行、BOMなど）があるとレイアウト崩れたりします。 一度両方のソースを閲覧して、差異が無いか確認してみてはいかがでしょうか。

hideyoshi_ZX
質問者

補足

回答ありがとうございます！ WEBサーバ・ローカル開発環境の両方で確認しましたが結果は同じでした。 ブラウザはChromeとIEでチェックしました。 ただ <meta http-equiv="X-UA-Compatible" content="IE=edge" /> を挿入することでIEでは正しく表示されるようになりました！ありがとうございます！ ただ依然としてChromeではレイアウトが崩れたままです。 同じようにChrome用のメタタグを挿入すれば解決するのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. PHP

関連するQ&A

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

職業から探して質問する
質問する