【 HTML, CSS 】 ヘッターとフッターを固定するレイアウト
HTMLとCSSでヘッダーとフッターを固定するレイアウトサンプルです。
ポイント
?ヘッダーとフッターにそれぞれ position: fixed; をつける
?固定する位置は top: 00px; 、left: 00px; 、bottom: 00px 、right: 00px; の様に指定する
?ヘッダーとフッター幅の分だけ、コンテント部分の上下に余白（padding）をとる
実際やることはこれだけで、あとはレイアウト次第になります。
以下はサンプル例です。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Fixed header and footer</title> <link rel="stylesheet" href="css/fixed.css"> </head> <body> <header> <h1><a href="#" title="typhoon"><span class="hidden">typhoon</span></a></h1> <ul> <li><a href="#">about</a></li> <li><a href="#">regist</a></li> <li><a href="#">inquiry</a></li> </ul> </header><!-- /header --> <div id="content"> <section> <h2>Main Content 1</h2> <p>Lorem ipsum dolor sit amet, est tation omnium ex, timeam neglegentur qui in. Sea ubique eripuit in. Eu altera aperiri mea, solet accusam periculis ne vim, ut malorum fabulas habemus mel. Vis partiendo scribentur ut. Mel consequat reprimique an, laudem quodsi eloquentiam usu et.</p> </section> <section> <h2>Main Content 2</h2> <p>Duo eu minimum accusata, dicta nominavi eu est. Ex graeci pericula constituto vis, quo inermis officiis ad, an agam graecis lobortis est. Ex quo errem alterum appareat. Suas paulo tractatos et eum. Et est accumsan repudiandae consequuntur, ne vel stet eligendi. Has ne integre molestie, illud summo forensibus ei sed, ei his vidisse aliquip. Duis apeirian persecuti ut nam.</p> </section> <section> <h2>Main Content 3</h2> <p>Detraxit mandamus maluisset at vis, eros primis usu ut. Tota solet in sea. Ex altera voluptatum eam. Pro iudico legere ea. Aeterno vidisse assueverit cu vis. Melius consequuntur ea cum, eu congue nemore eam. Blandit voluptatum referrentur ei pro, vis aperiam integre quaeque ad, eos dicunt ancillae et.</p> </section> <section> <h2>Main Content 4</h2> <p>Quo at diceret assentior. Odio appetere incorrupte eos an, eirmod praesent mediocrem nec id, eum ut quis harum possim. Sea purto eruditi adipiscing ut, eos aliquip interpretaris at. Eu vim porro evertitur suscipiantur. Ea qui augue ornatus referrentur, modo luptatum temporibus sit ei.</p> </section> <section> <h2>Main Content 5</h2> <p>Prompta patrioque deterruisset pro no, ius platonem assueverit et. Mea et suas augue dolore. Ut justo augue consequuntur ius, ea periculis laboramus liberavisse vis. Eu nec feugait percipit dissentiet. Lucilius mandamus consequuntur vix ei.</p> </section> </div><!-- /#content --> <footer> <p id="copyright"><small>© Fixed header and footer sample</small></p> </footer><!-- /footer --> </body> </html>
【fixed.css】
@charset "UTF-8";
body{
margin: 0;
padding: 80px 0;
line-height: 1.5;
font-family: sans-serif;
}
h1 {
padding: 0 20px;
margin: 0;
}
h1 a {
width: 212px;
height: 92px;
display: block;
background: url(../img/logo.png) no-repeat;
}
h2 {
border-left: 8px solid #E96;
padding-left: 15px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 70px;
padding: 5px 0;
background-color: #479137;
color: #FFF;
box-shadow: 0 2px 15px 5px #AAA;
}
header ul {
list-style: none;
margin: 0 0 0 180px;
position: absolute;
top: 25px;
right: 20px;
}
header ul li {
float: left;
padding-left: 24px;
margin-left: 20px;
background: url(../img/arrow.png) no-repeat left center;
}
header ul li a {
color:#FFF;
font-size: 18px;
}
#content {
height: 100%;
padding: 20px;
}
section {
margin: 0 0 40px 0;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
padding: 10px 0;
background-color: #479137;
color: #FFF;
text-align: center;
box-shadow: 0 2px 15px 5px #AAA;
}
/* 隠し文字 */
.hidden {
border: none;
clip: rect(0, 0, 0, 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}素材
【 CSS3 】 image placeholder 仮の画像を置くとき
CSS3のimage placeholderを使うと、画像の仮置きのスペースを確保することができます。
画像がまだ無い場合に使えます。
]
【 iPhone, jQuery 】 スマホサイトを簡単に作る
【HTML5, CSS3, PHP 】 SESSION を利用したお問い合わせフォーム ( データベース )
以前まで$_POSTでデータを受け取って記述していましたが、
今回はSESSIONを使って記述してみます。
注意しなければいけないのが、check.phpでSESSIONにデータを受け渡してしまうと、
POSTの中身は空になってしまい、thanks.phpでもSESSIONを使って記述しなければなりません。
尚、メール自動送信機能は、phpが利用できるサーバーにアップロードしないと機能しません。
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ入力フォーム</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <form action="check.php" method="post" id="inquiry"> <h1>お問い合わせメールフォーム</h1> <p>このフォームはphpの練習で作成したサンプルです。<br> 入力されたメールアドレス宛てに自動返信される機能が付いています。<br>よろしければお試しください。</p> <table summary="お問い合わせに関する入力項目名とその入力欄"> <tr> <th><label for="name">お名前</label></th> <td><input type="text" name="name" size="30" id="name" class="text1" placeholder="例）山田太郎" autofocus required></td> </tr> <tr> <th><label for="email">メールアドレス</label></th> <td><input type="text" name="email" size="30" id="email" class="text2" placeholder="例）xxx@example.com" required></td> </tr> <tr> <th><label for="message">お問い合わせの内容</label></th> <td><textarea name="message" cols="32" rows="5" id="message" class="text3" placeholder="例）コメント" required></textarea></td> </tr> </table> <div class="submit"> <input type="submit" value="確認画面へ"> </div> </form> </body> </html>
【check.php】
<?php
// フォームデータが空の場合は処理終了
if (empty($_POST)) {
print "処理終了";
exit;
}
// セッションの開始
session_start();
$name = htmlspecialchars( $_POST[ 'name' ], ENT_QUOTES );
$email = htmlspecialchars( $_POST[ 'email' ], ENT_QUOTES );
$message = htmlspecialchars( $_POST[ 'message' ], ENT_QUOTES );
$_SESSION[ 'name' ] = $name;
$_SESSION[ 'email' ] = $email;
$_SESSION[ 'message' ] = $message;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="inquiry">
<h1>確認画面</h1>
<?php
print '<ul>'."\n";
print '<li>';
if($name==''){
print 'お名前が入力されていません。<br>'."\n";
}else{
print 'お名前：'.$name.'<br>'."\n";
}
print '</li>'."\n";
print '<li>';
if($email==''){
print 'メールアドレスが、入力されていません。<br>'."\n";
}else{
print 'メールアドレス：'.$email.'<br>'."\n";
}
print '</li>'."\n";
print '<li>';
if($message==''){
print 'お問い合わせの内容が、入力されていません。<br>'."\n";
}else{
print 'お問い合わせの内容：'.$message."\n";
}
print '</li>'."\n";
print '</ul>'."\n";
if($name=='' || $email=='' || $message==''){
print '<p>未記入の項目があります。「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n";
print '<div class="submit">'."\n";
print '<form>'."\n";
print '<input type="button" onclick="history.back()" value="戻る">'."\n";
print '</form>'."\n";
print '</div>'."\n";
}else{
print '<p>以上の内容を送信します。<br>よろしければ「<span class="deco">送信</span>」ボタンを、修正する場合は「<span class="deco">戻る</span>」ボタンをクリックしてください。</p>'."\n"; print '<div class="submit">'."\n";
print '<form action="thanks.php" method="post">'."\n";
/*
print '<input type="hidden" name="name" value="'.$name.'">';
print '<input type="hidden" name="email" value="'.$email.'">';
print '<input type="hidden" name="message" value="'.$message.'">';
*/
print '<input type="button" onClick="history.back()" value="戻る">'."\n";
print '<input type="submit" value="送信">'."\n";
print '</form>'."\n";
print '</div>'."\n";
}
?>
</div>
</body>
</html>【thanks.php】
<?php
// セッションの開始
session_start();
$name = htmlspecialchars( $_SESSION[ 'name' ], ENT_QUOTES );
$email = htmlspecialchars( $_SESSION[ 'email' ], ENT_QUOTES );
$message = htmlspecialchars( $_SESSION[ 'message' ], ENT_QUOTES );
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="inquiry">
<?php
$dsn = 'mysql:dbname=データベース名;host=ホスト名';
$user = 'ユーザー名';
$password = 'パスワード';
$dbh = new PDO($dsn,$user,$password);
$dbh -> query('SET NAMES utf8');
/*
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$name = htmlspecialchars($name);
$email = htmlspecialchars($email);
$message = htmlspecialchars($message);
*/
print $name.'様<br>'."\n";
print 'お問い合わせ、ありがとうございました。<br>'."\n";
print 'お問い合わせ内容『'.$message.'』を<br>'."\n";
print $email.'にメールで送りましたのでご確認ください。'."\n";
$mail_sub = 'お問い合わせを受け付けました。';
$mail_body = $name.'様、ご協力ありがとうございました。';
$mail_body = html_entity_decode($mail_body,ENT_QUOTES,"UTF-8");
$mail_head = 'From:xxx@gmail.com';
mb_language('Japanese');
mb_internal_encoding("UTF-8");
mb_send_mail($email, $mail_sub, $mail_body,$mail_head);
$sql = 'INSERT INTO テーブル名(name,email,message)VALUES("'.$name.'","'.$email.'","'.$message.'")';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
$dbh = null;
?>
<ul>
<li><a href="index.html">トップページに戻る</a></li>
</ul>
</div>
</body>
</html>【style.css】
@charset "UTF-8";
body {
background-color: #FFF;
font-size: 16px;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height: 1.5;
color: #333;
}
#inquiry {
margin: 20px auto;
background-color: #FFF;
width: 520px;
padding: 10px 20px 10px 20px;
border-left: 6px solid #8CC9B5;
box-shadow: 0 0 3px #999;
}
.submit {
text-align: center;
}
input[type="submit"] {
margin: 20px 0 10px;
padding: 5px 10px;
font-weight: bold;
border: 1px solid #FFF;
color: #FFF;
background-color: #D9F5F3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FF9900), color-stop(48%, #FF8600), color-stop(52%, #FF7700), to(#FF6600));
font-size: 16px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
cursor: pointer;
}
input[type="button"] {
margin: 20px 0 10px;
padding: 5px 10px;
font-weight: bold;
border: 1px solid #FFF;
color: #FFF;
background-color: #D9F5F3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#060), color-stop(48%, #0C3), color-stop(52%, #0F3), to(#093));
font-size: 16px;
-webkit-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 0 3px #333;
box-shadow: 0 0 3px #333;
cursor: pointer;
}
.deco {
font-weight: bold;
}
table {
width: 500px;
border: 1px solid #CCC;
border-collapse: collapse;
}
tr {
height: 40px;
}
td, th {
font-size: 14px;
border: 1px solid #CCC;
padding: 10px;
}
th {
background-color: #E5F7F2;
}
ul {
list-style: none;
margin: 10px 0;
padding: 10px 10px 10px 20px;
background-color: #eee;
border-radius: 8px;
}
input, textarea {
font-size: 14px;
line-height: 15px;
border: 1px solid #CCC;
}
h1 {
font-size: 20px;
}
table#list {
padding: 5px;
}
table#list th {
text-align: center;
}
【HTML5】 iPhone タブレット レスポンシブデザインのWebページ サンプル
HTML5でPC用、タブレット用、iPhone用に対応するレスポンシブデザインのWebページサンプルです。
Media Queryを使うことで対応させています。
ポイントは、
?Media Queryは、サイズの小さいものからCSSを記述すること
?幅の指定は%で記述すること
?メタ要素として meta name="viewport" content="width=device-width" を加えること
?marginやpaddingも % で記述することが望ましい
あくまでも参考例なので、ポイントを絞って自分で記述してみて下さい
【index.html】
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブデザイン</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> <!--[if lte IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lte IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]--> </head> <body> <div id="stage"> <header id="header"> <h1>Media Queries</h1> </header> <nav id="nav"> <ul class="cf"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> </ul> </nav> <div id="contents" class="cf"> <aside class="contents_menu cf"> <section id="contents_menu1"> <h1>Contents Menu1</h1> </section> <section id="contents_menu2"> <h1>Contents Menu2</h1> </section> </aside> <article class="main"> <section id="body_link"> <h1>2013.10.14</h1> <p>レスポンシブWebデザインのサイトを制作するには、メディアクエリを自由に使いこなせることが必要です。きちんと把握するようにしましょう。</p> </section> <section id="section_link"> <h1>2013.09.12</h1> <p>メディアクエリに加えて、フルードイメージとフルードグリッドの利用も必須です。あらゆるデバイスに対応する際に重要な知識になります。</p> </section> <section id="article_link"> <h1>2013.09.25</h1> <p>このページはメディアクエリの使い方を解説するための簡易的なページです。構成は非常にシンプルですが、メディアクエリの使い方がよくわかると思います。</p> </section> <section id="aside_link"> <h1>2013.09.10</h1> <p>今後はレスポンシブWebデザインのサイト制作が非常に重要になることが考えられます。とても奥の深い制作方法ですので、さまざまな情報を参照して制作方法を学んでください。</p> </section> <section id="nav_link"> <h1>2013.09.09</h1> <p>PC向けでは２カラム構成ですが、スマートフォン向けでは１カラム構成になるように設定しています。</p> </section> </article> </div> <!--/#contents--> <footer id="footer"> <small>© 2013 天下一Web道会</small> </footer> </div> <!--/#stage--> </body> </html>
【style.css】
@charset "UTF-8";
body, div, h1, p, header, nav, article, aside, footer, section, ul, li {
margin: 0;
padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
/*STYLE*/
body {
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
line-height: 1.7;
}
/* 共通設定およびスマートフォン向けのスタイル */
#stage {
width: 100%;
}
header {
width: 100%;
margin: 0 auto;
}
header h1 {
background: #333;
color: #FFF;
margin-bottom: 4%;
padding: 0.2em;
text-align: center;
}
nav {
width: 100%;
overflow: hidden;
background: #3C6;
margin: 0 auto;
}
nav ul li {
list-style: none;
}
ul li a {
text-decoration: none;
text-align: center;
font-weight: 600;
color: #03C;
padding: 0.4em 3em;
display: block;
border-bottom: 1px solid #CCC;
}
#contents {
width: 90%;
margin: 0 auto;
}
aside {
width: 90%;
float: left;
margin-left: 2%;
overflow: hidden;
}
section#contents_menu1 {
width: 100%;
height: 10em;
background: #F99;
margin-bottom: 5%;
text-align: center;
}
section#contents_menu2 {
width: 100%;
height: 10em;
background: #F99;
text-align: center;
margin-bottom: 5%;
}
article {
width: 90%;
}
article p {
margin-bottom: 1.5em;
}
section {
border-bottom: 1px solid #CCC;
}
section h1 {
margin-top: 0.5em;
}
footer {
text-align: center;
margin: 2em auto;
}
/* Media Queries による切り替え */
/* タブレット向けのスタイル：481px 〜 768px */
@media only screen and (min-width: 481px) {
nav {
margin-bottom: 20px;
}
nav ul li {
list-style: none;
float: left;
width: 33.33%;
}
ul li a {
border-right: 1px solid #CCC;
border-left: 1px solid #CCC;
}
#contents {
overflow: hidden;
}
aside {
width: 90%;
}
section#contents_menu1 {
width: 45%;
float: left;
}
section#contents_menu2 {
width: 45%;
float: right;
}
}
/* PC向けのスタイル：769px〜960px */
@media only screen and (min-width: 769px) {
header {
width: 90%;
margin: 0 auto;
}
nav {
width: 90%;
}
nav ul {
margin-left: 20px;
}
nav ul li {
width: 20%;
}
#contents {
width: 80%;
margin: 0 auto;
overflow: hidden;
}
aside {
width: 30%;
float: left;
margin-left: 2%;
}
section#contents_menu1 {
width: 90%;
margin-bottom: 20px;
}
section#contents_menu1 h1 {
margin-top: 10px;
}
section#contents_menu2 {
width: 90%;
float: left;
}
article {
width: 60%;
float: right;
margin-right: 2%;
}
article p {
margin-bottom: 1.5em;
margin-left: 1em;
}
}
【HTML5】 レスポンシブデザイン メタ要素
HTML5 でレスポンシブデザインにするためには、
メタ要素をこのように設定します。
<meta name="viewport" content="width=device-width">
