画面を設計する

体裁は、css/style.cssで行う。

Filename: /ci/application/views/mailform.php

<?php $this->load->view('elements/header');?>
<h1>メールでのお問い合わせ</h1>
<?php echo form_open('sendmail/confirm'); ?>
お名前<br />
<input id="name" type="text" name="name" value="" /><br />
メール<br />
<input id="mail" type="text" name="mail" value="" /><br />
題名<br />
<input id="subject" type="text" name="subject" value="" /><br />
お問い合わせ<br />
<textarea id="body" name="body"></textarea><br />
<input type="submit" value="確認画面へ">&nbsp;&nbsp;
<input type="reset" value="リセット"></br />
<?php echo form_close(); ?>
<?php $this->load->view('elements/footer');?>

CSSを適用する前の画面

CSSを適用後の画面

Filename: /ci/css/style.css

body {
background-color: #FFF;
color: #333;
font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
#wrapper {
width: 600px;
margin: 0 auto;
}
input,textarea {
margin-bottom: 0.5em;
}
#name {
width: 14em;
}
#mail {
width: 32em;
}
#subject {
width: 38em;
}
#body {
width:32em;
height: 10em;
}
input[type=text]:focus,textarea:focus {
background-color: #bcffbd;
}