html 1カラム練習
■formのボタンの位置をcenterに寄せたい場合は、form自体をcenterにする。
■個々にinputボタンの位置を調整したい場合は、< p >や< li >にいれる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="Shift-JIS"> <title>ガラスの靴の持ち主を探しています!</title> <link rel="stylesheet" href="garasu.css"> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <script src="sample.js"></script> </head> <body> <div id="wrapper"> <header><h1><img src="garasuheder.png" alt="ガラスの靴の持ち主を探しています!"></h1></header> <div id="content"> <form> <p id="annotate">川崎アゼリア・オープン懸賞 パソコンでご応募する方は下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p> <div id="policy"> <h2>【応募規約】</h2> <ul><li>* パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。</li><li> ※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。</li><li>* 川崎アゼリアで同時期に行われる他のキャンペーンと重複して当選することはできません。</li><li> * 当選後の権利譲渡、換金はできません。</li><li> * 応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</li><li> * ご応募は日本国内在住の方に限らせていただきます。</li><li> * 応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li><li> * 景品の”ガラスの靴”は、11月17日から12月25日まで川崎アゼリア街内(サンライト広場)に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。</li></ul> <h2>【個人情報のお取扱いについて】</h2> <p>ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。 </p> <h2>【個人情報のお取扱いについて】</h2> <a href="#">(川崎アゼリアプライバシーポリシー)</a> <h2>応募先・お問い合わせ</h2> </div> <input type="submit" id="yes" value="はい"> <p id="test"><input type="submit" id="yes" value="ボタンを右寄せ"></p> </form> <!-- /#content --></div> <footer></footer> <!--/#wrapper--></div> </body> </html>
*{ margin:0px; padding:0px; } body{ margin:auto; text-align:center; background:#C8FFFF; width:800px; font-size: 0.8em; /* 約13px相当 */ line-height:1.6; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; color:#333973; } #wrapper{ background-color:#E3FDFC; } header{ background:#96EFE4; width:100%; height:237px; } #content{ text-align:left; padding:35px 60px; } form{ text-align:center; } #annotate{ font-size:95%; margin:30px 5px; color:#006600; text-align:left; } #policy{ margin:auto; padding:30px; width:90%; height:250px; margin-bottom: 1.5em; background-color: #ffffff; border: 1px #c0c0c0 solid; overflow-y: auto; text-align:left; } #policy h2{ font-size:115%; margin: 10px 0 5px 0; } #policy ul{ list-style:none; text-indent:5px; } #policy li{ /*list-style:url(list3.gif);*/ } p{ margin-left:8px; text-indent:8px; } #test{ text-align:right; } input#yes{ margin-top:10px; padding:3px; text-align:left; }