• 締切済み

Contact Form7で文字サイズを変更したい

outbraveの回答

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.1

.message-100 textarea{ width: 100%; height: 100px; margin: 5px 10px 10px 5px; font-size: 2em; } 大きくしたい箇所に、font-size でいいんじゃないでしょうか。 ソースを書いておられますが、展開されたソースのほうが確認しやすいです。

関連するQ&A

  • table 幅指定でtheadとtbodyがずれる

    bootstrapを使っているのですが、 個別に幅設定がしたいので、htmlに下記を追加しました。 theadは問題なく幅設定できているのですが、tbodyがうまく適用されていないようで theadとずれてしまいます。 theadとtbodyの幅を合わせるにはどのようにすれば良いでしょうか? <style type="text/css"> .scroll1 { width: 1600px; table-layout: fixed; } .scroll1 thead, .scroll1 tbody { float: left; } .scroll1 tbody { height: 350px; overflow-y: scroll; } .c1 { table-layout: fixed;width: 200px; } .c2 { table-layout: fixed;width: 100px; } .c3 { table-layout: fixed;width: 100px; } .c4 { table-layout: fixed;width: 200px; } .c5 { table-layout: fixed;width: 200px; } .c6 { table-layout: fixed;width: 200px; } .c7 { table-layout: fixed;width: 100px; } .c8 { table-layout: fixed;width: 250px; } .c9 { table-layout: fixed;width: 250px; } </style> <table class="table table-bordered table-striped"> <tr> <td> <table border="0" class="table table-bordered table-hover table-striped table-hgroup scroll1"> <thead> <tr style=""> <th class="c1">アクション</th> <th class="c2">店舗コード</th> <th class="c3">ユーザID</th> <th class="c4">ユーザパスワード</th> <th class="c5">ユーザ名</th> <th class="c6">メールアドレス</th> <th class="c7">管理権限</th> <th class="c8">更新日</th> <th class="c9">登録日</th> </tr> </thead> <tbody> <tr style=""> <td style="width:200px;table-layout:fixed"> <input type="submit" value="削除" /> <input type="submit" value="編集" /> </td> <td style="width:100px;table-layout:fixed"> <span >2697</span> </td> <td style="width:100px;table-layout:fixed"> <span >002</span> </td> <td style="width:200px;table-layout:fixed"> <span >000000</span> </td> <td style="width:200px;table-layout:fixed"> <span >大築</span> </td> <td style="width:100px;table-layout:fixed"> <span ></span> </td> <td style="width:100px;table-layout:fixed"> <span >0</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:39</span> </td> <td style="width:250px;table-layout:fixed"> <span >2014/11/08 21:20:48</span> </td> </tr> </tbody> </table> </td> </tr> </table>

    • ベストアンサー
    • CSS
  • HTMLで入力フォームがOS、ブラウザによってサイズが違います。

    HTMLで入力フォームがOS、ブラウザによってサイズが違います。 どのOS、ブラウザでも同じサイズで表示したいのですが、上手くいきません。 OS:Windows7 ブラウザ:IE8、Sleipnir、Firefox、Chrome、Opera、Safari 状況:ALL OK OS:WindowsXP ブラウザ:IE8、Sleipnir、Firefox、Chrome 状況:Sleipnirのみフォームの縦のサイズが他と比べて大きいです 詳しく:それぞれのフォームの周りの余白がSleipnirだけ微妙に広いです      画像を添付しました [HTML] 抜粋・省略しました <form action="#" method="post" class="contact"> <table width="405" id="table1"> <tr><th width="75">&nbsp;会社名<span style="color : #cc0000; font-size:10px;">(*必須)</span></th> <td width="318" style="padding: 6px 3px;"><input class="text2" type="text" name="name"></td></tr> <tr> ****省略***** <th>&nbsp;住所</th> <td><input class="text4" type="text" name="zyusyo">(都道府県) <input class="text5" type="text" name="zyusyo">(市区町村) <input class="text5" type="text" name="zyusyo">(町名、番地) <input class="text6" type="text" name="zyusyo">(アパート・マンション名)</td> </tr> ****省略***** </table> </form> [CSS] 抜粋・省略しました .text2 { width: 180px; background-color: #99cccc; padding: 0px; font-size: 12px; height: 15px;     border-width: 1px; } .text4 { width: 100px; padding: 0px; background-color: #99cccc; font-size: 12px; height: 15px; margin: 6px 0 3px; border-width: 1px; } .text5 { padding: 0px; height: 15px; width: 180px; background-color: #99cccc; margin: 3px 0; border-width: 1px; } .text6 { padding: 0px; height: 15px; width: 180px;     margin: 3px 0 6px; background-color: #99cccc; border-width: 1px; } .contact #table1 th { background-color: #ccffff; font-weight: normal; text-align: left; vertical-align: top; margin: 0px; padding: 5px 0 0; line-height: 12px; } .contact #table1 td { background-color: #ccffff; vertical-align: middle; font-size: 10px; margin: 0px; padding: 3px 0 0; }

    • ベストアンサー
    • HTML
  • 同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象

    同じ幅指定のつもりなのに、ブラウザによって違ってしまう現象 まったくの初心者ですが、テンプレートを編集してホームページを作りました。 しかし、別の環境で見たところ、テーブルの表示が明らかにおかしいことに気づきました。 (Lunascapeというブラウザで、3種類のエンジンが選べるので他のエンジンにしてみたのです) 問題を極力単純化しようと余計な文章を省いたHTMLを用意しましたが、結果は変わりませんでした。 Tridentに合わせるとWebkitというエンジンで見た場合にはみ出すし、Webkitに合わせるとTridentで見たときにタイトルの幅が広すぎて間抜けなのです。 現状、この重大なエラーを残したまま公開している状態のため、急ぎ直したいのです。 画像は実行したときの症状を、下にはそのソースを載せます。 アドバイス、回答をよろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>テスト</title> </head> <body> <style type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; width: 60%; margin-bottom: 30px; border: 1px solid #DDD; table-layout:fixed; } th { border: 1px solid #DDD; color: #333; padding: 10px 20px; } td { border: 1px solid #DDD; color: #333; padding: 5px; } .title{ width:12em;} .compose,.long{ width:4em;text-align:center;} .value{ width:6em;text-align:center;} th.genre { background: #E5F2F8;} --> </style> <table> <tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr> <tr><th class="title">タイトル</th><td class="long">こうもく1</td><td class="value"><span class="d">こうもく2</span></td><td>こうもく3は大切なこうもくです。ほんとうです。</td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • css テーブルについて

    よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }

    • ベストアンサー
    • CSS
  • サイズ指定したテーブルを縦に並べるとセルがズレる

    色々と試しているんですが解決できないので教えてください。 CSSで全く同じようにサイズ指定しているテーブルを縦に並べた時、同じようにサイズ指定しているはずなのに、IEではセルの内容(テキストの長さ)によってセルの幅が変わってしまいます。具体的に言うと、ショッピングカートの商品ページのようなものを作ろうとしているのですが、以下のようなソースです。 .menu-table{ width:500px; padding:0px; border-collapse:collapse; } .menu-title{ margin:0px; padding:5px; border:1px solid #ff9900; } .menu-img{ width:110px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style1{ width:70px; margin:0px; padding:5px; border:1px solid #ff9900; } .menu-style2{ width:300px; margin:0px; padding:5px; } .menu-style3{ margin:0px; padding:5px; } <table width="0" border="0" cellspacing="0" cellpadding="0" class="menu-table"> <tr> <td colspan="3" class="menu-title">商品名</td> </tr> <tr> <td rowspan="4" class="menu-img"><img src="item.jpg" width="100" height="100" /></td> <td class="menu-style1">説明1</td> <td class="menu-style2">あいうえお</td> </tr> <tr> <td class="menu-style1">説明2</td> <td class="menu-style2">かきくけこ</td> </tr> <tr> <td class="menu-style1">価格</td> <td class="menu-style2">\1,000¥</td> </tr> <tr> <td colspan="2" class="menu-style3">あいうえおかきくけこさしすせそたちつてとなにぬねの</td> </tr> </table> こういうテーブルを縦にいくつか並べた時、例えば2つ目のテーブルが「あいうえお」のところに「あいうえおかき」と入力すると、「あいうえお」と入力したテーブルに比べて「説明1」のセル幅が狭くなってしまいます。Firefoxでは綺麗に揃うんですが、どうしてもIEではずれます。ボーダーの幅のぶんも計算に入れて幅を指定し直してもずれるんです。説明が下手すぎてうんざりかもしれませんが、どなたか解決策が分かれば教えてください。

    • 締切済み
    • CSS
  • 【CSS】floatで左右に並べた<div>のマージンが効かない。

    CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A">   <div class="B">    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div>   <div class="C" >    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div> </div> 【CSS】--------------------------------- #A {     margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }

    • ベストアンサー
    • HTML
  • cssでテーブルの位置を設定するには?

    <table border="1" align="left">でテーブルの位置を競ってすることはできたのですが スタイルシートで行いたいです。 そもそも他のテーブルはすべて中央に寄せたいため、 table { margin-left: auto; margin-right: auto; } としています。 そのうえで、任意のテーブルのみ左に寄せて表示したいので table.test { align:left; } としたのですが、うまくいきません。 ---------------------------------------------------------- <html> <head> <title>test</title> <STYLE type="text/css"> table { margin-left: auto; margin-right: auto; width: 40%; } table.test { width: 80%; align:left; } </STYLE> </head> <body> <table border="1"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" align="left"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> <br><br><br> <table border="1" class="test"> <tr><th>見出</th><th>見出</th></tr> <tr><td>セル</td><td>セル</td></tr> </table> </body> </html> ----------------------------------------------------- このコードだと、 table.test { width: 80%; align:left; } の、 width: 80%; の部分は認識されるようですが、align:left;は無視されます。 スタイルシートでテーブルの位置を設定する方法をご教授ください。

    • 締切済み
    • CSS
  • htmlファイルからphpファイルへの値の受け渡し

    表を使った問い合わせフォームを作成したのですが、データを受け渡す方法がわかりません!! 初めの問い合わせページは以下のようにhtmlファイルで記述しました。 この場合、次のページにデータを引き渡すphpファイルには、どうのような記述をしたら良いのでしょうか? <form method="post" action="info.php"> <table class="table margin01" width="592" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="190" align="left" bgcolor="#FFF09D">お名前 <span class="tabletext1">※必須</span></td> <td><input name="name" type="text" class="form01" id="name" /><br /> 入力例:山田 太郎 </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス <span class="tabletext1">※必須</span></td> <td><input name="mail" type="text" class="form01" id="mail" /><br /> 入力例:●●●●●●@yamada.co.jp </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">メールアドレス(確認) <span class="tabletext1">※必須</span></td> <td><input name="mail2" type="text" class="form01" id="mail2" /></td> </tr> <tr> <td align="left" bgcolor="#FFF09D">お問い合せ内容 <span class="tabletext1">※必須</span></td> <td> <select name="list" id="list"> <option>お問い合せ内容をお選びください</option> <option>事業内容について</option> <option>求人について </option> <option>その他</option> </select> </td> </tr> <tr> <td align="left" bgcolor="#FFF09D">内容 <span class="tabletext1">※必須</span></td> <td><textarea name="content" id="内容" cols="45" rows="5"></textarea></td> </tr> </table> <p align="center" class="margin01"> <input type="reset" value="クリア" /> <input type="submit" value="送信内容を確認する" /> </p> <input type="hidden" name="test" value="cloud" /> </form>

    • ベストアンサー
    • PHP
  • CSSのテーブルについて教えて下さい。

    テーブルなのですがh1が適用されません。 又表の枠線が黒になりません。 また(休診)を赤にしたいのですが表示されません。 どこをどう直したらいいのか教えて下さい。 お願いします。 h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; } th,td { padding: 5px; border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } td.col01{ font-weight: bold; background-color:silver; } em { color: red; font-weight: bold; } /* テーブル列幅指定 */ .cola { width:100px; } .col01{ width: 100px; } .col02{ width: 70px; } .col03{ width: 70px; } .col04{ width: 70px; } .col05{ width: 70px; } .clo06{ width: 70px; } .style1 {margin-left:1em; } HTML <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <tr> <th class="a">診察科</th> <th class="b">月</th> <th class="c">火</th> <th class="d">水</th> <th class="e">木</th> <th class="f">金</th> <th class="g">土</th> <th class="h">日</th> </tr> <tr> <th class="col01">一般歯科</th> <td class="col02" rowspan="4"><em>休診</em></td> <td class="col03" colspan="5">◯</td> <td class="col04" rowspan="4"><em>休診</em></td> </tr> <tr> <th class="col01">小児歯科</th> <td class="col02">◯</td> <td class="col03">&nbsp;</td> <td class="col04">◯</td> <td class="col05">&nbsp;</td> <td class="col06">◯</td> </tr> <tr> <th class="col01">歯列矯正</th> <td class="col02">&nbsp;</td> <td class="col03">◯</td> <td class="col04">&nbsp;</td> <td class="col05">◯</td> <td class="col06">&nbsp;</td> </tr> <tr> <th class="col01">審美歯科</th> <td class="col02">&nbsp;</td> <td class="col03">◯</td> <td class="col04">&nbsp;</td> <td class="col05">&nbsp;</td> <td class="col06">◯</td> </tr> </table>

    • ベストアンサー
    • HTML
  • IEでFORMタグを入れると空白ができる

    IEだけなのですがFORMタグを入れるとTABLEとTABLEの間に空白ができます。 自分なりに切り分けをしたみたところ下記のような結果になりました。 1、XHTML1.0をHTML4.0に変更すると正常に表示 2、Firefoxで開くと正常に表示 3、FORMタグを外すと正常に表示 4、このhtmlファイルをローカル(自身のPC上)で表示すると正常に表示 (Webサーバにアップロードすると現象が現れる) ソースは以下の通りです <!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" xml:lang="ja" lang="ja"> <table border="0" width="800"><tr> <td><font color="#000080"><b>サブメニュー</b></font></td> <td width="20"></td> <td align="right"> <input type="button" value="戻る" onclick=window.open("http://www.xxxx.xxx/xxx.html","_top")> </td></tr></table> ※この間に空白ができます※ <table border="1" cellspacing="0" cellpadding="5" width="800"> <tr><th nowrap class="l" width="270">商品A</th> <th nowrap class="l" width="100">商品A</th> <th nowrap class="l" width="270">商品名B</th> <th nowrap class="l" width="100">商品B</th> <p></tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> <tr> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> <form action="./xxx.cgi" method="post" style="margin:0px"> <input type="hidden" name="view" value="0"> <input type="hidden" name="pick" value="0"> <input type="hidden" name="back" value=""> <td valign="top" width="270">あ</td> <td nowrap align="center" valign="top" width="100">あ</td></form> </tr> </table> </p> </html> 実際にはもっと長い表になるのですが<tr></tr>を増やせば増やすほど空白が大きくなります。 どうすれば解消できるでしょうか ご存知の方がいらっしゃいましたらご教授願います。 いろいろなサイトを拝見して試してみましたが解決できないのでよろしくお願いします。

    • ベストアンサー
    • HTML