フロントサイドとサーバサイドのバトンタッチ！？ PHPとMySQLの連携方法を教えてください
- フロントサイドとサーバサイドのバトンタッチについて具体的な方法を教えてください。PHPとMySQLの連携方法も教えてください。
- フロントサイドとサーバサイドの連携方法やPHPとMySQLの連携方法を教えてください。
- HTML、CSS、JavaScriptで作ったフロントサイドとPHP、MySQLの連携方法を教えてください。
- ベストアンサー
フロントサイドとサーバサイドのバトンタッチ？
apache2、html、css、JavaScript、php、Mysqlを駆使して、オリジナルブログサイトを作りたいと思っています。 簡単な自宅サーバは、作った経験があるのですが、今度は難しいですけど、挑戦したいと思います。 そこで質問です。 フロントサイドとphpの受け渡しは、具体的にどうするのでしょうか？ phpとMySQLを繋ぐのは、具体的にどうするのでしょうか？ コーディングを教えてほしいです。 htmlのコーディングは下記のとおりです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ブログ</title> <meta name="description" content="このWebサイトは、初めてHTMLで作るブログページです。"> <link rel="stylesheet" href="./css/style.css"> <style> body{ width: 100%; max-width: 800px; margin-top: auto; margin-left: auto; margin-right: auto; background-color: rgb(128, 157, 71); padding: 10px; text-align: center; } div{ background-color: rgb(247, 248, 245); padding: 2em; } script{ margin-top: 12em; } p { margin-left: 2em; text-align: left; font-size: 25px; font-weight: bold; color: rgb(10, 10, 10); } form { font-size: 25px; font-weight: bold; color: red; } input { font-size: 20px; } </style> </head> <body> <div class="v_line_fix"> <h1>Blog K・T</h1> <img id="mypic" src="hand.jpg" width="560" height="420"> <script> var pics_src = new Array("hand.jpg","picture2.jpg","picture3.jpg","picture4.jpg" ,"picture5.jpg","picture6.jpg","picture7.jpg","picture8.jpg",) var num = -1; slideshow_timer(); function slideshow_timer(){ if (num == 7){ num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; setTimeout("slideshow_timer()",6000); } </script> <p>みなさん。趣味、仕事、家族、人生観、日記、将来の夢、</p> <p>希望、スポーツ、楽しかったり悲しかった思い出、恋愛、</p> <p>旅行での出来事等々カテゴリーは沢山あると思います。</p> <p>思い思いの文章を書いてください。</p> <p>私。みなさんの投稿を読むのを心待ちにしております。</p> <p>ジャンルは自由です。</p> <p>ぜひ、お書きください。</p> <br> <p>書いてくださった方の３つの特典。</p> <p>1.ほかの執筆者と心を共有できます。</p> <p>2.思い出として残ります。</p> <p>3.心が癒されます。そして成長します。</p> <p>by K・T</p> <!--入力画面--> <form action = "./Blog.php" method = "post"> <label class="label" for="name">お名前（ニックネーム）</label> <center><input id="name" type="text" name="name"></center> <label class="label" for="e-mail">メール</label> <input id="e-mail" type="e-mail" name="e-mail"> <label class="label" for="category">カテゴリー</label> <input id="category" type="category" name="categoryl"> <label class="label" for="message">本文</label> <textarea name="area1" style="color:rgb(8, 8, 8); font-size:100%;" cols="50" rows="30"> </textarea><br> <input type="submit" name="confiem" value="確認"> </form> </div> <style> label, input[type=text]{ display:block; } </style> </body> </html> <!--入力画面-->のところから、どうphpに受け渡すのか？ phpとどうMySQLを繋ぐのか？ どうか、具体的に教えて欲しいのです。 ご多忙中誠に恐れ入ります。 ご回答の程、宜しくお願い申し上げます。
- kouzou250
- お礼率61% (126/206)
- PHP
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
＞ PHPとMySQLの間のデータの受け渡しは、PHPにMySQLを使うための関数が用意されているので、それらの関数を使うだけです。 ＞ ここのところを具体的に教えてくださいませんか？ PHPでデータベースを扱う場合、大きく分けて2種類のやりかたがあります。 1つは抽象化レイヤーをつかう方法、もう1つがデータベースエンジン固有のモジュールを使う方法です。 抽象化レイヤーをつかう場合はPDOを使うのが一番簡単で高機能でしょう。 PHPとMySQLを使ったプログラミングの入門書なども最近はPDOを使って解説しているモノが多いと思います。 PDOの使い方は公式リファレンスをご覧下さい。 プログラム例などもあるのでPHPの公式リファレンスは判りやすいですよ。 https://www.php.net/manual/ja/book.pdo.php データベースエンジン固有のモジュールに関してもPHPの公式リファレンスににプログラム例があり判りやすいと思います。 https://www.php.net/manual/ja/set.mysqlinfo.php ただ、固有モジュールで覚えてしまうと他のデータベースを使う場合、用意されている関数が大きく異なり戸惑いますし間違えやすくなってしまうのでPDOで勉強する方がいいと思います。 また、PHPのフレームワークを使用する場合は、フレームワーク固有の関数やクラスが用意されている場合がありますのでご注意下さい。
その他の回答 (1)
- t_ohta
- ベストアンサー率38% (5083/13282)
画面遷移する前提ならフロントからPHPへのデータの受け渡しは<form>を使ってデータを送り、新しい画面をPHPで出力するだけです。 画面遷移させないで動作させたいなら、PHPでWebAPIを作ってJavaScriptからAJAXで通信させ、フロントをJavaScriptで書き換えると言うことをします。 このあたりはフレームワークが沢山あるので、いろいろ試してみて質問者さんが使いやすいと思うモノを見つけるといいと思います。 有名どころだとフロントは React とか Vue.js ですかね。PHPは Laravel や CakePHP 、 Symfony とかですかね。 関連書籍やWebサイトを見るとコーディングについて学べると思います。 PHPとMySQLの間のデータの受け渡しは、PHPにMySQLを使うための関数が用意されているので、それらの関数を使うだけです。
お礼
ご回答誠にありがとうございます。 PHPとMySQLの間のデータの受け渡しは、PHPにMySQLを使うための関数が用意されているので、それらの関数を使うだけです。 ここのところを具体的に教えてくださいませんか？ ご回答のほど宜しくお願い申し上げます。
関連するQ&A
- レシポンシブのtab型メニューで困ってます
レシポンシブのtab型メニューが上手くできなくて困ってます。 希望は、表示する枠の高さは固定、表示するリストが多くなれば縦のスクロールバーが自動的に表示される、レシポンシブに対応です。jQueryが上手く動かなくなる可能性があるのでCSSのみで動くソースがネット上に掲載されていたものを自分流にアレンジしてみました。作成後Google Chromeのデヴェロッパーツールでレシポンシブを検証すると、縦のスクロールバーは一瞬表示されますがマウスを適当に動かすと消えて機能しません。ソースは以下です。 html <div class="tab5"> <div class="tab-content"> <input id="tab5-1" type="radio" name="tab5" checked> <label for="tab5-1">1</label> <input id="tab5-2" type="radio" name="tab5"> <label for="tab5-2">2</label> <input id="tab5-3" type="radio" name="tab5"> <label for="tab5-3">3</label> <input id="tab5-4" type="radio" name="tab5"> <label for="tab5-4">4</label> <div id="tab5-b1" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ1</p> </div> <div id="tab5-b2" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ2</p> <p>コンテンツ2</p> </div> <div id="tab5-b3" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ3</p> <p>コンテンツ3</p> <p>コンテンツ3</p> </div> <div id="tab5-b4" style="width: 100%;height : 100px;overflow-x: hidden;"> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> <p>コンテンツ4</p> </div> <!--tab-content--></div> <!--tab5--></div> css .tab5{ width: 100%; min-width: 320px; margin : 0px auto 20pt; } .tab5 .tab-content{ margin: 0 10px; } .tab5 label{ display: inline-block; margin: 0; padding: 0; } .tab5 label{ display: inline-block; width: 78px; padding: 3px 10px; cursor: pointer; background: #ddd; color: #777; margin-right: -2px; } .tab5 label:hover{ background: #eee; } .tab5 input:checked + label{ background: #9fb7d4; color: white; padding: 5px 10px 3px 10px; } .tab5 input{ display: none; } .tab5 #tab5-b1, .tab5 #tab5-b2, .tab5 #tab5-b3, .tab5 #tab5-b4{ display: none; padding: 10px; } .tab5 #tab5-1:checked ~ #tab5-b1, .tab5 #tab5-2:checked ~ #tab5-b2, .tab5 #tab5-3:checked ~ #tab5-b3, .tab5 #tab5-4:checked ~ #tab5-b4{ display: block; border: 1px solid #9fb7d4; } また、html中の style="width: 100%;height : 100px;overflow-x: hidden;"をcssに記述したいのですがどこに付加していいのかわかりません。 htmlを勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。 よろしくお願いいたします。
- ベストアンサー
- CSS
- css フォームのプルボタンを使う場合
cssでselect（プルダウンメニュー）を定義すると、 その後のフォーム（例えばテキストフィールド）のレイアウトが崩れます。 お詳しい方、ご教授いただければ幸いです。 ======================================= html側の記述です ======================================= <form accept-charset="UTF-8" action="/mmm" > <div style="margin:0;padding:0;display:inline"></div> <div class="field"> <label for="vvv">氏名</label> <input id="vvv_name" name="vvv[name]" size="30" type="text"> </div> <div class="field"> <label for="xxx">好きな果物</label> <select id="xxx" name="site[ftp_id]"><option selected="selected" value=""></option> <option value="1">りんご</option> <option value="2">さくらんぼ</option></select> </div> <div class="field"> <!--＃ここのレイアウトが崩れます--> <label for="yyy">好きな動物</label> <input id="yyy" name="yyy[yyy]" size="30" type="text"> </div> </form> ======================================= cssの記述です ======================================= * { margin: 0; padding: 0; } .field { width:500px;} .field label { width:230px; float:left; color:#FFFFFF; background-color:#001207; display:block; height: 2em; line-height :2em; margin-top:10px; } .field input { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } .field select { width:200px; float:left; color:#FFFFFF; margin-top:10px; height: 2em; } どうぞよろしくお願い致します。
- 締切済み
- CSS
- php $_SESSIONでデータが残らない。
いつもお世話になり誠にありがとうございます。 標記の件。 インプット画面ー＞確認画面ー＞戻るー＞インプット画面 インプット画面に戻った時、どうしても最初のインプット画面で打った内容が消えてしまいます。 プログラムを診て、誤りを指摘して頂けないでしょうか？ 今度はCSSなども書きます。 どうぞよろしくお願い致します。 記 <?php session_start(); $mode = 'input'; if( isset($_POST['back']) && $_POST['back'] ){ //何もしない } else if( isset($_POST['confirm']) && $_POST['confirm'] ){ $_SESSION['name'] = $_POST['name']; $_SESSION['email'] = $_POST['email']; $_SESSION['category']= $_POST['category']; $_SESSION['message'] = $_POST['message']; $mode = 'confirm'; } else if( isset($_POST['send']) && $_POST['send'] ){ $mode = 'send'; } else { $_SESSION['name'] =""; $_SESSION['email'] =""; $_SESSION['category']=""; $_SESSION['message'] =""; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ブログ</title> <meta name="description" content="このWebサイトは、初めてHTMLで作るブログページです。"> <link rel="stylesheet" href="./css/style.css"> <style> body{ width: 100%; max-width: 800px; margin-top: auto; margin-left: auto; margin-right: auto; background-color: rgb(71, 133, 157); padding: 10px; text-align: center; } div{ background-color: rgb(247, 248, 245); padding: 2em; } script{ margin-top: 12em; } p { margin-left: 2em; text-align: left; font-size: 25px; font-weight: bold; color: rgb(10, 10, 10); } form { font-size: 25px; font-weight: bold; color: blue; } input { font-size: 25px; margin:auto; } </style> </head> <body> <div class="v_line_fix"> <h1>Blog K・T</h1> <h2><a href="index.html">トップページ</a></h2> <?php if( $mode=='input'){ ?> <form method=post> お名前（ニックネーム）<br> <input type="text" name="name" value="<?php echo $_SESSION['name'] ?>"><br> Eメール<br> <input type="email" name="email" value="<?php echo $_SESSION['email'] ?>"><br> カテゴリー<br> <input type="text" name="category" value="<?php echo $_SESSION['category'] ?>"><br> 本文<br> <textarea style="font-size:1.5em;" cols="30" rows="80" name="message"><?php echo $_SESSION['message'] ?></textarea><br> <input type="submit" name="confirm" value="確認" /> </form> <?php }else if( $mode=='confirm'){ ?> <!--確認画面--> <form method="post"> <?php echo $_SESSION['name']?><br> <?php echo $_SESSION['email']?><br> <?php echo $_SESSION['category']?><br> <br> <?php echo nl2br($_SESSION['message'])?><br> <input type="submit" name="back" value="戻る"/> <input type="submit" name="send" value="送信"/> } </form> <?php } else { ?> <!--完了画面--> <?php } ?> </body> </html>
- ベストアンサー
- PHP
- HTMLで入力フォームがOS、ブラウザによってサイズが違います。
HTMLで入力フォームがOS、ブラウザによってサイズが違います。 どのOS、ブラウザでも同じサイズで表示したいのですが、上手くいきません。 OS：Windows７ ブラウザ：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"> 会社名<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> 住所</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
- ラジオボタンとフォーム検索の結び付け
スマホ用にゲームの攻略サイトを作りたいと思っています。 ■やりたいこと■ 値段はわかっているが名前がわからないアイテムの判別。 まずラジオボタンで「武器」か「防具」を選びます。 そして値段を入れると 「武器・600」＝勇者の剣 「防具・600」＝盾 といったように選んだラジオボタンによって同じ数字でも 表示結果を変えたいと考えています。 ラジオボタン「武器」を選ぶと検索用ボタン「button_1」が表示される。 ラジオボタン「防具」を選ぶと検索用ボタン「button_2」が表示される。 button_1と2の切り分けによってfunctionの切り分けを行っている状態です。 ■問題点■ 「防具」を押す→600を入力→「盾」が表示される→「武器」を押す→「勇者の剣」が表示されてしまう。 チェックボックスの選択を変えても表示結果は再度検索するまでそのまま、 もしくはチェックボックスを選び直した際は前回入力した数値は消えるなど対策を取りたいです。 そもそも他にもっといいやり方があるなど改善案をご教授いただきたいです。 よろしくお願いします。 【HTML】 <body> <div class="top_form"> <form name="test"> <label><input type="radio" name="radio_btn" value="buki" onclick="func();" checked="checked" />武器</label> <label><input type="radio" name="radio_btn" value="bougu" onclick="func();" />防具</label><br> <input id="test_form" type="tel" name="num"> <input id="button_1" type="button" value="button_1" onClick="func()"> <input id="button_2" type="button" value="button_2" onClick="func2()"> </form> </div> <div id="result"></div> </body> 【CSS】 <style> .top_form { width:300px; margin:0 auto; margin-top:30px; } #test_form { width:250px; height:30px; font-size:14px; margin-top:14px; } #button_1 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; } #button_2 { text-decoration: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; width:90px; height:44px; margin-top:15px; background-color:#36C; } #result { border:solid 1px #666666; margin:0 auto; height:50px; width:200px; font-size:20px; line-height:50px; text-align:center; margin-top:30px; } </style> 【javascript】 <script> function func() { radio = document.getElementsByName('radio_btn'); if (radio[0].checked) { //button_1が出る document.getElementById('button_1').style.display = ""; document.getElementById('button_2').style.display = "none"; } else if (radio[1].checked) { //button_2が出る document.getElementById('button_1').style.display = "none"; document.getElementById('button_2').style.display = ""; } var url = ""; if (document.test.num.value == "600") { url = "勇者の剣"; } document.getElementById('result').innerHTML = url; } window.onload = func; function func2() { radio = document.getElementsByName('radio_btn'); var url = ""; if (document.test.num.value == "600") { url = "盾"; } document.getElementById('result').innerHTML = url; } </script>
- ベストアンサー
- JavaScript
- Selenium IDEでiCheck対応
はじめまして。 現在、Selenium IDEによるGUIの自動操作を行うスクリプトを作成しているのですが、iCheckを用いたチェックボックスを選択することができずに困っています。通常のcheck boxではcheck関数を用いてできるかと思うのですが、clickやcheckを利用してもうまく動作しません。 お手数をお掛けしますが、もしお分かりの方がいましたら教えていただけると幸いです。 よろしくお願いします。 ☆ページをインスペクトした結果 ★チェックを入れない場合 <div class="col-sm-8"> <div aria-disabled="false" aria-checked="false" style="position: relative;" class="icheckbox_minimal"><input style="position: absolute; opacity: 0;" id=“test" name=“test" value="100" type="checkbox"><ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div><label class="" for=“test"> Test</label> </div> ★チェックした場合 <div class="col-sm-8"> <div aria-disabled="false" aria-checked="true" style="position: relative;" class="icheckbox_minimal checked"><input style="position: absolute; opacity: 0;" id=“test" name=“test" value="100" type="checkbox"><ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 0px none; opacity: 0;" class="iCheck-helper"></ins></div><label class="" for=“test"> Test</label> ★両者の差分 - icheckbox_minimalかicheckbox_minimal checked - aria-checked="false"か"true" -
- 締切済み
- HTML
- legendの見え方？
フォームを作っているのですがfirefoxで見るとlegendの width指定が全く効きません・・・ ie6で見ると意図したように表示されます！ display:block;などいろいろ試してみたのですがなにも 変わらずでした。 firefoxでも意図したように見えるためにはどうすれば いいのでしょうか？宜しくお願いします。 ---html--- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="../css/form.css" type="text/css" /> <title>title</title> </head> <body> <div> <form name="form1" method="post"> <fieldset> <legend>情報1</legend> <label for="name">氏名<span class="check">※</span></label> <input type="text" name="NAME" class="w180" /><br /> <label for="address">住所<span class="check">※</span></label> <input name="ADDRESS" type="text" class="w180" /><br /> </fieldset> <fieldset> <legend>情報2</legend> <label for="tel">電話番号<span class="check">※</span></label> <input name="TEL" type="text" class="w180" /><br /> <label for="fax">FAX番号</label> <input name="FAX" type="text" class="w180" /><br /> </fieldset> <p align="center"><input type="submit" value="送信" /></p> </form> </div> </body> </html> ---css--- fieldset { display: block; width: 500px; margin: 0 auto 0.5em auto; padding: 5px; text-align: center; border: solid 1px #278ed1; font-family: verdana, sans-serif; line-height: 1.5em; } legend { display: block; width: 180px; height: 31px; margin-bottom: 5px; padding: 7px 0 3px 7px; background: #fff url(../images/form/legend_bg.gif) no-repeat; font-size: 1.1em; font-weight: bold; color: #fff; text-align: left; }
- ベストアンサー
- HTML
- フォームのレイアウト崩れを防ぐ方
添付画像のようなフォームのフィールドセットを作りました。 画面サイズ100%の場合は添付画像左側のように整った状態です。 が、画面の右側から縮小すると半分あたりでガタッとレイアウトが崩れます。 フィールドセットの下はjqueryのデータテーブルズを使用しています。縮小した分文字数などは 減りますがレイアウトは大きく崩れません。 フォームの方もせめて画面の半分程度まで縮小してもレイアウトが大崩れしないようにする方法はありますか？ また１から作り直すには時間がたりません。 <div>等ではさんでにクラスやIDをつけCSSでなんとか設定するような方法はありますでしょうか？ 以下は（凡そ）の記述です。 初心者ですのでレスポンシブデザインなどもあまり理解できていません。 何かいいやり方をご存知のかたいらっしゃいましたら教えてください。よろしくお願いします。 ＜HTML＞ <form action="staff_order.php" id="entry" method="post"> <fieldset id="staff_order"> <label for="user_id"><span class="required">*</span>●●●:</label> <select name="user_id" autofocus required> <option value="" selected> 選択してください</option> <?php foreach($rows_students as $student){ print '<option value="' . $student["user_id"] . '">' . $student["student_name"] . '</option>\n'; } ?> </select> </div> <div> <label for="title"><span class="required">*</span>●●●:</label> <input type="text" name="title" size="80" maxlength="100" required d="title" style="border-radius:0.5em;"> </div> <div><label for="date"><span class="required">*●●●: </span＞ </label> <input type="date" name="date" required id="date"> </div> -> <div><label for="point"><span class="required">*</span>●●●:</label> <input type="number" name="point" min="0" max="1000" required id="point"><b style="color: #411C00;"> P</b></div> <label for="remarks" class="order_remarks">●●:</label> <textarea name="remarks" rows="3" cols="60" maxlength="500" id="remarks"></textarea></div><p class="notes">(*)は必須項目です </p> <div class="so_button"><button type="submit" name="confirm" value="登録">登録</button> </div> </fieldset> </form> ＜CSS＞ input:focus, textarea:focus { background-color: #ffffcc; } button, input, select, textarea { font-family: inherit; font-size: 100%; padding-left: 5px; outline: none; } input[type=number], input[type=date] { text-align: right; padding-right: 8px; } input, select, textarea { border: solid 1px #CCC; border-radius: 3px; box-shadow: 0px 0px 5px #CCC inset; } /*↓form enry↓*/ form#entry fieldset#staff_order { border: 1px solid #666666; box-shadow: 0px 0px 2px; background-color: #bed487; border-radius: 0.5em; width: 90%; min-width: 90%; padding-top: 25px; margin-bottom: 25px; }
- 締切済み
- CSS
- 【CSS】HTML要素の指定
お手柔らかにお願いします。 HTMLを下記のように記述しました。 ---------- <section id="login"> <h1>ログイン</h1> <form> <label for="my_id">ID</label> <input id="my_id" type="text" size="10" maxlength="10"><br /> <label for="my_pass">パスワード</label> <input id="my_pass" type="password" size="10" maxlength="10"><br /> </form> <a><p>ログイン</p></a> <p><a>パスワードを忘れた方はこちら</a></p> </section> ---------- 上記の”<a><p>ログイン</p></a>”に対して、画像を差し込みたいと思っています。 p要素にid名やclass名を入れれば簡単にできるのですが、HTMLは変更せず、CSSのみで要素を特定したいと思っています。 こちらのサイト（http://web-dd.net/?p=278）を参考にCSSを以下のように書いてみましたが、うまくいきませんでした。 ---------- #login label { display: inline-block; font-size: 0.8em; text-align: right; vertical-align: middle; width: 70px; margin: 5px 0 5px 5px; } #login input { display: block; float: right; width: 80px; margin: 5px 10px 5px 5px; } #login br { clear: left; } #login > form + p { overflow: hidden; text-indent: -10em; background: url(img/btn_login.png) no-repeat; width: 90px; height: 30px; } #login a + p { font-size: 0.7em; text-align: center; margin: 15px auto 10px auto; } ---------- ”#login > form + p”という要素の指定が間違っているのかも、と思っていますが、formの部分をh1やinput、brなどにしてもうまくいきませんでした。 あまり難しいことは勉強中なのでわかりませんが、どこをどう直せばいいのか、わかりやすく説明してくださるとうれしいです。 よろしくお願いします。
- 締切済み
- CSS
- ｃｓｓで中央よせ
CSSでwidthはパーセントで設定する場合テキストボックス、ボタン、リンクを一列に 中央配置したいのですがどうしたらいいのでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--Android 1.6対応--> <style type="text/css"> <!-- div#topCouponSearch { background-image: url("./top_coupon_search_bg.jpg"); display: block; height: 26px; margin-bottom: 1px; width: 100%; } .topCouponSearcha { display: block; font-weight: bold; height: 15px; padding: 5px 0 0 1px; width: 100%; } .topCouponSearcha2 { background-color: #FFFFFF; background-image: url("./spacer.gif"); color: #999999; height: 10px; padding: 3px 0 0; width: 40%; font-size: 10px; } .topCouponSearcha3 { font-size: 11px; font-weight: normal; margin-left: 3px; } button#getad { font-size: 10px; } --> </style> </head> <body> <form id="form1" action="" method="post" name="form1"> <div id="topCouponSearch"> <span class="topCouponSearcha"> <input id="address" class="topCouponSearcha2" type="text" value="" name="address" style="color: #999999;"> <button id="getad">検索</button> <span class="topCouponSearcha3"> <a href="?act=u05">店舗一覧</a> </span> </span> </div> </form> </body> </html>
- ベストアンサー
- CSS
お礼
ご親切にどうもありがとうございます。 phpのフレームワークは、Laravel、Cakephp どちらもインストールできませんでした。 難しかったですよ。 前途多難です。 今日は、無理矢理LINUXを入らないパソコンに 入れようとして１万円と体力を使い果たしてしまいました。 貴方様は色々と詳しいですね。 頼りにしています。 今後とも宜しくお願い致します。