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

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

ただいまの
回答率

89.06%

チェックボックスを横並びにしたい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,092

チェックボックスが横並びになっていたのですが、急に縦並びになってしまいました。

cssは外部のリンクからとってきているので特にいじれるわけでもありあせん。

phpファイルの何かをいじってしまい縦並びになってしまったのですが、どのようにしたら横並びに戻るでしょうか?

<?php
header("Content-Type: text/html; charset=UTF-8");
session_start();
// if( isset($_SESSION['user']) != "") {
//     // ログイン済みの場合はリダイレクト
//     header("Location: home.php");
// }

// DBとの接続
include_once 'dbconnect.php';
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PHPの会員登録機能</title>
<link rel="stylesheet" href="style.css">

<!-- Bootstrap読み込み(スタイリングのため) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="col-xs-6 col-xs-offset-3">

<?php
// signupがPOSTされたときに下記を実行
if(isset($_POST['signup'])) {
    $mysqli = new mysqli('localhost', 'root', '', 'foopy');
    mysqli_set_charset($mysqli, "utf8");



    $name = $mysqli->real_escape_string($_POST['name']);
    $mail = $mysqli->real_escape_string($_POST['mail']);
    $password = $mysqli->real_escape_string($_POST['password']);
    $postcode = $mysqli->real_escape_string($_POST['postcode']);
    $address = $mysqli->real_escape_string($_POST['address']);
    $tel = $mysqli->real_escape_string($_POST['tel']);
    $opentime = $mysqli->real_escape_string($_POST['opentime']);
    $closetime = $mysqli->real_escape_string($_POST['closetime']);
    $foods = $_POST['food'];

    if (preg_match('/^[0-9]{3}-[0-9]{4}$/', $tel)) {
        $tel = $tel;
    }else{
        $error = '電話番号は-(ハイフン)を除いて入力して下さい。';
    }


    // $password = password_hash($password, PASSWORD_BCRYPT);

    // POSTされた情報をDBに格納する
    // $query = 
    $query = "INSERT INTO rest_member(rest_name,rest_mail,rest_password,postcode,address,tel,opentime,closetime) VALUES('$name','$mail','$password','$postcode','$address','$tel','$opentime','$closetime');";

    // var_dump($query);
    // var_dump("<br>");

    if($mysqli->query($query)) {
        $query = "DELETE FROM link_genre WHERE mail = '$mail'";
        // var_dump($query);
        // var_dump("<br>");
        $mysqli->query($query);

        foreach((array)$foods as $food){
            if($food != "on") {
                $query = "INSERT INTO link_genre(mail, genre) VALUES('$mail', $food)";

                $isOk = $mysqli->query($query);
            }
        }
    }

    if($isOk) {  ?>
        <div class="alert alert-success" role="alert">登録しました</div>
        <?php } else { 

            ?>
        <div class="alert alert-danger" role="alert">エラーが発生しました。</div>
        <?php
    }
} ?>

<form method="post">
    <h1>会員登録フォーム</h1>
    <p>項目を入力して下さい。</p>
    <div class="form-group">
        <input type="text" class="form-control" name="name" placeholder="店舗名" required />
    </div>
    <div class="form-group">
        <input type="email"  class="form-control" name="mail" placeholder="メールアドレス" required />
    </div>
    <div class="form-group">
        <input type="password" class="form-control" name="password" placeholder="パスワード" required />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="postcode" placeholder="郵便番号" required />
    </div>
    <div class="form-group">
        <input type="text" class="form-control" name="address" placeholder="住所" required />
    </div>
    <div class="form-group">
        <input type="tel" class="form-control" name="tel"  placeholder="電話番号" required />

    </div>
    <div class="form-group">
        開店時刻<input type="time" class="form-control" name="opentime" placeholder="開店時刻"  value="00:00" required />
        閉店時刻<input type="time" class="form-control" name="closetime" placeholder="閉店時刻" value="00:00" required />
    </div>
    <div class="form-group">
    <input type="checkbox" name="food[]" class="form-control" value="0">パスタ
    <input type="checkbox" name="food[]" class="form-control" value="1">串カツ
    <input type="checkbox" name="food[]" class="form-control" value="2">カレー
    <input type="checkbox" name="food[]" class="form-control" value="3">ラーメン
    <input type="checkbox" name="food[]" class="form-control" value="4">ピザ
    </div>

    <button type="submit" class="btn btn-default" name="signup">会員登録する</button>
    <a href="rest_index.php">ログインはこちら</a>
</form>

</div>
</body>
</html>

イメージ説明

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/03/14 06:24

    BootStrapをタグに追加しておいてください

    キャンセル

  • kings_of_king12

    2019/03/14 06:25

    ありがとうございます。
    追加しました。

    キャンセル

回答 2

checkベストアンサー

+1

style.cssにどのような設定が書かれているのかわかりませんが、取りあえずBootstrapのcssと読み込む順序を逆にしてみてはいかがでしょうか。

追記
通常、Bootstrapなどのcssフレームワークを使用してカスタマイズする時は、カスタマイズ用のcssをBootstrapより後に読み込みます。そうすることで、同じクラス名や要素のスタイルを上書きすることができます。
Bootstrapの.form-controlはそのままではインライン要素にはなりません。
また、ラジオボタンやチェックボックス用には別のマークアップの仕方があり、Bootstrapのサイトに書いてありますのでご参照ください。
https://getbootstrap.com/docs/3.3/css/#forms
また、ブラウザの開発ツールを使えばどの部分にどのようなcssが適用されているのかわかりますので、まずはご自身で確認して、その部分をカスタマイズするなりhtmlのマークアップの仕方を変えるなりして色々お試しになることをお勧めします。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/14 06:23

    ご回答ありがとうございます。
    質問に記述したphpのhead内にcssのリンクは2つあるのですがstyle.cssの方はダミーですので実質Bootdtrapのcssリンクだけなんですよね。

    順番を入れ替えてみましたが、特に変わりませんでした。

    気づいたらこうなっていたので、焦っています。

    キャンセル

  • 2019/03/14 06:38

    追記しましたのでご確認ください。

    キャンセル

  • 2019/03/16 16:29

    ありがとうございます。
    無事なおりました。

    キャンセル

0

form-inlineのクラスを付けてみるとどうでしょうか?

    <div class="form-group form-inline">
    <input type="checkbox" name="food[]" class="form-control" value="0">パスタ
    <input type="checkbox" name="food[]" class="form-control" value="1">串カツ
    <input type="checkbox" name="food[]" class="form-control" value="2">カレー
    <input type="checkbox" name="food[]" class="form-control" value="3">ラーメン
    <input type="checkbox" name="food[]" class="form-control" value="4">ピザ
    </div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • ただいまの回答率 89.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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