こちらでは、プログラミングを体系的に学ぶ事のできる「ウェブカツ!!」にて使用している
ソースコードを掲載しております。
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプルホームページ</title> <link rel="stylesheet" type="text/css" href="style.css"> <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'> </head> <table class="table table-striped row-highlight table-condensed"> <thead> <tr> <th class="shortcut-base"><a>Base Key</a></th> <th class="shortcut-binding"><a>Key Binding</a></th> <th class="shortcut-cmd-id"><a>Command ID</a></th> <th class="shortcut-cmd-name"><a>Command Name</a></th> <th class="shortcut-orig"><a>Origin</a></th> </tr> </thead> <tbody> </tbody> </table> <body> <header class="site-width"> <h1><a href="index.html">WEBUKATU</a></h1> <nav id="top-nav"> <ul> <li><a href="index.html">HOME</a></li> <li><a href="#about">ABOUT</a></li> <li><a href="#merit">MERIT</a></li> <li><a href="#recruit">RECRUIT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> </header> <div id="main"> <!-- Contact --> <section id="contact" class="site-width"> <h1 class="title">CONTACT</h1> <form> <div class="form-group"> <label>名前：任意<span class="help-block"></span> <input type="text" name="name" class="valid-text"> </label> </div> <div class="form-group"> <label>E-mail：＊必須<span class="help-block"></span> <input type="text" name="email" class="valid-email"> </label> </div> <div class="form-group"> <label>内容：＊必須<span class="help-block"></span> <textarea cols="100" rows="10" name="comment" class="valid-textarea"></textarea> </label> </div> <input type="submit" name="submit" value="送信"> </form> </section> </div> <footer> Copyright <a href="http://webukatu.com/">ウェブカツ!!サンプルホームページ</a>. All Rights Reserved. </footer> <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="main.js"></script> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 |
body{ color: #444; margin: 0; padding: 0; line-height: 150%; } /*トップバナー*/ #top-baner{ width: 100%; } /*ヘッダー部分*/ header{ margin-bottom: 15px; height: 200px; } header h1{ font-size: 20px; font-family: 'Montserrat', sans-serif; margin: 15px; padding: 20px; text-align: center; float: left; height: 150px; width: 150px; background: #f6f5f5; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; line-height: 150px; } header h1 a{ color: #333; text-decoration: none; } /*ナビゲーション*/ #top-nav{ float: right; width: 500px; height: 200px; position: relative; } nav a{ padding: 10px 15px; color: #444; text-decoration: none; font-size: 14px; font-weight: bold; } nav a:hover{ text-decoration: underline; } #top-nav ul{ height: 40px; width: 450px; position: absolute; bottom: 0; right: 0; list-style: none; } #top-nav ul li{ float: left; } /*コンテンツ横幅*/ .site-width{ width: 980px; margin: 0 auto; } section h1.title{ font-family: 'Montserrat', sans-serif; text-align: center; } /*フッター*/ footer{ font-size: 12px; padding: 15px; background: #333; text-align: center; color: #f6f5f5; } footer a{ color: #f6f5f5; } /*contact*/ #contact{ margin-bottom: 100px; } /*フォーム*/ form{ width: 50%; margin: 0 auto; } input,textarea{ font-size: 18px; margin-bottom: 15px; } input[type="text"]{ width: 100%; height: 60px; border: none; background: #f6f5f5; padding: 10px; box-sizing: border-box; } textarea{ width: 100%; height: 400px; border: none; background: #f6f5f5; padding: 10px; box-sizing: border-box; } input[type="submit"]{ background: #333; border: none; padding: 15px 30px; color: white; float: right; } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #f6f5f5 inset; } /*バリデーション*/ .help-block{ font-size:14px; margin-left: 10px; } /*エラー時*/ .has-error input, .has-error textarea{ border: 1px solid #ff4d4b; } .has-error .help-block, .has-error label{ color: #ff4d4b; } /*サクセス時*/ .has-success input, .has-success textarea{ border: 1px solid #2fb4ce; } .has-success .help-block, .has-success label{ color: #2fb4ce; } |
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$(function(){ const MSG_TEXT_MAX = '20文字以内で入力してください。'; const MSG_EMPTY = '入力必須です。'; const MSG_EMIL_TYPE = 'emailの形式ではありません。'; const MSG_TEXTAREA_MAX = '100文字以内で入力してください。'; $(".valid-text").keyup(function(){ var form_g = $(this).closest('.form-group'); if($(this).val().length > 20 ){ form_g.removeClass('has-success').addClass('has-error'); form_g.find('.help-block').text(MSG_TEXT_MAX); }else{ form_g.removeClass('has-error').addClass('has-success'); form_g.find('.help-block').text(''); } }); $(".valid-email").keyup(function(){ var form_g = $(this).closest('.form-group'); if( $(this).val().length === 0 ){ form_g.removeClass('has-success').addClass('has-error'); form_g.find('.help-block').text(MSG_EMPTY); }else if($(this).val().length > 50 || !$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/) ){ form_g.removeClass('has-success').addClass('has-error'); form_g.find('.help-block').text(MSG_EMIL_TYPE); }else{ form_g.removeClass('has-error').addClass('has-success'); form_g.find('.help-block').text(''); } }); $(".valid-textarea").keyup(function(){ var form_g = $(this).closest('.form-group'); if($(this).val().length === 0){ form_g.removeClass('has-success').addClass('has-error'); form_g.find('.help-block').text(MSG_EMPTY); }else if( $(this).val().length > 100 ){ form_g.removeClass('has-success').addClass('has-error'); form_g.find('.help-block').text(MSG_TEXTAREA_MAX); }else{ form_g.removeClass('has-error').addClass('has-success'); form_g.find('.help-block').text(''); } }); }); |
