画像がうまく取込めない（HTMLに関する質問）

2013/08/18 10:58

このQ&Aのポイント

掲示板をPHPで作成中ですが、コメントと同時に動物のイメージを添付する際にうまく表示されず、ファイルがpngだとHTMLに取り込めないのかどうか悩んでいます。
CSSの書き方や書く場所を変えても動作しないため、何が原因なのか分からず困っています。
投稿アップする際に、コメントの上に「1段横３列」で動物のイメージを配置したいのですが、正常に表示されません。

westwest_2007
お礼率37% (74/200)

PHP
回答数4
ありがとう数6

みんなの回答 （4）
専門家の回答

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

ベストアンサー

kmee
ベストアンサー率55% (1857/3366)

2013/08/18 23:43 回答No.4

でしたら、まずはHTMLとCSSの勉強をして、スキルを高めてください。エラーの内容を理解することが大事なのは、HTML,CSSでも、PHPのプログラミングでも同じです。一つ予想できるのは、position : absolute ; によって、領域が重なって隠れてしまっているのではないか、ということです。 position : absolute ;が何のための設定か理解した上で設定していますか? ボーダーに色がつかないのは、CSSの資料でborderに関する内容をよく読んでください。「表示していないボーダー」に色を付けても意味はありません。

その他の回答 (3)

kmee
ベストアンサー率55% (1857/3366)

2013/08/18 19:21 回答No.3

文法チェックはしましたか? HTMLもCSSも正しく記述するのが大事です。どちらも、間違いがあってもブラウザはエラーを出しません。勝手に修正して表示してくれます。しかし、そのために、意図したものとは違ったものになってしまうこともあります。(途中に閉じタグがあると解釈されてCSSの適用範囲が変わってしまったり、指定したつもりの設定が無かったことにされたり) ですから、ブラウザでの見た目でチェックするのは最後にして。まずは、開発ツールやチェッカーを使って、意図したHTML.CSSになっているかを確認します。例) IEを使っているなら http://msdn.microsoft.com/ja-jp/library/dd565628%28v=vs.85%29.aspx ○ CSSの問題点 > potision : abusolute ; スペルミスが直ってません。「位置」は「 position 」「絶対」は「 absolute 」です。また、 div.mage_boxから positon: absplute ;が無くなったのは意図したものでしょうか? > width : 750 ; > height : 500 px ; > border-width : 15 px ; 長さには、単位が必要です。そして、数値と単位の間に空白があってはいけません。 http://w3g.jp/css/guide/units 手許のfirefoxでは・width : 750 ;は width; 750pt ; と解釈してくれるようです。・height : 500 px ; は、500と pxの2つの値を指定した不正な物として無視するようです。・border-width : 15 px ; は、15と pxの2つの値を指定したものとなっています。border-widthは複数の値を取るのそれ自体は問題無いですが、「px」が不正な値として処理され、全体が無視されてます。 ○ HTMLの問題点 <STYLE="color:pink;font-size:300%">掲示板 styleタグがおかしいです。別なタグ(pとか)のstyle属性では <P FORM ENCTYPE = "multipart/form-data" ACTION = "toukou_up.php" METHOD = "post"> pタグに、form,exctype...等の属性はありません。その他、細かい間違いや、作法の問題が色々あります。 HTML,CSSの勉強も合せてやるのがいいでしょう。

質問者

お礼 2013/08/18 22:57

kmeeさん、回答有難うございます。　　ご指摘のありました、エラーは自分の理解出来る範囲で色々と参考書などをみて修正しましたが、やはり、結果は同じです。　サイトでのエラーチェックも試めしましたが、はっきり言ってエラーの意味を理解できるスキルがありません。　PHPも他の参考書を見ながら理解できるところは自分でアレンジしながら書いているのが本当のところです。　今回の箇所も、今まで普通に動いていたものが、ページにDIVを作くり、上下に二分割して画像を取り込んだだけで、ある部分だけがスッポリと抜け落ちたように何故表示されないのかが不思議です。　（文法的にも私のスキルでは致命的な間違を見つけることが出来ません、ただただ、ある部分を足しただけで何故他の部分にまで影響しているのかが、全く理解できませんん。）　上下のDIVを入れ替えても現象は同じです。　画像のDIVもボーダーも色も表示されませんし、表示されないDIVの中でも最後の方の文字列は表示されています。　これ以上は原因がわかりません、やはりプログラムのミスでしょうか。 ======================================================================== <?php session_start(); ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <div id='img_box'> <table> <TR> <TH><IMG src='hippo.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hippo3.png' width='30' height='30'></TH> </TR> </table> <P STYLE="color:deeppink;font-size:300%">掲示板</P> <P STYLE="color:pink;font-size=35px">掲示板</P> <P STYLE="font-size:25;color:blue">chy</P> </div> <P STYLE="font-size:25;color:blue">chy</P> <?php if (isset($_SESSION['user']) && $_SESSION['user'] != null ) { $_SESSION['time'] = time(); ?> <div id='te_box'> <P STYLE="color:pink;font-size=15px">掲示板</P> <P>投稿よろしく</P> <P><FORM ENCTYPE="multipart/form-data" ACTION="toukou_up.php" METHOD="post"> 名前<BR> <INPUT TYPE="text" NAME="myname" VALUE="<?php print $_SESSION['user'];?>"><BR> メッセージ<BR> <TEXTAREA NAME="mymessage" ROWS="10" COLS="70"></TEXTAREA><BR> <INPUT TYPE="file" NAME="myfile"> <INPUT TYPE="submit" VALUE = "送信"><BR> <A HREF = ggg.php>一覧へ</A> </FORM> </P> <?php } else { session_destroy(); print "<P><BR> <A HREF='toukou_logon.php'>ログオン</A></P>"; } ?> XYZchy</P> </div> </BODY> </HTML>

kmee
ベストアンサー率55% (1857/3366)

2013/08/18 14:39 回答No.2

CSSのチェックをしましょう。 http://jigsaw.w3.org/css-validator/ で検証した結果エラー: 以下のエラーが見つかりました。 (3) URI : TextArea 1 div.imgbox プロパティ potision は存在しません : abusolute 2 div.imgbox 次のプロパティが正しくありません : top 値が多すぎるか、もしくは値が解析できません : 30 px 3 div.imgbox 次のプロパティが正しくありません : left 値が多すぎるか、もしくは値が解析できません : 300 px 1は、単純なスペルミスです。 2,3は、単純な入力ミスか、あなたの理解不足です。CSSでの「長さ」の表現をよく確認してください。また、開発ツールを使って、どんなCSSが適用されているかを確認するのもよいでしょう。 (FirefoxのFireBug等)

質問者

お礼 2013/08/18 16:15

kmeeさん、回答有難うございました。何とか画像はうまく配置できるようになったのですが、次のDIVの内容のHTMLが全く表示されません。同じ名前のDIVの中に書こうとして、二個目のDIVを外しても全く反映されません。 Webからみると１個目のDIVはきちんと作成されているのに原因がわかりません。同じ書式で書いているのてすが。 ============================================================= <?php session_start(); ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY> <div id='img_box'> <table> <TR> <TH><IMG src='hippo1.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hippo3.png' width='30' height='30'></TH> </TR> </table> </div> <?php if (isset($_SESSION['user']) && $_SESSION['user'] != null ) { $_SESSION['time'] = time(); ?> <div id='te_box'> <STYLE="color:pink;font-size:300%">掲示板 <P>投稿よろしく</P> <P FORM ENCTYPE = "multipart/form-data" ACTION = "toukou_up.php" METHOD = "post"> 名前<BR> <INPUT TYPE = "text" NAME = "myname" VALUE = "<?php print $_SESSION['user'];?>"><BR> メッセージ<BR> <TEXTAREA NAME = "mymessage" ROWS = "10" COLS = "70"></TEXTAREA><BR> <INPUT TYPE = "file" NAME = "myfile"> <INPUT TYPE = "submit" VALUE = "送信"><BR> <A HREF = ggg.php>一覧へ</A> </FORM> </P> </div> <?php } else { session_destroy(); print "<P><BR> <A HREF='toukou_logon.php'>ログオン</A></P>"; } ?> </BODY> </HTML>

kmee
ベストアンサー率55% (1857/3366)

2013/08/18 11:25 回答No.1

trは、tableの内側(のtbody等の内側)で有効なタグですが、このPHPが出力するHTMLに、tableタグが無いように見えます。もし、本当に無いなら、CSS以前にHTMLとして間違いがあります。出力されるHTMLをチェッカーで文法チェックしてはどうですか? http://validator.w3.org/ http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

質問者

お礼 2013/08/18 13:21

kmeeさん、回答ありがとうございます。何とかうまく画像が取り込めましたが、考えている位置に移動しません。一番上の左側に入っていますが、CSSの値をかえても全く位置が変化しません。一体どこが悪いのでしょうか、宜しくお願いします。 phpのtextとの関係で動かないのでしょうか。それが原因なら、phpのコードもUPしますが、宜しくお願いします。 =============================================== <?php ・・ ?> <HTML> <HEAD> <META HTTP-EQUIV='Content-Type' CONTENT='text/html;charset=UTF-8'> <TITLE>投稿アップ</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> <BODY STYLE='background-color:lightgreen'> <div class='imgbox'> <table> <TR> <TH><IMG src='hippo1.png' width='30' height='30'></TH> <TH><IMG src='hippo2.png' width='30' height='30'></TH> <TH><IMG src='hipoo3.png' width='30' height='30'></TH> </TR> </table> </div> </HEAD> <BODY STYLE='background-color:lightgreen'> <div img class="imgbox"> <TR><TH><src="hippo1.png" width="50" height="50"></TH> <TH><src="hippo2.png" width="50" height="50"></TH> <TH><src="hippo3.png" width="50" height="50"></TH></TR></div> <?php ・・ ?> <P STYLE="color:pink;font-size:30px">掲示板</P> ・・ </FORM> <?php ・・ ?> </BODY> </HTML> ==================================================

画像がうまく取込めない（HTMLに関する質問）

画像がうまく取込めない（HTMLに関する質問）

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