Q&A
まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。
PHPで敬語学習ノートを作っています。
初期画面では正常にみやすく一覧が表示されますが、
修正するボタンを押すとテーブルの文字等が小さくなってしまいます。
修正するボタンを押しても初期画面のようなテーブル幅の間隔、文字の大きさでありたいです。
ご教示ください。
php:test25.php
1<?php 2// var_dump($_POST) 3?> 4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 5"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6<html xm1ns="http://www.w3.org/1999/xhtml"> 7<html lang="ja"> 8<head> 9<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 10<meta http-equiv="Content-Script-Type" content="text/javascript"> 11 12 13<title>敬語学習ノート</title> 14<style type="text/css"> 15<!-- 16BODY{ 17background-image : url(kokuban1.jpg); 18background-repeat : no-repeat; 19background-attachment : fixed; 20background-position :right top;} 21--> 22 23.font1 { 24 font-family: "あずきフォント", serif; 25} 26 27.font2 { 28 font-family: "あずきフォント", serif; 29 font-size: 160%; 30 color: "#e4b9f9"; 31} 32 33.font3 { 34 padding: 4px; 35} 36 37.body { 38 cursor: url(hosi5.ani); 39} 40@font-face{ 41 font-family: 'あずきフォント'; /* お好きな名前に */ 42 src: url('azuki.eot'); /* IE9以上用 */ 43 src: url('azuki.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */ 44 url('azuki.woff') format('woff'), /* モダンブラウザ用 */ 45 url('azuki.ttf') format('truetype'); /* iOS, Android用 */ 46} 47 48html,body { 49 scrollbar-base-color: #c3d7e0; 50 scrollbar-track-color: #c3d7e0; 51 scrollbar-face-color: #c3d7e0; 52 scrollbar-shadow-color: #c3d7e0; 53 scrollbar-darkshadow-color: #c3d7e0; 54 scrollbar-highlight-color: #c3d7e0; 55 scrollbar-3dlight-color: #c3d7e0; 56 scrollbar-arrow-color: #ffffff; 57 filter: chroma(color = #c3d7e0); 58} 59/* .absolute{ */ 60/* position:absolute; */ 61/* right:50px; */ 62/* } */ 63</style> 64 65</head> 66<body> 67 <table cellspacing="0" width="300" cellpadding="4" 68 style="border: 5px black solid;"> 69 <tr> 70 <td style="border: 5px brown inset; color: white;" bgcolor="green"> 71 <p class="font1">検索したい文字を入力してください</p> 72 <form action="" method="post"> 73 <input type="text" name="keyword"> <input type="submit" 74 name="button1" value="検索" 75 style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;"> 76 </br> 77 <img src="u09.gif" align="right"> 78 </p> 79 80 </td> 81 </tr> 82 </table> 83 <table cellspacing="0" width="600" cellpadding="4" 84 style="border: 5px black solid;"> 85 <tr> 86 <td style="border: 5px brown inset; color: white;" bgcolor="green"> 87 <p> 88 <img src="res-19.gif"><font class="font1">ノートに書く</font> 89 </p> <font class="font1">タメ語<input type="text" name="tamego"> 正しい敬語<input 90 type="text" name="keigo"> </br> 例文 <input type="text" name="reibun" 91 style="width: 405px;"> <input type="submit" name="button2" 92 value="書く" 93 style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;"> 94 <!-- </form> --> <img src="res-19.gif"> </br> <!--<img src="u07.gif" style="position:absolute;right:255px"> --> 95 <img src="u09.gif" align="right"> 96 </p> 97 98 </td> 99 </tr> 100 </table> 101 <button type="submit" name='button3' value='button3' 102 style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">修正する</button> 103 </form> 104 105 <!-- <img src="hooter.png"> --> 106 <table cellpading="0" border="1" width="80%"> 107 <caption class="font2">敬語学習ノート</caption> 108 </br> 109 </p> 110 </br> 111 <!-- <tr style="background: #ccccff">--> 112 <tr style="background: #cc528b"> 113 <th class="font1"><font color="white">番号</font></th> 114 <th class="font1"><font color="white">タメ語</font></th> 115 <th class="font1"><font color="white">正しい敬語</font></th> 116 <th class="font1"><font color="white">例文</font></th> 117 <th class="font1"></th> 118 </tr> 119<?php 120// $pdo = new PDO ( 'mysql:host=localhost;dbname=honorific;charset=utf8', 'staff', 'password' ); 121$pdo = new PDO ( 'mysql:host=localhost;dbname=takahashi1;charset=utf8', 'takahashi', 'takahashi' ); 122// $pdo = new PDO ( 'mysql:host=192.168.1.30;dbname=honorific;charset=utf8', 'staff1', 'password' ); 123function h($str) { 124 return htmlspecialchars ( $str); 125} 126// もし何かしらPOSTされたら 127if ($_SERVER ['REQUEST_METHOD'] === 'POST') { 128// 検索ボタンが押されて、空じゃなかったら 129 if ($_POST ['button1'] && ! empty ( $_POST ['keyword'] )) { 130 $vKeyword = isset ( $_POST ['keyword'] ) ? $_POST ['keyword'] : ''; 131 132 $sql = $pdo->prepare ( 'select * from honorifics where wrongHonorific like ? or rightHonorific like ? or example like ?' ); 133 $sql->execute ( array ( 134 '%' . $vKeyword . '%', 135 '%' . $vKeyword . '%', 136 '%' . $vKeyword . '%' 137 ) ); 138 } 139// もし書くボタンが押されたら 140 if ($_POST ['button2']) { 141 $vTamego = isset ( $_POST ['tamego'] ) ? $_POST ['tamego'] : ''; 142 $vKeigo = isset ( $_POST ['keigo'] ) ? $_POST ['keigo'] : ''; 143 $vReibun = isset ( $_POST ['reibun'] ) ? $_POST ['reibun'] : ''; 144 $sql = $pdo->prepare ( 'insert into honorifics values(null, ?, ?, ?)' ); 145 $sql->execute ( array ( 146 $vTamego, 147 $vKeigo, 148 $vReibun 149 ) ); 150 } 151// もし検索ボタンが押されて、空じゃなかったら 152 if (! empty ( $_POST ['keyword'] ) && $_POST['button1']) { 153 foreach ( $sql->fetchAll () as $row ) { 154 echo '<tr>'; 155 echo '<td>' . h ( $row ['id'] ), '</td>'; 156 echo '<td><font class="font3">', h ( $row ['wrongHonorific'] ), '</font></td>'; 157 echo '<td>', h ( $row ['rightHonorific'] ), '</td>'; 158 echo '<td>', h ( $row ['example'] ), '</td>'; 159 echo '</tr>'; 160 echo "\n"; 161 } 162 echo '<button onclick="history.back()"style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">戻る</button>'; 163 } 164 if (empty ( $_POST ['keyword'] ) && $_POST['button1']) { 165 foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) { 166 echo '<tr>'; 167 echo '<td>' . h ( $row ['id'] ), '</td>'; 168 echo '<td class="font3">', h ( $row ['wrongHonorific'] ), '</td>'; 169 echo '<td cellpadding="15">', h ( $row ['rightHonorific'] ), '</td>'; 170 echo '<td>', h ( $row ['example'] ), '</td>'; 171 echo '</tr>'; 172 echo "\n"; 173 } 174 } 175} 176// 直リンク時 177if (! $_POST) { 178 foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) { 179 echo '<tr>'; 180 echo '<td>' . h ( $row ['id'] ), '</td>'; 181 echo '<td class="font3">', h ( $row ['wrongHonorific'] ), '</td>'; 182 echo '<td cellpadding="15">', h ( $row ['rightHonorific'] ), '</td>'; 183 echo '<td>', h ( $row ['example'] ), '</td>'; 184 echo '</tr>'; 185 echo "\n"; 186 } 187} 188// 修正するボタンが押されたら 189if ($_POST ['button3']) { 190// query→引数に指定したSQL文をデータベースに対して実行する 191 foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) { 192 echo '<tr><form action="" method="post">'; 193 // type属性をhiddenにすることでフォームに商品番号を含めつつも編集できないようにしている 194 echo '<input type="hidden" name="id" value="', $row ['id'], '">'; 195 echo '<td>' . h ( $row ['id'] ), '</td>'; 196 echo '<td class="font3">', '<input type="text" name="upTamego" value="', $row ['wrongHonorific'], '">', '</td>'; 197 echo '<td cellpadding="15">', '<input type="text" name="upKeigo" value="', $row ['rightHonorific'], '">', '</td>'; 198 echo '<td>', '<input type="text" name="upReibun" value="', $row ['example'], '">', '</td>'; 199 echo '<td><input type="submit" name="button4" value="更新" style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;"></td>'; 200 echo '</form></tr>'; 201 echo "\n"; 202 } 203} 204// 更新ボタンが押されたら 205if ($_POST ['button4']) { 206 $vId = isset ( $_POST ['id'] ) ? $_POST ['id'] : ''; 207 $vUpTamego = isset ( $_POST ['upTamego'] ) ? $_POST ['upTamego'] : ''; 208 $vUpKeigo = isset ( $_POST ['upKeigo'] ) ? $_POST ['upKeigo'] : ''; 209 $vUpReibun = isset ( $_POST ['upReibun'] ) ? $_POST ['upReibun'] : ''; 210 $sql = $pdo->prepare('update honorifics set wrongHonorific=?, rightHonorific=?, example=? where id=?'); 211 $sql->execute(array(h($vUpTamego),h($vUpKeigo),h($vUpReibun),h($vId))); 212// $_SERVER['PHP_SELF']→自ページから自ページへ移動 213 header('Location:'.$_SERVER['PHP_SELF']); 214} 215 216?> 217</table> 218</body> 219</html>
修正するボタンを押したとき、input type="text"の入力フォームが表示されるんですけど、入力フォームの幅を広くしたいです。2番目の画像で、タメ語知っておいてくださいなど表示されている入力フォームのことです。
回答2件
0
こういうことでしょうか。
table要素やinput要素にはborderやpaddingがブラウザ既定で付いています。それをCSSでコントロールしたら求めておられる形に近づくとは思います。ただ、幅に関しては項目が増えているため同じ幅にするのには手間がかかると思います。（それぞれの行ごとに幅を指定すれば多分出来なくは無いと思いますが）
CSS
1td > input { 2 box-sizing: border-box; 3 width: 100%; 4} 5 6table, tr, td { 7 border: 1px solid; 8 border-collapse: collapse; 9 box-sizing: border-box; 10 padding: 0; 11} 12```**動くサンプル：**[https://jsfiddle.net/nkd7jnym/](https://jsfiddle.net/nkd7jnym/) 13 14--- 15 16また、font要素は廃止されているので、CSSで書かれたほうが良いでしょう。 17 18【font 要素 - HTML | MDN】 19[https://developer.mozilla.org/ja/docs/Web/HTML/Element/font](https://developer.mozilla.org/ja/docs/Web/HTML/Element/font) 20 21> **廃止** 22This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. 23 24> **使用上の注意:** 25この要素は使用しないで下さい！ この要素は HTML 3.2 で一度仕様に取り込まれましたが、HTML 4.01 で他の非セマンティクス要素（※装飾用途のみの要素）とともに非推奨要素に指定され、HTML5 で廃止されています。 26CSS の各プロパティを用いて、より細やかな指定が可能です CSS Fonts 27 28--- 29 30既定のCSSなど、ブラウザ上でのCSS確認にはデベロッパーツールが使えると捗ります。 31 32【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】 33[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/) 34 35【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 36[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01) 37 38【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】 39[http://gihyo.jp/dev/feature/01/devtools/0001?page=2](http://gihyo.jp/dev/feature/01/devtools/0001?page=2)
投稿2017/02/20 17:44
総合スコア69400
0
修正画面の話ですよね？inputタグでひょうじしているならtextareaに
変更してみてはいかがでしょうか？
投稿2017/02/17 03:29
総合スコア114775
ご解答下さりありがとうございます。
echo '<td class="font3">', '<textarea rows="1" cols="30" maxlength="20" width="13" name="upTamego">',$row['wrongHonorific'],'</textarea></td>';にしても変わりませんでした。
<th width="110" height="35" class="font1"><font color="white">番号</font></th>
<th class="font1"><font color="white">タメ語</font></th>
<th class="font1"><font color="white">正しい敬語</font></th>
<th class="font1"><font color="white">例文</font></th>
にしたら直りました。
ご解答下さりありがとうございました。
あなたの回答
tips
プレビュー
