スマートフォン対応デモサイト【4】フォーム

「HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応」を参考にChapter_6のサンプルサイトをカスタマイズしてみました。

プレビュー

↓別ウィンドウを開いて見る

スマートフォン対応デモサイト【4】フォーム

↓QRコード

※おすすめQRコード読み取りアプリ

お父さんQR
カテゴリ: ユーティリティ
サイズ: 2.3 MB
価格：無料

コード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>スマートフォン対応デモサイト【4】フォーム</title>
<meta name="viewport" content="width=device-width">
<meta name="format-detection" content="telephone=no">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="css/iphone.css" media="screen">
</head>
<body>
<header class="global-header">
<h1><img src="http://jsrun.it/assets/t/2/n/k/t2nkL.png" alt="" class="logo"></h1>
</header>

<section class="contact-form">
<h2 class="section-heading">資料請求フォーム</h2>
<p class="introduction">サービスに関するご案内をご希望の方は下記フォームよりお申込みください。<br>
<span class="require">必須</span>となっている項目は必ずご入力ください。</p>

<form method="post" action="#">
<dl>
<dt>貴社名&nbsp;<span class="require">必須</span></dt>
<dd><input id="companyname" type="text" placeholder="例）株式会社 WEB studio"></dd>
<dt>ご担当者名&nbsp;<span class="require">必須</span></dt>
<dd><input id="frontname" type="text" placeholder="例) 山田 太郎"></dd>
<dt>メールアドレス&nbsp;<span class="require">必須</span></dt>
<dd><input id="email" type="email" placeholder="例）mail@example.com" autocapitalize="off"></dd>
<dt>電話番号&nbsp;<span class="require">必須</span></dt>
<dd><input id="tel" type="tel" placeholder="例）0123456789"></dd>
<dt>貴社の業種・業態&nbsp;<span class="require">必須</span></dt>
<dd>
<ul class="radiolist">
<li>
<label><input type="radio" id="industry_01" value="小売業" name="industry">小売業</label>
</li>
<li>
<label><input type="radio" id="industry_02" value="サービス業" name="industry">サービス業</label>
</li>
<li>
<label><input type="radio" id="industry_03" value="官公庁" name="industry">官公庁</label>
</li>
<li>
<label><input type="radio" id="industry_04" value="教育機関" name="industry">教育機関</label>
</li>
<li>
<label><input type="radio" id="industry_05" value="個人" name="industry">個人</label>
</li>
<li>
<label><input type="radio" id="industry_06" value="ホームページ制作会社" name="industry">ホームページ制作会社</label>
</li>
<li>
<label><input type="radio" id="industry_07" value="Webコンサルティング" name="industry">Webコンサルティング</label>
</li>
<li>
<label><input type="radio" id="industry_08" value="その他" name="industry">その他</label>
</li>
</ul>
</dd>
<dt>貴社サイトのURL&nbsp;<span class="require">必須</span></dt>
<dd><input id="url" type="url" placeholder="例）http://www.webstudio.jp" autocapitalize="off"></dd>
<dt>導入予定サイト数</dt>
<dd><input id="ammount" type="number" placeholder="例）３"></dd>
<dt>ひとサイトあたりの月間ページビュー</dt>
<dd><select id="pageview" name="pageview">
<option value="">▼選んでください</option>
<option value="0">わからない</option>
<option value="1">〜1万PV</option>
<option value="5">〜5万PV</option>
<option value="10">〜10万PV</option>
<option value="50">〜50万PV</option>
<option value="100">〜100万PV</option>
<option value="250">〜250万PV</option>
<option value="500">〜500万PV</option>
<option value="1000">〜1,000万PV</option>
<option value="1001">1,000万PV〜</option>
</select></dd>
</dl>

<div class="submit">
<input type="submit" value="確認ページへ進む">
</div>
</form>
</section>

<div class="contact-call">
<p>お電話によるご相談も承っております。</p>
<dl>
<dt>営業時間</dt>
<dd>平日<time datetime="09:00">09:00</time>&nbsp;-&nbsp;<time datetime="20:00">20:00</time></dd>
</dl>
<p class="call"><a href="tel:01-2345-6789">お電話でのご相談<br>01-2345-6789</a></p>
</div>

<footer class="global-footer">
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">特定商取引法</a></li>
<li><a href="#">プライバシーポリシー</a></li>
</ul>
<p class="copyright"><small>Copyright&copy;2012 vinton</small></p>
</footer>
<script type="text/javascript" src="js/iphone.js"></script>
</body>
</html>

CSS

@charset "utf-8";
/* reset */

html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p,
header, hgroup, section, article, aside, hgroup, footer, figure, figcaption, nav {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

body {
    line-height: 1.0;
    -webkit-text-size-adjust: none;
}

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
    display:block;
}

img {
    border: 0;
    vertical-align: bottom;
}

ul, ol {
    list-style: none;
}

table {
    border-spacing: 0;
    empty-cells: show;
}

/* style */

body {
    color: #333;
    background-color: #333;
    background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#333));
    font-family: 
        "ヒラギノ角ゴ Pro W3",
	    "Hiragino Kaku Gothic Pro", 
	    "メイリオ", 
	    Meiryo, 
	    Osaka, 
	    "ＭＳ Ｐゴシック", 
	    "MS PGothic", 
	    sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.global-header {
 padding: 10px 0 30px 0;
 background-color: #333;
 background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#333));
 text-align: center;
}

.section-heading {
 margin-bottom: 5px;
 padding-left: 20px;
 background: url(http://jsrun.it/assets/t/j/H/4/tjH4h.png) left center no-repeat;
 font-size: 16px;
}

.introduction {
 margin-bottom: 20px;
 font-size: 14px;
}

.require {
 padding: 3px;
 vertical-align: text-bottom;
 color: #FFF;
 background-color: #f90;
 font-weight: bold;
 font-size: 11px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
}

.contact-form {
 margin: -20px 10px 10px 10px;
 padding: 10px;
 border: 1px solid #FFF;
 background-color: #eee;
 background-image: -webkit-gradient(linear,left top,left bottom,from(#fff),to(#eee));
 -webkit-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0 0 3px #333;
 box-shadow: 0 0 3px #333;
}

.contact-form dl {
    margin-bottom: 20px;
}

.contact-form dt {
    font-weight: bold;
    margin-bottom:5px;
}

.contact-form dd {
    margin-bottom: 10px;
}

input {
    padding: 5px;
    width: 150px;
    font-size: 14px;
}

input[type="email"],
input[type="url"] {
    width: 250px;
}

input[type="radio"] {
    width: auto;
}

input[type="submit"] {
    padding: 5px 10px;
    font-weight:bold;
    border: 1px solid #FFF;
    width: auto;
    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 #333333;
    box-shadow: 0 0 3px #333333;
}

.submit {
    text-align: center;
}

.contact-call {
    margin: 10px 0 20px 0;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.contact-call dl {
    margin-bottom: 10px;
}

.contact-call dt,
.contact-call dd {
    display: inline; 
}

.contact-call time {
    margin: 0 2px;
}

.call a {
    padding: 5px 0 5px 20px;
    border: 1px solid #FFF;
    display: inline-block;
    color: #FFF;
    background-color: #006699;
    background-image: url(http://jsrun.it/assets/3/4/9/l/349ld.png), -webkit-gradient(linear, left top, left bottom, from(#66CC00), color-stop(48%, #66B400), color-stop(52%, #66A700), to(#669900));
    background-repeat:no-repeat;
    background-position:-10px 5px,top left;
    font-size: 16px;
    text-align: center;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px #333;
    box-shadow: 0 0 3px #333;
    text-decoration:none;
    width:150px;
    font-weight:bold;
    -webkit-animation: shining 2s infinite;
}

@-webkit-keyframes shining {
    0% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700; }
    50% { -webkit-box-shadow: 0 0 20px #FFD700; box-shadow: 0 0 20px #FFD700;}
    100% { -webkit-box-shadow: 0 0 1px #FFD700; box-shadow: 0 0 1px #FFD700;}
}

.global-footer {
    font-size: 12px;
    text-align: center;
}

.global-footer li {
    display: inline;
}

.global-footer a {
    margin: 0 3px;
    color: #fff;
}

JavaScript

window.addEventListener('load',
	function(){
		setTimeout(function(){
			scrollTo(0,1);
		},100);
	},
false);

参考

HTML5とCSS3で作る魅せるiPhoneサイトサポートページ

HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応

作者: 谷拓樹
出版社/メーカー: ラトルズ
発売日: 2010/11/24
メディア: 単行本（ソフトカバー）
購入: 28人クリック: 992回
この商品を含むブログ (26件) を見る

HTML5＋CSS3で作る魅せるiPhoneサイト
カテゴリ: ブック
サイズ: 82.2 MB
価格：￥1,200

univss1 univss2

ウェブ学のすすめ

Study of Web Design & Programing

スマートフォン対応デモサイト【4】フォーム

プレビュー

コード

HTML

CSS

JavaScript

参考