• 締切済み

フォームからのデータをプレビューするさい

sirowabiの回答

  • sirowabi
  • ベストアンサー率0% (0/1)
回答No.2

CSSで半角文字も改行させたい部分に word-break : break-all; を指定すれば解決すると思いますよ。

関連するQ&A

  • cssの書き方について

    始めましてpcckitと申します。cssには全くの初心者ですがよろしくお願いします。メモ帳でcssで構成したホームページを作成しようと考えております。そこでまずは下記のように記述をしました。 body {background-color: #87ceed; text-align: center} div#border {border-style: solid; border-width: 2px; padding: 20px; background-color: #ffffff; width: 700px} 上記のようにしたところ、画面に枠が出来て、その枠の中に740×458 の画像を入れて確認をしたところ、枠からはみ出してしまいました。 やはりこれは、width: 700px}にしているからでしょうか? 上記の状態でIEでは正常に表示されるのですがFire foxで見ると やはり画像が枠からはみ出していたり、枠そのものが左に寄ったりしています。 また、枠の中に文字や画像を入れて中央ぞろえや、両端ぞろえなどしたいのですが、うまく行きません。ご指導の程よろしくお願いします。

  • CSSでの背景色の指定について

    以下のソースで右下に空白ができます。 それはいいのですが、背景色を指定がうまく行きません。 heightは動的に変わるので、idやclassを増やさずに実現したいと考えています。 IEでは実現できてきますが、Firefoxではダメでした。 よい方法はないでしょうか? ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <link href="css/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="wrap"> <div id="left"> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> AAAAAAAAAA<br /> </div> <div id="right"> ああああ<br /> ああああ<br /> ああああ<br /> ああああ<br /> </div> </div> </body> </html> ■test.css body { margin-top: 20px; margin-left: 70px; margin-bottom: 0px; padding: 0px; line-height: 1.4em; font-size: 12px; font-weight: normal; color: #333333; } #wrap { width: 690px; background-color: #000000; } #left { margin: 0px; padding: 0px; width: 510px; height: 100%; float: left; background-color: #ffff00; } #right { margin: 0px; padding: 0px; width: 180px; float: right; background-color: #ff00ff; }

    • ベストアンサー
    • CSS
  • ブラウザでプレビューでCSSが反映されません・・・

    現在、CSSでホームページを作成しているんですが、ブラウザのプレビューで見てみても、なぜかCSSで指定したレイアウトが反映されません。 ドリームウィーバーの画面ではCSSが反映されているんですが、ブラウザだと反映されていない状態です。 どうすればいいのでしょうか? また、以前はテーブルを使用していました。 大きな枠はCSSで作成するのは比較的簡単なんですが、同じ枠内に|横2列2列のコンテンツなどを作る時もCSSで作成するべきなのでしょうか? それともCSSでテーブルを組み合わせて作成しても問題ありませんでしょうか? 質問内容が2つになってしまいましたが、どうかご教授よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • どう変更してもIE6だけCSSレイアウトが崩れてしまいます。

    CSSレイアウトで、サイトを作成していたのですが、 最近になってIE6で確認してみると、レイアウトが崩れまくっていました。。。 3カラムレイアウトなのですが、Firefox等他のブラウザではきちんと表示されるので、なぜかIE6だけ縦1列になってしまいます。。 こちらのサイトでもIE6はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら1日かけてがんばってのですが、できませんでした。もう限界です(涙) 現在のCSSは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかな

    cssを使って枠の設定をしたく以下の記述をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku3"> width:200px; border: solid 3px #d3d3d3; background-color:red; <div id="waku7"> width:570px; border: solid 3px #d3d3d3; float:left; } 私としては780pxで作成した枠の中に、左側に200pxの枠を作成して、その右側に、570pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします 感じとしては以下のような感じで御座います。 http://desktop10.web.fc2.com/ どなた様か、ご教示のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 印刷プレビューでレイアウトが崩れないようにしたいのですが…

    HPを作成しようと思っている初心者です。 Dreamweaverというものでホームページを作ろうと思っているのですが、作成したページをIE6.0で確認し印刷して確認しようとしたところ、画面で見たレイアウトとは違う形で印刷されていて、どこを修正したらいいのかわからず困っています。FireFoxでは印刷プレビューを見てもレイアウトは崩れていませんでした。原因や解決方法がわかれば教えていただけませんでしょうか?よろしくお願いします。 OS=WINDOWS XP <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> <!-- body,td,th {font-size: 13px; line-height: 140%;} img{border-width : 0px ;} body{ margin-top: 0px; margin-right: 0px; } .box { float: left; height: 250px; width: 600px; background-color: #FFFFCC; } .boxleft { float: left; height: 250px; width: 190px; background-color: #FFCCFF; padding-left: 10px; } .boxright { float: right; height: 250px; width: 380px; background-color: #CCFFFF; padding-right: 10px; padding-left: 10px; } --> </style> </head> <body> <div class="box"> <div class="boxleft">ピンクの背景(左)</div> <div class="boxright">青の背景(右)</div> </div> </body> </html> ※.boxのバックグラウンドカラーが右上と左下に出てしまいます。 プレビューでは.boxの背景は出てないのですが………。

    • ベストアンサー
    • HTML
  • cssを使って枠を作成したく以下の記述をbodyの中にしました。

    cssを使って枠を作成したく以下の記述をbodyの中にしました。 div#main{margin-left:auto;margin-right:auto;width:750px;} これによりbodyの中に750pxの枠が出来ましたが、その枠を更に2等分したく、以下の記述をしました。 div#waku{margin-left:auto;margin-right:0px;width:250px;background-color:#ccffff;} これにより枠の左側に250pxの枠が出来ました。 更にその右側に500pxの枠を作成したく以下の記述をしました。 div#waku1{margin-left:0px;margin-right:auto;width:500px;} これにより枠の右側に500pxの枠が出来ました。 それぞれの枠の中に、画像を挿入するためにdiv#wakuの中に、以下の記述をしました。 <p class="img"> <img src="img/test.gif" alt="テスト" width="200" height="999" /></p> 次に div#waku1の中に、以下の記述をしました。 <p class="img"> <img src="img/test.gif" alt="テスト" width="550" height="999" /></p> 私は、左右対称になると思ったのですが、なかなかうまくいきません。 私は、750pxの枠を作りその枠の中で左側に200pxの枠、右側に550pxの枠を作成して、更に左側枠の背景色のみ変更し、左側の枠、右側の枠、それぞれに画像やテキストを、ページ一番上から入れていきたいのですが、なかなかうまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくい

    cssを使って枠の設定をしたく、以下の記述尾をしましたが、一部うまくいかないところがあり、質問をさせて頂きますのでどなた様かご指導のほどよろしくお願いいたします。 [css] <div id="main"> border: solid 2px #d3d3d3; margin-left:auto; margin-right:auto; width:780px; <div id="waku1"> width:170px; border: solid 3px #d3d3d3; padding-left:0px; padding-top:3px; padding-bottom:3px; margin-top:3px; margin-bottom:0px; background-color:#ccffff; <div id="waku2"> width:600px; border: solid 3px #d3d3d3; text-align:right; margin-left:auto; margin-right:0px; float:left; } 私としては780pxで作成した枠の中に、左側に170pxの枠を作成して、その右側に、600pxの枠を作成したかったのですが、何かがきっと問題なようで、うまくいきません。 どなた様か、ご指導のほどよろしくお願いいたします

    • ベストアンサー
    • HTML
  • フォームが枠で囲えない

    HTMLとCSSの勉強でサイトを作っているのですが、上下に文章があり、その文章の間にフォームがあるのですが、上の文章しか枠で囲えなくて困っています。 [HTML] <body> <h4>題名</h4> <p class="box"> 文章1 <form method="get" action="hoge.php"> <input type="text" name="form" size="25"><input type="submit" value="実行"> </form> 文章2 </p> </body> [CSS] body { line-height: 1.5; text-align: center; margin-top: 30px; } .box { width: 50%; margin-left: auto; margin-right: auto; border: 1px #000000 solid; } これで、文章1しか枠に囲われません。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • PHPで半角英数、全角文字の組み合わせを許可する正規表現の記述方法を教

    PHPで半角英数、全角文字の組み合わせを許可する正規表現の記述方法を教えてください。 PHPで、ウェブサービスをUTF-8で構築中です。入力項目のうち、1項目を半角英数(0-9、a-z、A-Z)と全角文字の利用を許可したいと考えています。 正規表現を使って判断しようとし、検索して調べてました。しかし、半角英数のみとか、全角文字のみで構成されている場合、という例は見つかるのですが、半角英数と全角文字の複合のみをチェックする方法がわからずにおります。 この ・半角英数、または全角文字で構成されている という条件をチェックする記述方法を教えてください。 今回除外したいのは、半角の記号(0-9、a-z、A-Z以外の半角文字)ですので、 ・半角の記号が含まれている という条件をチェックする記述方法でもかまいません。 また、正規表現でなくても実現できるのであれば、正規表現にこだわる必要もありません。 よろしくお願いいたします。

    • 締切済み
    • PHP