アプリ版：「スタンプのみでお礼する」機能のリリースについて

PHPとTwitter Bootstrap

解決済

  • 質問者：hideyoshi_ZX
  • 質問日時：
  • 回答数：8件

PHPコードをかいたファイルに Twitter Bootstrap を適用するとフォームのデザインが崩れます。どうしたらよいでしょうか？

サイトのデザインに Twitter Bootstrap を使おうと勉強中のものです。

PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させるとフォームのデザインが小さく？なってしまいます。
（添付画像参照）
PHPを記述していないページだとデザインは崩れることなく表示されます。


PHPと Twitter Bootstrap の相性の問題でどうしようもないことなのでしょうか？


機能的にはなにも問題はないのですが、見栄えが悪いのでどうにかしたいです。

「PHPとTwitter Bootstra」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (8件)

No.8ベストアンサー

  • 回答者： hogehoge78
  • 回答日時：

これは、UTF-8のBOMがついてますね。



結論としては、ご利用のテキストエディタで、今回のアプリケーションを作るにあたって使用したファイルを全て開き、
「UTF-8（BOMなし）」などといった文字コードに変換して下さい。
治ると思います。

BOMについては、ちょっと調べてみてもらうとして、簡単にいえば、ファイルの先頭に付加される3バイトほどのゴミのようなものです。UTF-16なんかでは意味があるものですが、UTF-8ではあまり意味が無い為、BOMなしの形式が選べるようになってます。
PHPは特に、言語の特性として、「<?php」から「?>」までの間がPHPであるとする言語で、PHPのくくりの外にあるものは全て即座に出力するようになってます。

その為、include/requireしてきたPHPファイルの先頭のBOMと、該当HTMLの先頭のBOMが合わせて２個出力されているため、今回のようなバグが起こっているものと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます！

UTF-8のBOMなしで保存すると解決しました！

稚拙な質問と日本語にも関わらず最後までお付き合いくださりありがとうございました。

もっと知識を深めていきたいと思います。

本当に感謝しています！

通報する
お礼日時：2013/07/10 22:07

No.7

ソースコードを比較する時は、WinMerge等のツールでやったほうがいいですよ。



php側のDOCTYPEの前にスペースが出力されているのが原因で、ブラウザがDOCTYPEを認識できずにQuirksモードになっています。

タグとは違ってDOCTYPEやDTD定義は完全一致しないと有効になりません。
    • good
    • 0
    • 件
通報する

No.6

  • 回答者： hogehoge78
  • 回答日時：

そのPHPは、何か出力してないですか？echoだったりエラーだったり。



例えば、

<?php
//何か処理

?>

<!DOCTYPE html>
<html>
・・・・

という書き方をしている場合、改行コードがdoctype宣言より前に出力されることになります。
こういうことはないですか？

とにかく、Chromeでソースを開く、として両方のソースをテキストエディタに貼り付けて、改行含め相違ないか確認してみたほうが良さそうです。

この回答への補足

たびたびありがとうございます！

<?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

補足日時：2013/07/10 15:29
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： hogehoge78
  • 回答日時：

再確認ですが、


inputタグのtype属性は、PHP適用前と適用後で一緒ですか？

CSS3では、input[type=text]などのようにtype属性ごとにスタイルきれるんですが、
PHP適用前後で、本当に全く一緒なのでしょうか。

例えば、type="text"とあったところを、type="email"などとした場合、若干小さくなるようなんですが・・・
（今更ながら検証してみました）

本当にタグレベルで全く一緒なのか、再度ご確認いただければと。

この回答への補足

たびたびありがとうございます！

HTMLの部分は全く変えずに検証していますが、
<!DOCTYPE html>の上部にPHPコードを書き込んだ瞬間からフォームが小さくなってしまいます。


Chromeの「要素を検証」機能でいろいろとみてみたところ、どうもPHPを書き込むとフォームに対するPadding（内側の余白）が上手く反映されなくなっているようです。

しかしなぜそうなるのかは分からずじまいです。。。

補足日時：2013/07/10 01:01
通報する
    • good
    • 0
    • 件
通報する

No.4

ちょっと私には原因が分からないです。



これと似たようなものにUTF8を使用すると規定のフォントが変わってしまう現象があるのですが、画像を見る限りフォームのラベル文字のフォントが同じなので、どうもそれとは違うんですよね(一応、参考URLに張りました)。

ソースコードを読める方のようですので、IEでページを開いてF12を押すことで、描画モードや部分部分に適用されているスタイルを見ることができますので、それらを比較しながら原因を判断してみては…という提案しかできません。

参考URL：http://www.softel.co.jp/blogs/tech/wordpress/wp- …

この回答への補足

ご親切に本当にありがとうございます。

文字コードもあれこれ変えて試してみましたが変化がありませんでした。

教えていただいた方法を試して原因を探っていこうかと思います。

補足日時：2013/07/09 22:54
通報する
    • good
    • 0
    • 件
通報する

No.3

BootstrapのCSS内にフォームのデザインを変更する物がありますので、それが有効になっているだけかと思うのですが・・



「PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させた後、PHPのコードを排除した状態」だとどうなるのですか？
それで「崩れない」のであれば確かにおかしいですね。

この回答への補足

回答ありがとうございます！

「PHPを記述したページのHTMLフォームに Twitter Bootstrap のCSSを適用させた後、PHPのコードを排除した状態」では崩れません。きれいに表示されます。

PHPを記述するとまた崩れてしまいます。

補足日時：2013/07/09 16:33
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： hogehoge78
  • 回答日時：

逆にChromeで現象が残るとは。


下位互換やローカルとの差異で最も違いが現れるのは、過去をひきずるIEぐらいで、
Chromeには互換表示用のタグ等といったものはなさそうです。

ちょっと、アップしていただいている添付の画像も小さすぎて全く見えないんですが・・・

■表示されているフォントファミリは同じですか？
→もし違うようであれば、CSSでフォントファミリを指定してみて頂けますか？
http://d.hatena.ne.jp/n-yuji/20130225/p1
↑のサイトの一番下の指定だと、日本語が一番ちょうどよく表示される感じです。

■やっぱりソース違くない？
→サーバにUPし、PHPで出力されたHTMLをブラウザのソース閲覧機能で閲覧してみてもらえますか？
INPUTタグのClass指定等が違う、どこかタグが閉じてない、CSSの読み込みに違いがある、とかもなさそうですか？


あとはPHPで出力されたソースを全てコピーして、test.htmlとか適当なファイルに、全て貼り付け、ソレを更にローカルとサーバで表示した時に何か起こるかも確認してみたほうがよいかもしれませんね。


いかがでしょうか。

この回答への補足

ご返事ありがとうございます！

フォントファミリをURLのサイトを参考にbootstrap.CSSのなかで指定しましたが、フォントが変わっただけで変化はありませんでした。

ソースの確認は嫌というほどしたのですが、見落としている点があるのかもしれません、今一度確認してみます。


添付画像が小さくて見えないので外部アップローダーにあげました↓参考にしていただければ幸いです。

http://i.imgur.com/jkk4YcA.jpg

フォームの入力欄の下部分が少しなくなってしまう感じです。



FireFoxで確認してみたところ上手く表示されていました！
しかしSafariではChrome同様に崩れていました…

補足日時：2013/07/09 01:04
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： hogehoge78
  • 回答日時：

確認されたブラウザは何でしょう。



また、両方共Webサーバを介して表示の確認を行ってますか？


例えば、IE系の場合、互換表示等でレイアウトに差異が出る場合があります。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
などといったメタタグを挿入することで回避されたりとか。

また、DOCTYPE宣言より上に何らかの出力（文字列、改行、BOMなど）があるとレイアウト崩れたりします。

一度両方のソースを閲覧して、差異が無いか確認してみてはいかがでしょうか。

この回答への補足

回答ありがとうございます！

WEBサーバ・ローカル開発環境の両方で確認しましたが結果は同じでした。
ブラウザはChromeとIEでチェックしました。

ただ
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
を挿入することでIEでは正しく表示されるようになりました！ありがとうございます！

ただ依然としてChromeではレイアウトが崩れたままです。
同じようにChrome用のメタタグを挿入すれば解決するのでしょうか？

補足日時：2013/07/08 23:28
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報