質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • PHP

    23495questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    11089questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

PHP HTML trタグについて

受付中

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 478

marimokomokmOk

score 46

PHPで敬語学習ノートを作っています。
初期画面では正常にみやすく一覧が表示されますが、
修正するボタンを押すとテーブルの文字等が小さくなってしまいます。 

修正するボタンを押しても初期画面のようなテーブル幅の間隔、文字の大きさでありたいです。
ご教示ください。
イメージ説明
イメージ説明

<?php
// var_dump($_POST)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm1ns="http://www.w3.org/1999/xhtml">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">


<title>敬語学習ノート</title>
<style type="text/css">
<!--
BODY{
background-image : url(kokuban1.jpg);
background-repeat : no-repeat;
background-attachment : fixed;
background-position :right top;}
-->

.font1 {
    font-family: "あずきフォント", serif;
}

.font2 {
    font-family: "あずきフォント", serif;
    font-size: 160%;
    color: "#e4b9f9";
}

.font3 {
    padding: 4px;
}

.body {
    cursor: url(hosi5.ani);
}
@font-face{
    font-family: 'あずきフォント'; /* お好きな名前に */
    src: url('azuki.eot'); /* IE9以上用 */
    src: url('azuki.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
        url('azuki.woff') format('woff'), /* モダンブラウザ用 */
        url('azuki.ttf') format('truetype'); /* iOS, Android用 */
}

html,body {
    scrollbar-base-color: #c3d7e0;
    scrollbar-track-color: #c3d7e0;
    scrollbar-face-color: #c3d7e0;
    scrollbar-shadow-color: #c3d7e0;
    scrollbar-darkshadow-color: #c3d7e0;
    scrollbar-highlight-color: #c3d7e0;
    scrollbar-3dlight-color: #c3d7e0;
    scrollbar-arrow-color: #ffffff;
    filter: chroma(color = #c3d7e0);
}
/* .absolute{ */
/*     position:absolute; */
/*     right:50px; */
/* } */
</style>

</head>
<body>
    <table cellspacing="0" width="300" cellpadding="4"
        style="border: 5px black solid;">
        <tr>
            <td style="border: 5px brown inset; color: white;" bgcolor="green">
                <p class="font1">検索したい文字を入力してください</p>
                <form action="" method="post">
                    <input type="text" name="keyword"> <input type="submit"
                        name="button1" value="検索"
                        style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">
                        </br>
                    <img src="u09.gif" align="right">
                            </p>

            </td>
        </tr>
    </table>
    <table cellspacing="0" width="600" cellpadding="4"
        style="border: 5px black solid;">
        <tr>
            <td style="border: 5px brown inset; color: white;" bgcolor="green">
                <p>
                    <img src="res-19.gif"><font class="font1">ノートに書く</font>
                </p> <font class="font1">タメ語<input type="text" name="tamego"> 正しい敬語<input
                    type="text" name="keigo"> </br> 例文 <input type="text" name="reibun"
                    style="width: 405px;"> <input type="submit" name="button2"
                    value="書く"
                    style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">
                    <!-- </form> --> <img src="res-19.gif"> </br> <!--<img src="u07.gif"  style="position:absolute;right:255px"> -->
                        <img src="u09.gif" align="right">
                            </p>

            </td>
        </tr>
    </table>
    <button type="submit" name='button3' value='button3'
        style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">修正する</button>
    </form>

    <!-- <img src="hooter.png"> -->
    <table cellpading="0" border="1" width="80%">
        <caption class="font2">敬語学習ノート</caption>
        </br>
        </p>
        </br>
    <!--    <tr style="background: #ccccff">-->
        <tr style="background: #cc528b">
            <th 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>
            <th class="font1"></th>
        </tr>
<?php
// $pdo = new PDO ( 'mysql:host=localhost;dbname=honorific;charset=utf8', 'staff', 'password' );
$pdo = new PDO ( 'mysql:host=localhost;dbname=takahashi1;charset=utf8', 'takahashi', 'takahashi' );
// $pdo = new PDO ( 'mysql:host=192.168.1.30;dbname=honorific;charset=utf8', 'staff1', 'password' );
function h($str) {
    return htmlspecialchars ( $str);
}
// もし何かしらPOSTされたら
if ($_SERVER ['REQUEST_METHOD'] === 'POST') {
// 検索ボタンが押されて、空じゃなかったら
    if ($_POST ['button1'] && ! empty ( $_POST ['keyword'] )) {
        $vKeyword = isset ( $_POST ['keyword'] ) ? $_POST ['keyword'] : '';

        $sql = $pdo->prepare ( 'select * from honorifics where wrongHonorific like ? or rightHonorific like ? or example like ?' );
        $sql->execute ( array (
                '%' . $vKeyword . '%',
                '%' . $vKeyword . '%',
                '%' . $vKeyword . '%'
        ) );
    }
// もし書くボタンが押されたら
    if ($_POST ['button2']) {
        $vTamego = isset ( $_POST ['tamego'] ) ? $_POST ['tamego'] : '';
        $vKeigo = isset ( $_POST ['keigo'] ) ? $_POST ['keigo'] : '';
        $vReibun = isset ( $_POST ['reibun'] ) ? $_POST ['reibun'] : '';
        $sql = $pdo->prepare ( 'insert into honorifics values(null, ?, ?, ?)' );
        $sql->execute ( array (
                $vTamego,
                $vKeigo,
                $vReibun
        ) );
    }
// もし検索ボタンが押されて、空じゃなかったら
    if (! empty ( $_POST ['keyword'] ) && $_POST['button1']) {
        foreach ( $sql->fetchAll () as $row ) {
            echo '<tr>';
            echo '<td>' . h ( $row ['id'] ), '</td>';
            echo '<td><font class="font3">', h ( $row ['wrongHonorific'] ), '</font></td>';
            echo '<td>', h ( $row ['rightHonorific'] ), '</td>';
            echo '<td>', h ( $row ['example'] ), '</td>';
            echo '</tr>';
            echo "\n";
        }
        echo '<button onclick="history.back()"style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;">戻る</button>';
    }
    if (empty ( $_POST ['keyword'] ) && $_POST['button1']) {
        foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) {
            echo '<tr>';
            echo '<td>' . h ( $row ['id'] ), '</td>';
            echo '<td class="font3">', h ( $row ['wrongHonorific'] ), '</td>';
            echo '<td cellpadding="15">', h ( $row ['rightHonorific'] ), '</td>';
            echo '<td>', h ( $row ['example'] ), '</td>';
            echo '</tr>';
            echo "\n";
        }
    }
}
// 直リンク時
if (! $_POST) {
    foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) {
        echo '<tr>';
        echo '<td>' . h ( $row ['id'] ), '</td>';
        echo '<td class="font3">', h ( $row ['wrongHonorific'] ), '</td>';
        echo '<td cellpadding="15">', h ( $row ['rightHonorific'] ), '</td>';
        echo '<td>', h ( $row ['example'] ), '</td>';
        echo '</tr>';
        echo "\n";
    }
}
// 修正するボタンが押されたら
if ($_POST ['button3']) {
// query→引数に指定したSQL文をデータベースに対して実行する
    foreach ( $pdo->query ( 'select * from honorifics order by id desc' ) as $row ) {
        echo '<tr><form action="" method="post">';
        // type属性をhiddenにすることでフォームに商品番号を含めつつも編集できないようにしている
        echo '<input type="hidden" name="id" value="', $row ['id'], '">';
        echo '<td>' . h ( $row ['id'] ), '</td>';
        echo '<td class="font3">', '<input type="text" name="upTamego" value="', $row ['wrongHonorific'], '">', '</td>';
        echo '<td cellpadding="15">', '<input type="text" name="upKeigo" value="', $row ['rightHonorific'], '">', '</td>';
        echo '<td>', '<input type="text" name="upReibun" value="', $row ['example'], '">', '</td>';
        echo '<td><input type="submit" name="button4" value="更新" style="border: 1px solid #ff44ff; color: #ee00ff; background-color: #eeccff;"></td>';
        echo '</form></tr>';
        echo "\n";
    }
}
// 更新ボタンが押されたら
if ($_POST ['button4']) {
    $vId = isset ( $_POST ['id'] ) ? $_POST ['id'] : '';
    $vUpTamego = isset ( $_POST ['upTamego'] ) ? $_POST ['upTamego'] : '';
    $vUpKeigo = isset ( $_POST ['upKeigo'] ) ? $_POST ['upKeigo'] : '';
    $vUpReibun = isset ( $_POST ['upReibun'] ) ? $_POST ['upReibun'] : '';
    $sql = $pdo->prepare('update honorifics set wrongHonorific=?, rightHonorific=?, example=? where id=?');
    $sql->execute(array(h($vUpTamego),h($vUpKeigo),h($vUpReibun),h($vId)));
//     $_SERVER['PHP_SELF']→自ページから自ページへ移動
    header('Location:'.$_SERVER['PHP_SELF']);
}

?>
</table>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/02/17 17:05

    まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

    キャンセル

  • marimokomokmOk

    2017/02/20 13:50

    修正するボタンを押したとき、input type="text"の入力フォームが表示されるんですけど、入力フォームの幅を広くしたいです。2番目の画像で、タメ語知っておいてくださいなど表示されている入力フォームのことです。

    キャンセル

回答 2

+1

修正画面の話ですよね?inputタグでひょうじしているならtextareaに
変更してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/02/17 13:50 編集

    ご解答下さりありがとうございます。
    echo '<td class="font3">', '<textarea rows="1" cols="30" maxlength="20" width="13" name="upTamego">',$row['wrongHonorific'],'</textarea></td>';にしても変わりませんでした。

    キャンセル

  • 2017/02/17 15:13

    <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>
    にしたら直りました。
    ご解答下さりありがとうございました。

    キャンセル

+1

こういうことでしょうか。

table要素やinput要素にはborderやpaddingがブラウザ既定で付いています。それをCSSでコントロールしたら求めておられる形に近づくとは思います。ただ、幅に関しては項目が増えているため同じ幅にするのには手間がかかると思います。(それぞれの行ごとに幅を指定すれば多分出来なくは無いと思いますが)

td > input {
    box-sizing: border-box;
    width: 100%;
}

table, tr, td {
    border: 1px solid;
    border-collapse: collapse;
    box-sizing: border-box;
    padding: 0;
}

動くサンプル:https://jsfiddle.net/nkd7jnym/


また、font要素は廃止されているので、CSSで書かれたほうが良いでしょう。

【font 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/font

廃止
This 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.

使用上の注意:
この要素は使用しないで下さい! この要素は HTML 3.2 で一度仕様に取り込まれましたが、HTML 4.01 で他の非セマンティクス要素(※装飾用途のみの要素)とともに非推奨要素に指定され、HTML5 で廃止されています。
CSS の各プロパティを用いて、より細やかな指定が可能です CSS Fonts


既定のCSSなど、ブラウザ上でのCSS確認にはデベロッパーツールが使えると捗ります。

【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

  • PHP

    23495questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    11089questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。