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

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

ただいまの
回答率

88.57%

ボタンを羅列するプログラム(PHP)にCSSを適用させたい

受付中

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 798

paras

score 18

 前提・実現したいこと

cssでボタンのサイズを変えたいと考えています。
しかし、現在自分が作成しているコードだと反映されません。
phpを用いてボタンを配列するプログラムなのですが、phpだから反映されないのか、変数のため、classがボタンごとに変わってしまうからなのか、どのような原因で反映されないかがわかりません。

該当プログラムでcssが反映されるようにしたいです。
詳しい方教えていただけると幸いです。
よろしくお願いいたします。

 発生している問題・エラーメッセージ

ボタンのサイズを変更するcssのコードが反映されない。

 該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="0001.css" rel="stylesheet" type="text/css">
</head>

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).on('click','.cx',function(){
    $(this).prev(':checkbox').trigger('click');
  });
$(function(){
  $('#go').on('click',function(){
    $.ajax({
    url:"get.php",
    data:{r1:$('#r1').val(),r2:$('#r2').val(),c1:$('#c1').val(),c2:$('#c2').val(),},
    }).done(function(data){
      $('#view').html(data);
    });
  }).trigger('click');
});
</script>
<form>
<input type="text" name="r1" id="r1" value="a">
<input type="text" name="r2" id="r2" value="c"><br>
<input type="text" name="c1" id="c1" value="1">
<input type="text" name="c2" id="c2" value="5"><br>
<input type="button" value="go" id="go">
</form>

<hr>
<div id="view"></div>
<style>
[name="c[]"]{display:none;}
[name="c[]"]:checked + .cx{background-Color:yellow;}
</style>
<?php
$r1=filter_input(INPUT_GET,"r1");
$r2=filter_input(INPUT_GET,"r2");
$c1=filter_input(INPUT_GET,"c1");
$c2=filter_input(INPUT_GET,"c2");
foreach(range($r1,$r2) as $r){
  foreach(range($c1,$c2) as $c){
    print "<input type='checkbox' name='c[]' id='c{$r}-{$c}' value='{$r}-{$c}'><input type='button' value='{$r}-{$c}' class='cx'>";

  }
  print "<br>";
}

?>
</body>
</html>
@charset "utf-8";
/* CSS Document */
button.cx
{


    font-size: 3.4em;

    font-weight: bold;

    padding: 20px 30px;

    width:100px;

    height:50px;

}

 試したこと

htmlでボタンを一つ作成し、それにcssを反映させることはできました。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="0001.css" rel="stylesheet" type="text/css" >
</head>

<body>
    <button class="cx" type="submit">Button</button>
</body>
</html>
@charset "utf-8";
/* CSS Document */
button.cx
{


    font-size: 3.4em;

    font-weight: bold;

    padding: 20px 30px;

    width:100px;

    height:50px;

}

 補足情報(FW/ツールのバージョンなど)

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

button.cx<button class="cx">に適用されます。<input type="button" class="cx">には適用されません。

セレクタをinput[type="button"].cxにするか、<button>要素を生成するようにしましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+1

buttonタグではなく、inputのbuttonを使用しているからでは?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

回答依頼をいただいたので

既に回答がついていますが、回答依頼をいただいたので、ちょっと長くなりますが、何個か対策をご紹介します。

整理すること

CSSを適応したいのは、<button>タグ、<input type="button">もしくは<input type="submit">どれでしょう?
全部ボタンのように見えますが役割は違いますが、質問者さんは理解されていますか?

もし理解が不足しているようで自分で再学習不可能な場合にはこの回答に対するコメントでかまわないので申し出てください。

とりあえずの対策

変えたいのはボタンのサイズだけですよね。

それなら邪道ですが、JavaScriptとか使わなくてもPHPから出力する大きさを指定したい部分で

style="width:PX/%/PT/EM; hight:PX/%/PT/EM;"

のようにサイズを変更したいタグに含めてしまいましょう。

<button style="width:200PX;hight:300PX;">ボタンの表示名</button>


または

<input type="submit style="width:60%; hight:50%" value="PHPに渡したときの値">

のようにです。

これはあくまでも応急対策で多用するとブラウザの読み込み時間を増大させる可能性があります。

もう少しスマートに

やっぱりScript Creatorなるものできるだけスマートにしたいですよね。
だけどJavaScript不要です。
PHPの
print <<<めたもじ
出力内容
メタ文字;
のようにしてCSSを含む動的ソースを出力してしまいましょう。

<?php
print <<<sanmojiijounaranandemoOK

<html>
<head>
<style type="text/css">
#'{$id}'{
width:20PX;
hight:70px;
}
#'{$id2}'{
width:30%;
hight:40%;
}
</style>
</head>
<body>
<button id="'{$id}'">ボタン</button>

<form action="csstest.php" method="post">
<input type="submit" id="{'{$id2}'"name="phpname" value="phpvalue">
</form>
</body>
</html>

sanmojiijounaranandemoOK;

?>

のようにします。

IDアトリビュートの値は各ページで唯一である必要があります。

そもそもサイズだけなら

本当にCSSじゃなきゃ対処できないですか?

<button width="50px" hight="70px">ボタンの表示名</button>
とか
<input type="button" width="10%" hight="10%">
とかじゃだめですか?

CSSはブラウザによって効果が様々だったりするので、どうしてものときとブラウザの対応状況によっては一部の利用者で意図した表示が実現できない事象が発生する場合があるので用いるときには最大限の注意を!

最後にJavaScriptの併用について

JavaScriptを使う多くの場合は、ページを読み込んだあとで、サーバーと通信しなくてもページのデザインやレイアウトをcssの値を変更したりhtmlのアトリビュートを追加または削除もしくは変更したりする目的のことが多いです。

そんなわけで

どの言語にどの役割を持たせるのか、言語の特性と制限をよく理解して
ここはHTML

ここはPHP

ここはCSS

ここはJavaScript

「じゃなきゃだめなの?」

と自分の中で確認再定義を繰り返して最適な言語の組み合わせを考慮したサイト設計を心がけてください。

今回もなぜボタンの大きさを変更したかったのか、どのタイミングで大きくしたいのか、なぜそれが必要なのかが明示されていませんでしたね。

自分なりのフローチャートと使用書をぜひコーディングの前に作成しましょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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