PageSourceSearch

https://webukatu.com/search/contents1_detail_info?c1id=35150

html webukatu.com collected 2026-10-02 06:16:29 UTC 124,342 bytes, 2,734 lines download raw bytes

1<!DOCTYPE html>
2<html lang="ja">
3
4<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
5
6<!-- Google Tag Manager -->
7<script>
vendor: 327 bytes, lines 7-11
7(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
8new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
9j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
10'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
11})(window,document,'script','dataLayer','
11GTM-NM5LGF6
vendor: 3 bytes, line 11
11');
11</script>
11
12<!-- End Google Tag Manager -->
13
14  <!-- パフォーマンスのために使用する文字のエンコーディングを記述 -->
15  <meta charset="utf-8" />
16
17  
18      <link rel="canonical" href="https://webukatu.com/search/contents1_detail_info?c1id=35150">
19  
20  <!-- ==============================================
21	  サイトタイトル
22	=============================================== -->
23  <title>HTML・CSS部 入門ページ | 【入門】初心者向けプログラミング学習スクール「ウェブカツ!!」</title>
24
25  <!-- ==============================================
26		metaタグ
27	=============================================== -->
28  <meta name="author" content="ウェブカツ!!" />
29  <meta name="description" content="未経験から1年で年収1千万以上稼ぎ続ける有名エンジニアが教える【どこよりも分かりやすく】学べ【どこよりも効率的】で【どこよりも実践的】な初心者向けプログラミング学習スクールとは?" />
30  <meta name="keywords" content="プログラミング,スクール,初心者,入門,学習" />
31  <meta name="application-name" content="ウェブカツ!! - 本気で収入を上げたい人のためのオンラインプログラミング学習スクール" />
32
33  <!-- ==============================================
34		OGPタグ
35	=============================================== -->
36  <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
37  <meta property="og:title" content="HTML・CSS部 入門ページ" />
38  <meta property="og:type" content="website" />
39  <!--またはwebsite, blog-->
40  <meta property="og:url" content="https://webukatu.com/search/contents1_detail_info?rf=tw" />
41  <meta property="og:image" content="https://webukatu.com/assets/img/logo_ogp.png" />
42  <meta property="og:site_name" content="プログラミングスクール「ウェブカツ!!」" />
43  <meta property="og:description" content="大手スクール生徒や現役エンジニアが多数学び直している「実務レベル」に特化した「稼ぐ」ためのプログラミングスクール" />
44  <meta name="twitter:card" content="summary_large_image" />
45  <meta name="twitter:site" content="@webukatu" />
46
47
48
49  <!-- IE8+に対して「IE=edge」と指定することで、利用できる最も互換性の高い最新のエンジンを使用するよう指示できる -->
50  <meta http-equiv="X-UA-Compatible" content="IE=edge">
51
52  <!-- モバイル端末への対応、ページをビューポートの幅に合わせてレンダリング(Android, iOS6以降)。ズームを許可しない設定「user-scalable=no」は加えない方がよい -->
53  <meta name="viewport" content="width=device-width, initial-scale=1">
54
55  <!-- iOSなどスマホで電話番号を自動で電話リンクへ書き換えるのを防ぐ -->
56  <meta name="format-detection" content="telephone=no">
57
58  <!-- ==============================================
59	 Asset定義
60	=============================================== -->
61    
62  <!-- ==============================================
63	 CSS
64	=============================================== -->
65  <!-- BootStrap3 -->
66  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/bootstrap.css?1575572579" />
67
68  <!-- フォントアイコン -->
69  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet" media="print" onload="this.media='all'">
70  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" media="print" onload="this.media='all'">
71  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous" media="print" onload="this.media='all'">
72
73  <!-- 画像スライダー -->
74  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/js/flexslider.css?1575572580" />
75
76  <!-- iCheck -->
77  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/skins/flat/red.css?1575572579" />
78
79  <!-- DateTimePicker -->
80  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/jquery.datetimepicker.css?1575572579" />
81
82  <!-- TimePicker -->
83  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/bootstrap-timepicker.css?1575572579" />
84
85  <!-- スタイルシート -->
86  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/style.css?1637572330" />
87
88  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/animate.css?1575572579" />
89
90  <!-- IE8以下用に2つのスクリプトを記述
91     html5shiv.js: IE8以下にHTML5の要素を認識するようにさせる
92     respond.js: IE8以下にMedia Queriesの代替え機能を提供 -->
93  <!--[if lt IE 9]>
94	
94<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
94
95	
95<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
95
96	<![endif]-->
97
98  <!-- ==============================================
99	 Favicons
100	=============================================== -->
101  <link rel="shortcut icon" href="assets/img/ico/favicon.ico" type="image/vnd.microsoft.icon">
102  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/img/ico/apple-touch-icon-precomposed.png">
103
104
105  <!-- ==============================================
106	 Fonts
107	=============================================== -->
108  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet" media="print" onload="this.media='all'">
109  <link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" media="print" onload="this.media='all'">
110  <link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet" media="print" onload="this.media='all'">
111  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" media="print" onload="this.media='all'">
112  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" media="print" onload="this.media='all'">
113  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
114  <link rel="canonical" href="https://webukatu.com/" />
115  
116  
117
118  <!-- ==============================================
119	 JavaScript
120	=============================================== -->
121  <!-- Googleトラッキングコード -->
122  
122<script async>
vendor: 442 bytes, lines 122-135
122
123    (function(i, s, o, g, r, a, m) {
124      i['GoogleAnalyticsObject'] = r;
125      i[r] = i[r] || function() {
126        (i[r].q = i[r].q || []).push(arguments)
127      }, i[r].l = 1 * new Date();
128      a = s.createElement(o),
129        m = s.getElementsByTagName(o)[0];
130      a.async = 1;
131      a.src = g;
132      m.parentNode.insertBefore(a, m)
133    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
134
135    ga('create', '
135UA-30125803-4
vendor: 42 bytes, lines 135-137
135', 'auto');
136    ga('send', 'pageview');
137  
137</script>
137
138
139  <!-- GoogleMap -->
140  
140<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" async></script>
140
141  <!-- GoogleMap -->
142  	
142<script type="text/javascript" src="https://webukatu.com/assets/js/google_map.js?1575572580"></script>
142
143
144  
144<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
144
145
146
147  	<link type="text/css" rel="stylesheet" href="https://webukatu.com/assets/css/redactor/redactor.min.css?1519281086" />
148  	
148<script type="text/javascript" src="https://webukatu.com/assets/js/redactor/redactor.js?1633567422"></script>
148
149  	
149<script type="text/javascript" src="https://webukatu.com/assets/js/redactor/plugins/source.js?1575572580"></script>
149
150  	
150<script type="text/javascript" src="https://webukatu.com/assets/js/redactor/plugins/fullscreen.js?1575572580"></script>
150
151  	
151<script type="text/javascript" src="https://webukatu.com/assets/js/redactor/plugins/table.js?1575572580"></script>
151
152  	<link type="text/css" rel="stylesheet" />
153  	
153<script type="text/javascript" src="https://webukatu.com/assets/js/redactor/plugins/fontcolor.js?1575572580"></script>
153
154  	
154<script type="text/javascript" src="https://webukatu.com/assets/js/vue.min.js?1576268595"></script>
154
155
156
157  
157<script type="text/javascript">
158    $(function() {
159      $('#textarea_editor').redactor({
160        plugins: ['source', 'fullscreen', 'codemirror', 'table', 'fontcolor'],
161        imageUpload: 'https://webukatu.com/upload/img/',
162        codemirror: {
163          lineNumbers: true,
164          mode: 'xml',
165          indentUnit: 4
166        }
167      });
168    });
169  </script>
169
170
171
172
173
174
175  <!-- Global site tag (gtag.js) - Google Ads: 824163405 -->
vendor: 66 bytes, lines 175-176
175
176  <script async src="https://www.googletagmanager.com/gtag/js?id=
176AW-824163405
vendor: 14 bytes, lines 176-177
176"></script>
177  
177<script>
178    
vendor: 154 bytes, lines 178-185
178window.dataLayer = window.dataLayer || [];
179
180    function gtag() {
181      dataLayer.push(arguments);
182    }
183    gtag('js', new Date());
184
185    gtag('config', '
185AW-824163405
vendor: 6 bytes, lines 185-186
185');
186  
186</script>
186
187    
188
189</head>
190
191<body>
192
193<!-- Google Tag Manager (noscript) -->
vendor: 68 bytes, lines 193-194
193
194<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
194GTM-NM5LGF6
vendor: 83 bytes, lines 194-195
194"
195height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
196<!-- End Google Tag Manager (noscript) -->
197
198  
198<script>
199    window.fbAsyncInit = function() {
200      FB.init({
201        appId: '393522627485193',
202        cookie: true,
203        xfbml: true,
204        version: 'v2.8'
205      });
206      FB.AppEvents.logPageView();
207    };
208
209    (function(d, s, id) {
210      var js, fjs = d.getElementsByTagName(s)[0];
211      if (d.getElementById(id)) {
212        return;
213      }
214      js = d.createElement(s);
215      js.id = id;
216      js.src = "//connect.facebook.net/en_US/sdk.js";
217      fjs.parentNode.insertBefore(js, fjs);
218    }(document, 'script', 'facebook-jssdk'));
219  </script>
219
220
221  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/rainbow.min.css" media="print" onload="this.media='all'">
222  
222<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
222
223  
223<script>
224    hljs.initHighlightingOnLoad();
225  </script>
225
226
227
228  <!-- ==============================================
229      ローディング
230    =============================================== -->
231  <!--
232		<div id="loading">
233			<div class="height-middle">
234			<img alt="" />			</div>
235		</div>
236		-->
237  	
237<script type="text/javascript" src="https://webukatu.com/assets/js/underscore-min.js?1575572580"></script>
237
238
239	<!-- start #page -->
240	<div id="page" class="container">	
241		<!--<div style="padding-left:30px;">-->
242				<!-- ==============================================
243	カテゴリ:ビュー
244	役割:店舗詳細画面
245=============================================== -->
246
247<!-- 連想配列の最初のキーを取得 -->
248
249<!-- ==============================================
250  ヘッダーナビゲーション
251=============================================== -->
252
253<style>
254@media screen and (max-width: 1080px){
255    header a.sp-menu {
256        visibility: visible;
257        display: block;
258        margin-top: 15px;
259        float: right;
260        font-size: 10px;
261        background: none;
262        color: #333;
263    }
264    header a.sp-menu i {
265    font-size: 30px;
266    margin: 0 !important;
267    padding: 0 !important;
268    }
269    .menu-wrap {
270        display: none;
271    }
272    #top-menu, #top-menu ul, #top-menu ul li{
273        width:100%;
274    }
275    nav {
276    height: auto;
277    }
278    #top-menu ul li {
279    text-align: center;
280    }
281}
282@media (min-width: 1081px){
283.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,.col-md-10a,.col-lg-10a {
284    float: left;
285}
286.col-md-10a,.col-lg-10a {
287    width: 83.33333333%;
288}
289}
290</style>
291
292<div class="row top-line">
293</div>
294<div class="row header" id="header">
295    <header>
296        <div class="col-lg-12">
297            <div class="row">
298
299                <!-- ロゴ -->
300                <div class="col-lg-2 col-md-2">
301                    <div id="top-logo" class="ft-family1">
302                        <a href="https://webukatu.com/home">
303                            <img class="img-responsive" id="top-logo" src="https://webukatu.com/assets/img/logo.png?1575572580" alt="" />                        </a>
304                    </div>
305                </div><!-- end ロゴ -->
306
307
308                <!-- ヘッダーナビ -->
309                <div class="col-lg-10a col-md-10a" style="padding:0 5px;">
310
311                  
312                    <!-- スマホ用メニュー表示ボタン -->
313                    <a class="btn btn-detail sp-menu" id="menu-toggle"><i
314                                class="fa fa-bars"></i><br/>MENU</a>
315
316                    <!-- トップナビメニュー -->
317                    <nav id="top-menu" class="menu-wrap" role="navigation">
318
319                        <ul>
320
321                            <li>
322                                <a href="https://webukatu.com/search/contents1_list"><i class="fas fa-chalkboard-teacher"></i> 部活一覧</a>                            </li>
323                                                                                        <li>
324                                    <a href="https://webukatu.com/plan/list"><i class="fa fa-jpy"></i> 部費</a>                                </li>
325
326                                                        
327
328                                                            <li>
329                                    <a href="https://webukatu.com/wordpress"><i class="fas fa-pen-nib"></i> 公式BLOG</a>                                </li>
330                                <li>
331                                    <a href="https://webukatu.com/auth"><i class="fa fa-unlock"></i> 登校する</a>                                </li>
332                                <li>
333                                    <a class="btn btn-big btn-primary mt10 btn-nav" style="height:auto;" href="https://webukatu.com/signup"><i class="fas fa-pencil-alt"></i> 無料で受講してみる</a>                                </li>
334                                                    </ul>
335                    </nav>
336
337                                  </div><!-- end ヘッダーナビ -->
338
339            </div>
340        </div><!-- end .col -->
341    </header>
342</div><!-- end .row -->
343
344<div class="row site-width breadcrumb-container">
345  <section>
346    <div class="col-lg-12">
347      <!-- ==============================================
348	カテゴリ:ビュー
349	役割:店舗詳細画面のパンくずリスト
350=============================================== -->
351
352<!-- パンくずリスト -->
353<div class="breadcrumb">
354	<a href="https://webukatu.com/home"><i class="fa fa-home"></i></a> > 
355
356		<a href="https://webukatu.com/search/contents1_list">
357			部活動一覧
358		</a> >
359
360	HTML・CSS部 入門</div>    </div>
361  </section>
362</div>
363
364<div id="main">
365
366  <!-- ==============================================
367    店舗情報画面
368  =============================================== -->
369  <div class="row top-contents site-width">
370    <section>
371
372      <div class="col-lg-9 col-md-9 col-sm-9">
373
374        <!-- 店舗トップ -->
375        <!-- 連想配列の最初のキーを取得 -->
376
377
378<!-- 閲覧数カウントアップ -->
379
380<!-- 店舗トップ -->
381<div class="row mb20">
382	<div class="col-lg-12">
383		
384		<div class="row">
385  		<div class="col-lg-12">
386      	<div class="panel panel-naked">
387          <h1 class="title page-title-color1">HTML・CSS部 入門</h1>
388                    <div class="row comment mb20">
389        		<div class="col-lg-12">
390        											<img class="img-responsive img-bd" alt="部活トップ画像" id="pic1" src="https://webukatu.com/assets/uploads/../uploads/img/92e0bf73c1ddc41cee15e953de9c14f69c0f71c7html-easy4bf9a0fdded0c1a2ab018698377419f3c7a21cc0.jpg?1575572580" />							          	</div>
391          	<div class="col-lg-12">
392          		<div class="comemnt">
393              	<p style="background:#F0F2F4; padding:15px; border:1px solid #ccc; margin-top:-1px;">
394              		                		ホームページを作る上で一番最初に学ぶのがHTML言語とCSS言語。この2つのプログラミング言語を使えるようになると、基本的なホームページが作れるようになります!WEBサービス・WEBアプリはこのホームページに色々なものを加えることで出来ているので、WEBサービスの基礎となるスキルです。                	              	</p>
395          		</div>
396          	</div>
397        	</div>
398        	
399        	<div class="row comment mb20">
400        		<div class="col-lg-12">
401        			<h2 style="font-size:1rem; text-align:center;" class="mb20"><b>この部活で作るもの</b></h2>
402        											<img class="img-responsive img-bd" alt="部活で作るもの" id="pic2" src="https://webukatu.com/assets/uploads/../uploads/img/a5c7b5e296ee8999f5d73e430960e5b0a8f88f87seikabutu01ec30468bd060eaa4e07e230287f0a87b09fff72e.png?1575572580" />							          	</div>
403        	</div>
404
405          <div class="panel-body radius-bottom" style="background:white; padding:15px !important;">					
406
407						<div class="row mb10">
408          		<div class="col-lg-12 btn-block" style="text-align:center;">
409          			          			          		</div>
410          	</div>
411
412						
413						
414          </div>
415          
416      	</div>
417  		</div>
418  	</div>
419  
420	</div>
421</div>
422
423        <div class="row" style="border-top:1px solid #ccc;">
424          <div class="col-lg-12">
425
426            <div class="panel plain panel-default panel-shop-base">
427
428              <div class="panel-body">
429                <h2 class="bg-brown3 brall text-adjust block p5 mb20 t-center" style="font-size:1.3rem;">
430                  <b>HTML・CSS部 入門の練習メニュー</b></h2>
431
432                                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="background: #F6F5F5;">
433                          <div class="t-center"
434                             style="background:#F6F5F5; padding:25px;">
435                              <p class="mb10">レッスン一覧はレッスンを進めていくごとにゲームのように解放されていきます!</p>
436                              <a class="btn btn-primary"
437                                 style="font-size: 14px;margin-top: 14px;font-weight: bold;padding:10px 25px;"
438                                 href="https://webukatu.com/signup">無料で受講してみる</a>
439                          </div>
440                      </div>
441                  
442                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
443
444                                                                                                                                                          <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
445              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
446                次の練習へ進む ボタンで解除
447              </p>
448				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
449          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
450	          		<div class="col-lg-10 col-md-10 col-sm-10">
451									<div class="panel-head" style="height:auto; padding: 5px;">
452										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 01「HTMLとは?」 </span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">HTML言語とはいったいなんなのか!?1分ちょっとで分かりやすく解説!!</span></p> </div>
453	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
454                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
455              </div></div>
456    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
457              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
458                次の練習へ進む ボタンで解除
459              </p>
460				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
461          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
462	          		<div class="col-lg-10 col-md-10 col-sm-10">
463									<div class="panel-head" style="height:auto; padding: 5px;">
464										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 02「HTMLの書き方」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">HTMLの構成と基本的な書き方を無料のテキストエディタソフト「CotEditor」を使って学んでいきます。</span></p> </div>
465	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
466                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
467              </div></div>
468    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
469              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
470                次の練習へ進む ボタンで解除
471              </p>
472				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
473          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
474	          		<div class="col-lg-10 col-md-10 col-sm-10">
475									<div class="panel-head" style="height:auto; padding: 5px;">
476										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 03「画像を表示させてみよう!」 </span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">imgタグを使ってホームページに画像を表示させてみましょう!</span></p> </div>
477	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
478                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
479              </div></div>
480    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
481              <p style="position: absolute;
481left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
482                次の練習へ進む ボタンで解除
483              </p>
484				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
485          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
486	          		<div class="col-lg-10 col-md-10 col-sm-10">
487									<div class="panel-head" style="height:auto; padding: 5px;">
488										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 04「リンクを使って画面を切り替えよう!」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">aタグを使ってリンクを作ってみよう!
489画面遷移(画面の切替)ができるようになるよ!</span></p> </div>
490	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
491                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
492              </div></div>
493    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
494              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
495                次の練習へ進む ボタンで解除
496              </p>
497				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
498          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
499	          		<div class="col-lg-10 col-md-10 col-sm-10">
500									<div class="panel-head" style="height:auto; padding: 5px;">
501										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 05「表を作ってみよう!」 </span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">tableタグ、trタグ、tdタグを使って表を作ってみましょう!</span></p> </div>
502	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
503                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
504              </div></div>
505    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
506              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
507                次の練習へ進む ボタンで解除
508              </p>
509				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
510          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
511	          		<div class="col-lg-10 col-md-10 col-sm-10">
512									<div class="panel-head" style="height:auto; padding: 5px;">
513										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">コーヒーブレイク「バックエンドよりフロントエンドが稼ぎやすくて美味しい理由」</span></h3> </div>
514	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
515                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
516              </div></div>
517    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
518              <p style="position: absolute;
518left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
519                次の練習へ進む ボタンで解除
520              </p>
521				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
522          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
523	          		<div class="col-lg-10 col-md-10 col-sm-10">
524									<div class="panel-head" style="height:auto; padding: 5px;">
525										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 06「リストを作ってみよう!」 </span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">ul,liタグを使ってリストを作ってみよう!
526リストはホームページのメニューなどにも使われているよ!</span></p> </div>
527	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
528                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
529              </div></div>
530    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
531              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
532                次の練習へ進む ボタンで解除
533              </p>
534				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
535          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
536	          		<div class="col-lg-10 col-md-10 col-sm-10">
537									<div class="panel-head" style="height:auto; padding: 5px;">
538										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 07「フォームを作ってみよう!」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">テキストボックスやチェックボックス、ラジオボタンにセレクトボックス、テキストエリアなど。
539お問合せフォームやユーザー登録フォームなどWEBアプリケーションには欠かせないフォームの作り方を学んでいこう!
540</span></p> </div>
541	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
542                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
543              </div></div>
544    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
545              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
546                次の練習へ進む ボタンで解除
547              </p>
548				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
549          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
550	          		<div class="col-lg-10 col-md-10 col-sm-10">
551									<div class="panel-head" style="height:auto; padding: 5px;">
552										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">コーヒーブレイク「競争とはなんだろう?学習とはなんだろう?」</span></h3> </div>
553	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
554                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
555              </div></div>
556    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
557              <p style="position: absolute;
557left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
558                次の練習へ進む ボタンで解除
559              </p>
560				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
561          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
562	          		<div class="col-lg-10 col-md-10 col-sm-10">
563									<div class="panel-head" style="height:auto; padding: 5px;">
564										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 08「CSSってなに?」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSS言語とはいったいなんなのか?
5652分でさくっと解説します!</span></p> </div>
566	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
567                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
568              </div></div>
569    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
570              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
571                次の練習へ進む ボタンで解除
572              </p>
573				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
574          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
575	          		<div class="col-lg-10 col-md-10 col-sm-10">
576									<div class="panel-head" style="height:auto; padding: 5px;">
577										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 09「CSSの書き方」 </span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSS言語の書き方を学習していきます。</span></p> </div>
578	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
579                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
580              </div></div>
581    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
582              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
583                次の練習へ進む ボタンで解除
584              </p>
585				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
586          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
587	          		<div class="col-lg-10 col-md-10 col-sm-10">
588									<div class="panel-head" style="height:auto; padding: 5px;">
589										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 10「id属性とclass属性」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">スタイル指定の幅を広げるid属性とclass属性について学習していきます。</span></p> </div>
590	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
591                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
592              </div></div>
593    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
594              <p style="position: absolute;
594left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
595                次の練習へ進む ボタンで解除
596              </p>
597				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
598          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
599	          		<div class="col-lg-10 col-md-10 col-sm-10">
600									<div class="panel-head" style="height:auto; padding: 5px;">
601										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 11「セレクタ」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSS言語での要素へのスタイル指定方法とスタイル指定が被った場合のスタイルが適用される優先順位を学習していきます。</span></p> </div>
602	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
603                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
604              </div></div>
605    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
606              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
607                次の練習へ進む ボタンで解除
608              </p>
609				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
610          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
611	          		<div class="col-lg-10 col-md-10 col-sm-10">
612									<div class="panel-head" style="height:auto; padding: 5px;">
613										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 12「ブロックレベル要素とインライン要素」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSSでホームページをレイアウトしていく際に必須の知識となる要素の種類について学習していきます。</span></p> </div>
614	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
615                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
616              </div></div>
617    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
618              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
619                次の練習へ進む ボタンで解除
620              </p>
621				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
622          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
623	          		<div class="col-lg-10 col-md-10 col-sm-10">
624									<div class="panel-head" style="height:auto; padding: 5px;">
625										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 13「marginとpadding」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">
625ホームページのレイアウトを組んでいく際に重要な「余白」について学んでいきます。</span></p> </div>
626	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
627                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
628              </div></div>
629    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
630              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
631                次の練習へ進む ボタンで解除
632              </p>
633				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
634          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
635	          		<div class="col-lg-10 col-md-10 col-sm-10">
636									<div class="panel-head" style="height:auto; padding: 5px;">
637										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 14「単位の指定」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSSで指定できる「大きさの単位」と「色の単位」について学んでいきます!</span></p> </div>
638	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
639                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
640              </div></div>
641    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
642              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
643                次の練習へ進む ボタンで解除
644              </p>
645				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
646          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
647	          		<div class="col-lg-10 col-md-10 col-sm-10">
648									<div class="panel-head" style="height:auto; padding: 5px;">
649										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">コーヒーブレイク「プログラミングで稼ぐとはどういうことなのか?」</span></h3> </div>
650	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
651                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
652              </div></div>
653    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
654              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
655                次の練習へ進む ボタンで解除
656              </p>
657				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
658          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
659	          		<div class="col-lg-10 col-md-10 col-sm-10">
660									<div class="panel-head" style="height:auto; padding: 5px;">
661										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 15「positionとfloat」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">CSSでボックスの配置を指定できる「position」「float」を学んでいきます!</span></p> </div>
662	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
663                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
664              </div></div>
665    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
666              <p style="position: absolute;
666left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
667                次の練習へ進む ボタンで解除
668              </p>
669				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
670          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
671	          		<div class="col-lg-10 col-md-10 col-sm-10">
672									<div class="panel-head" style="height:auto; padding: 5px;">
673										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">コーヒーブレイク「高いの?安いの?出来るの?出来ないの?」</span></h3> </div>
674	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
675                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
676              </div></div>
677    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
678              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
679                次の練習へ進む ボタンで解除
680              </p>
681				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
682          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
683	          		<div class="col-lg-10 col-md-10 col-sm-10">
684									<div class="panel-head" style="height:auto; padding: 5px;">
685										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 16「実際にHPを作ってみよう!part1」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">今までの集大成!トップページとお問合せページを実際に作っていきましょう!今回はHTMLでトップページを作っていきます。
686テキストエディタも今までより優れた「Atom」を使っていきます。</span></p> </div>
687	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
688                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
689              </div></div>
690    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
691              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
692                次の練習へ進む ボタンで解除
693              </p>
694				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
695          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
696	          		<div class="col-lg-10 col-md-10 col-sm-10">
697									<div class="panel-head" style="height:auto; padding: 5px;">
698										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson 17「実際にHPを作ってみよう!part2」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">今回はお問い合わせフォームの作成といよいよCSSを使って見た目を整えていきます。
699新たに学ぶもの:GoogleChromeの開発ツールの使い方、placeholder属性、フォントファミリー(フォント種類)の変更、Googleウェブフォントの使い方、文字の上下中央揃え</span></p> </div>
700	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
701                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
702              </div></div>
703    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
704              <p style="position: absolute;
704left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
705                次の練習へ進む ボタンで解除
706              </p>
707				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
708          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
709	          		<div class="col-lg-10 col-md-10 col-sm-10">
710									<div class="panel-head" style="height:auto; padding: 5px;">
711										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson18「実際にHPを作ってみよう!part3」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">とうとう、トップページが完成します!ボックスの中央寄せや、ボックスの縦幅の揃え方、marginの相殺やpaddingやborderをボックスの幅に含める方法など実践的に使える内容を学んでいきます。
712</span></p> </div>
713	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
714                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
715              </div></div>
716    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
717              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
718                次の練習へ進む ボタンで解除
719              </p>
720				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
721          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
722	          		<div class="col-lg-10 col-md-10 col-sm-10">
723									<div class="panel-head" style="height:auto; padding: 5px;">
724										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">Lesson19「実際にHPを作ってみよう!part4」</span></h3><p class="comment" style="font-size:0.8rem; padding:10px;text-align:left; min-height:60px;"><span style="filter: blur(4px);-ms-filter: blur(4px);">とうとう最終回!お問い合わせフォームのスタイルを作って完成です!</span></p> </div>
725	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
726                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
727              </div></div>
728    			</div>                                                                                                                        <div class="col-lg-12 table-option ctn2-list-container pt10 pb10" style="border-bottom:1px solid #ccc;position: relative;">
729              <p style="position: absolute;left: calc(50% - 120px);top: calc(50% - 10px);z-index: 3;font-size: 1em;font-weight:bold;color:#666;text-shadow: 0 0 10px #fff">
730                次の練習へ進む ボタンで解除
731              </p>
732				      <i class="fa fa-lock" style="position: absolute;left: calc(50% - 35px);top: calc(50% - 28px);z-index: 1;font-size: 3.5em;opacity: .7;"></i>
733          		<div class="ctn panel panel-naked mb20 ctn2-list-mini">
734	          		<div class="col-lg-10 col-md-10 col-sm-10">
735									<div class="panel-head" style="height:auto; padding: 5px;">
736										<h3 class="list-title" style="text-align:left;font-size:16px"><span style="filter: blur(4px);-ms-filter: blur(4px);">コーヒーブレイク「はたらくプログラミング 第2話」</span></h3> </div>
737	    					</div><div class="col-lg-2 col-md-2 col-sm-2">
738                <div class="panel-body img-liquid list-img" style="display:block;"><label class="label label-warning fl-right" style="border-radius:0; margin:0;">プレミアム</label><img src="http://i.ytimg.com/vi/0.jpg" alt="" /></div>
739              </div></div>
740    			</div>                                  </div>
741              </div>
742
743            </div>
744
745          </div>
746        </div><!-- End 基本情報 -->
747
748      </div><!-- end .col -->
749
750      <!-- Sidebar -->
751      <div class="col-lg-3 col-md-3 col-sm-3 sidebar" style="padding:15px;">
752
753        <!-- 連想配列の最初のキーを取得 -->
754
755
756
757
758
759	
760
761<!-- <div class="baner baner-side">
762	<a href="http://crazy-wp.com"><img class="img-responsive" src="https://webukatu.com/assets/img//baner/ad-baner02.png?1575572579" alt="" /></a>
763</div>
764<div class="baner baner-side">
765	<a href="http://0-1-llc.com"><img class="img-responsive" src="https://webukatu.com/assets/img//baner/ad-baner1.png?1575572579" alt="" /></a>
766</div>
767 -->
768
769<!-- 
770 -->
771
772<section class="fl-right sidebar-opinion-margin">
773	<h2 class="sidebar-beneath-title"><p>ご意見箱</p></h2>
774	<form method="post" enctype="multipart/form-data">
775		<textarea cols="50" rows="5" placeholder="" style="height:148px; width:100%; padding:5px; line-height:1rem; margin-bottom: 18px; border:2px solid #f6f6f6" id="iken-area"></textarea><br />
776		<p style="color:#545454; line-height:1.5em;" class="sidebar-beneath-note">※こちらのフォームで送信された内容はユーザーの特定、ご返信ができません。<br />返信希望の場合は、サイト上部にある「お問合せ」からご連絡ください。</p>
777		<div class="btn-block mt10">
778			<p class="btn btn-primary btn-midium sidebar-beneath-submit" id="send-iken" style="width:100%; border-radius:3px !important;">送信する</p>
779		</div>
780	</form>
781</section>
782
783
784
785<!-- Twitter -->
786<!-- 
787<div class="panel panel-naked panel-twitter" style="margin-top:0;">
788	<div class="panel-header">
789		<h1>Twitter</h1>
790	</div>
791	<div class="panel-body">
792	
793		<a class="twitter-timeline" href="https://twitter.com/fuzooku" data-widget-id="554737138923630592">@fuzookuさんのツイート</a>
794<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
794
795
796		
797	</div>
798</div>
799-->
800
801<!-- 							
802<div class="panel panel-naked panel-custom2" style="margin-top:0;">
803	<div class="panel-header">
804		<h1>オススメ風俗店</h1>
805	</div>
806	<div class="panel-body">
807	
808		<a href="" class="row list-mini">
809			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 img-container">
810				<div class="img-liquid" style="height:60px; width:100%;">
811					<img class="img-responsive" alt="" />				</div>
812			</div>
813			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
814				<p>関東最大出会いカフェ キャンカフェ川崎店</p>
815			</div>
816		</a>
817		
818		<a href="" class="row list-mini">
819			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 img-container">
820				<div class="img-liquid" style="height:60px; width:100%;">
821					<img class="img-responsive" alt="" />				</div>
822			</div>
823			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
824
825				<p>痴女りーな</p>
826				
827			</div>
828		</a>
829		
830		<a href="" class="row list-mini">
831			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 img-container">
832				<div class="img-liquid" style="height:60px; width:100%;">
833					<img class="img-responsive" alt="" />				</div>
834			</div>
835			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
836
837				<p>Romeo 2nd Impact</p>
838				
839			</div>
840		</a>
841		
842		<a href="" class="row list-mini">
843			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 img-container">
844				<div class="img-liquid" style="height:60px; width:100%;">
845					<img class="img-responsive" alt="" />				</div>
846			</div>
847			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
848
849				<p>渋谷M性感 C.C.Cats </p>
850				
851			</div>
852		</a>
853		
854		<a href="" class="row list-mini">
855			<div class="col-lg-4 col-md-4 col-sm-4 col-xs-5 img-container">
856				<div class="img-liquid" style="height:60px; width:100%;">
857					<img class="img-responsive" alt="" />				</div>
858			</div>
859			<div class="col-lg-8 col-md-8 col-sm-8 col-xs-7">
860
861				<p>20代美人妻やりすぎ変態サークル デリヘルSCANDAL</p>
862				
863			</div>
864		</a>
865		
866	</div>
867</div>
868 -->
869
870<!--テスト2-->
871      </div>
872      <!-- End Sidebar -->
873
874    </section>
875  </div>
876  <!-- End #main -->		</div>
877	</div><!-- end #page -->
878
879<!-- ==============================================
880  メッセージ表示
881=============================================== -->
882<div id="msg-area" style="display:none;">
883	<p class="" style="vertical-align: middle"></p>
884</div>
885
886<!-- ==============================================
887Footer
888=============================================== -->
889
890
891
892
893<!--リニューアル前のフッター-->
894<div class="row" style="background: #f6f5f4; padding: 15px">
895        <div class="col-lg-2">
896
897        <ul style="display: flex; justify-items: center">
898
899          <li><a
900              href="https://webukatu.com/search/contents1_detail_info?c1id=35150">HTML・CSS部 入門</a>
901          </li>
902
903        </ul>
904      </div>
905          <div class="col-lg-2">
906
907        <ul style="display: flex; justify-items: center">
908
909          <li><a
910              href="https://webukatu.com/search/contents1_detail_info?c1id=35151">javascript・jQuery部 入門</a>
911          </li>
912
913        </ul>
914      </div>
915          <div class="col-lg-2">
916
917        <ul style="display: flex; justify-items: center">
918
919          <li><a
920              href="https://webukatu.com/search/contents1_detail_info?c1id=35152">PHP・MySQL部</a>
921          </li>
922
923        </ul>
924      </div>
925          <div class="col-lg-2">
926
927        <ul style="display: flex; justify-items: center">
928
929          <li><a
930              href="https://webukatu.com/search/contents1_detail_info?c1id=35153">ネットワーク・サーバー部</a>
931          </li>
932
933        </ul>
934      </div>
935          <div class="col-lg-2">
936
937        <ul style="display: flex; justify-items: center">
938
939          <li><a
940              href="https://webukatu.com/search/contents1_detail_info?c1id=35155">WEBサービス部</a>
941          </li>
942
943        </ul>
944      </div>
945          <div class="col-lg-2">
946
947        <ul style="display: flex; justify-items: center">
948
949          <li><a
950              href="https://webukatu.com/search/contents1_detail_info?c1id=35157">
950PHPオブジェクト指向部</a>
951          </li>
952
953        </ul>
954      </div>
955          <div class="col-lg-2">
956
957        <ul style="display: flex; justify-items: center">
958
959          <li><a
960              href="https://webukatu.com/search/contents1_detail_info?c1id=35154">WordPress部</a>
961          </li>
962
963        </ul>
964      </div>
965          <div class="col-lg-2">
966
967        <ul style="display: flex; justify-items: center">
968
969          <li><a
970              href="https://webukatu.com/search/contents1_detail_info?c1id=35156">javascript・jQuery部 中級</a>
971          </li>
972
973        </ul>
974      </div>
975          <div class="col-lg-2">
976
977        <ul style="display: flex; justify-items: center">
978
979          <li><a
980              href="https://webukatu.com/search/contents1_detail_info?c1id=35162">HTML・CSS部 中級</a>
981          </li>
982
983        </ul>
984      </div>
985          <div class="col-lg-2">
986
987        <ul style="display: flex; justify-items: center">
988
989          <li><a
990              href="https://webukatu.com/search/contents1_detail_info?c1id=35165">HTML・CSS部 上級</a>
991          </li>
992
993        </ul>
994      </div>
995          <div class="col-lg-2">
996
997        <ul style="display: flex; justify-items: center">
998
999          <li><a
1000              href="https://webukatu.com/search/contents1_detail_info?c1id=35158">PHPフレームワーク部</a>
1001          </li>
1002
1003        </ul>
1004      </div>
1005          <div class="col-lg-2">
1006
1007        <ul style="display: flex; justify-items: center">
1008
1009          <li><a
1010              href="https://webukatu.com/search/contents1_detail_info?c1id=35164">javascript・jQuery部 上級</a>
1011          </li>
1012
1013        </ul>
1014      </div>
1015          <div class="col-lg-2">
1016
1017        <ul style="display: flex; justify-items: center">
1018
1019          <li><a
1020              href="https://webukatu.com/search/contents1_detail_info?c1id=35167">Laravel部</a>
1021          </li>
1022
1023        </ul>
1024      </div>
1025          <div class="col-lg-2">
1026
1027        <ul style="display: flex; justify-items: center">
1028
1029          <li><a
1030              href="https://webukatu.com/search/contents1_detail_info?c1id=35160">WEBマーケティング部</a>
1031          </li>
1032
1033        </ul>
1034      </div>
1035          <div class="col-lg-2">
1036
1037        <ul style="display: flex; justify-items: center">
1038
1039          <li><a
1040              href="https://webukatu.com/search/contents1_detail_info?c1id=35172">法務部</a>
1041          </li>
1042
1043        </ul>
1044      </div>
1045          <div class="col-lg-2">
1046
1047        <ul style="display: flex; justify-items: center">
1048
1049          <li><a
1050              href="https://webukatu.com/search/contents1_detail_info?c1id=35163">営業部</a>
1051          </li>
1052
1053        </ul>
1054      </div>
1055          <div class="col-lg-2">
1056
1057        <ul style="display: flex; justify-items: center">
1058
1059          <li><a
1060              href="https://webukatu.com/search/contents1_detail_info?c1id=35159">起業部</a>
1061          </li>
1062
1063        </ul>
1064      </div>
1065          <div class="col-lg-2">
1066
1067        <ul style="display: flex; justify-items: center">
1068
1069          <li><a
1070              href="https://webukatu.com/search/contents1_detail_info?c1id=35161">保険部(24時間入部限定特典)</a>
1071          </li>
1072
1073        </ul>
1074      </div>
1075          <div class="col-lg-2">
1076
1077        <ul style="display: flex; justify-items: center">
1078
1079          <li><a
1080              href="https://webukatu.com/search/contents1_detail_info?c1id=35166">Ruby on Rails部(24時間入部限定特典)</a>
1081          </li>
1082
1083        </ul>
1084      </div>
1085          <div class="col-lg-2">
1086
1087        <ul style="display: flex; justify-items: center">
1088
1089          <li><a
1090              href="https://webukatu.com/search/contents1_detail_info?c1id=35168">テスト部</a>
1091          </li>
1092
1093        </ul>
1094      </div>
1095          <div class="col-lg-2">
1096
1097        <ul style="display: flex; justify-items: center">
1098
1099          <li><a
1100              href="https://webukatu.com/search/contents1_detail_info?c1id=35169">Java部(24時間入部限定特典)</a>
1101          </li>
1102
1103        </ul>
1104      </div>
1105          <div class="col-lg-2">
1106
1107        <ul style="display: flex; justify-items: center">
1108
1109          <li><a
1110              href="https://webukatu.com/search/contents1_detail_info?c1id=35171">AWSインフラ部(24時間入部限定特典)</a>
1111          </li>
1112
1113        </ul>
1114      </div>
1115          <div class="col-lg-2">
1116
1117        <ul style="display: flex; justify-items: center">
1118
1119          <li><a
1120              href="https://webukatu.com/search/contents1_detail_info?c1id=35175">お試しレッスン「1時間半でおしゃれなプロフィールHPを作ろう!」</a>
1121          </li>
1122
1123        </ul>
1124      </div>
1125          <div class="col-lg-2">
1126
1127        <ul style="display: flex; justify-items: center">
1128
1129          <li><a
1130              href="https://webukatu.com/search/contents1_detail_info?c1id=35176">オリエンテーション</a>
1131          </li>
1132
1133        </ul>
1134      </div>
1135          <div class="col-lg-2">
1136
1137        <ul style="display: flex; justify-items: center">
1138
1139          <li><a
1140              href="https://webukatu.com/search/contents1_detail_info?c1id=35177">WEBデザイン部(24時間入部限定特典)</a>
1141          </li>
1142
1143        </ul>
1144      </div>
1145    </div>
1146<div class="row footer bg-porygon-black" id="footer" style="margin:0;">
1147      <footer>
1148        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
1149          <section>
1150            <div id="top-logo" class="ft-family1">
1151              <a href="https://webukatu.com/home">
1152                <img id="logo" alt="" />              </a>
1153            </div>
1154          </section>
1155        </div>
1156        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
1157          <section class="t-right">
1158            <a href="https://webukatu.com/home/agreement">利用規約</a> | <a
1159              href="https://webukatu.com/home/policy">プライバシーポリシー</a> | <a
1160              href="https://webukatu.com/home/tokutei">特定商取引法に基づく表記</a>
1161                          | <a href="https://webukatu.com/home/contact">お問合せ</a>
1162                        <br/>
1163
1164          </section>
1165
1166        </div><!-- end .col -->
1167        <p class="copyright">
1167Copyright &copy; <a href="http://0-1-llc.com/" target="_blank" rel="noopener">ゼロワンLLC</a>.
1168          All Rights Reserved.
1169        </p>
1170      </footer>
1171    </div><!-- end .row -->
1172
1173<a id="pageTop" href="#contents"><i class="fa fa-angle-double-up"></i></a>
1174
1175<!-- ==============================================
1176JavaScript
1177=============================================== -->
1178<!-- jquery -->
1179<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
vendor: 1 bytes, line 1179
1179
1180<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
1180
1181
1182<!-- jqueryが読み込まれなかった場合にファイルから読み込む -->
1183<script>
1184	window.jQuery || document.write('
1184<script src="/js/jquery-2.1.1.min.js">\x3C/script>')
1185
1186</script>
1186
1187
1188<!-- slick読込み -->
1189<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
1189
1190
1191<!-- BootStrap読込み -->
1192	
1192<script type="text/javascript" src="https://webukatu.com/assets/js/bootstrap.min.js?1575572580"></script>
1192
1193
1194<!-- フッターをウィンドウ下部へ固定するjsを読込み -->
1195	
1195<script type="text/javascript" src="https://webukatu.com/assets/js/footerFixed.js?1575572580"></script>
1195
1196
1197<!-- 画像スライダー -->
1198	
1198<script type="text/javascript" src="https://webukatu.com/assets/js/jquery.flexslider-min.js?1575572580"></script>
1198
1199
1200<!-- DateTimePicker -->
1201	
1201<script type="text/javascript" src="https://webukatu.com/assets/js/jquery.datetimepicker.js?1575572580"></script>
1201
1202
1203<!-- スクロール表示 -->
1204	
1204<script type="text/javascript" src="https://webukatu.com/assets/js/jquery.scrollFade.js?1575572580"></script>
1204
1205
1206<!--  フォーム装飾 icheck.js  -->
1207	
1207<script type="text/javascript" src="https://webukatu.com/assets/js/icheck.min.js?1575572580"></script>
1207
1208
1209<!-- 住所自動入力プラグイン -->
1210<!-- 		
1210<script src="//jpostal.googlecode.com/svn/trunk/jquery.jpostal.js" type="text/javascript"></script>
1210 -->
1211
1212<!-- 画像自動リサイズ -->
1213	
1213<script type="text/javascript" src="https://webukatu.com/assets/js/imgLiquid-min.js?1575572580"></script>
1213
1214
1215<!-- TimePicker -->
1216	
1216<script type="text/javascript" src="https://webukatu.com/assets/js/bootstrap-timepicker.min.js?1575572580"></script>
1216
1217
1218<!-- インジケーター -->
1219	
1219<script type="text/javascript" src="https://webukatu.com/assets/js/radialIndicator.min.js?1575572580"></script>
1219
1220
1221<!-- ヘッダー自動非表示 -->
1222
1223<!-- CDN -->
1224<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
1224
1225
1226<!-- Plugins -->
1227	
1227<script type="text/javascript" src="https://webukatu.com/assets/js/plugins/fadeInAnimatePlugin.js?1598162752"></script>
1227
1228	
1228<script type="text/javascript" src="https://webukatu.com/assets/js/plugins/mouseOverAnimatePlugin.js?1575572580"></script>
1228
1229	
1229<script type="text/javascript" src="https://webukatu.com/assets/js/plugins/palalaxAnimatePlugin.js?1575572580"></script>
1229
1230
1231<script type="text/javascript">
1232	$('.slick1').slick({
1233		autoplay: true,
1234		slidesToShow: 3,
1235		variableWidth: true,
1236		centerMode: true,
1237		arrows: true,
1238	})
1239
1240</script>
1240
1241
1242
1243<!-- スライダーはフッター側に記述しないと変な挙動をする -->
1244<script type="text/javascript">
1245	var debug_flg = false;
1246
1247	function dlog(str) {
1248		if (debug_flg === true) {
1249			console.log(str);
1250		}
1251	}
1252
1253	//Ajaxでフォーラムコメントに投稿
1254	$('form.js-send-forum').on('submit', function(e) {
1255		e.preventDefault();
1256		console.log('submit');
1257		var $this = $(this);
1258		var mapSqlFuncObj = {
1259			set: "SET",
1260			grant: "GRANT",
1261			create: "CREATE",
1262			delete: "DELETE",
1263			drop: "DROP",
1264			show: "SHOW",
1265			select: "SELECT",
1266			insert: "INSERT",
1267			update: "UPDATE",
1268			alter: "ALTER",
1269			and: "AND",
1270			or: "OR",
1271		};
1272		var replyTxt = $this.children('.js-send-target').val().replace(/\&/g, '&').replace(/\+/g, '+').replace(/\</g, '<').replace(/\>/g, '>');
1273		var filterSqlWord = '';
1274		Object.keys(mapSqlFuncObj).forEach(function(key) {
1275			filterSqlWord += '|' + key;
1276		});
1277		var filter_ptn = new RegExp(filterSqlWord.substr(1), 'gi');
1278		replyTxt = replyTxt.replace(filter_ptn, function(matched) {
1279			return mapSqlFuncObj[matched.toLowerCase()];
1280		});
1281		var $btn = $this.find('.btn');
1282		dlog(replyTxt);
1283		dlog($this.data('c1id'));
1284		dlog($this.data('c2id'));
1285		if (replyTxt.length > 0) {
1286			$btn.prop("disabled", true);
1287			$.ajax({
1288				url: "https://webukatu.com/ajax/comment_add.json",
1289				type: "post",
1290				data: "c1id=" + $this.data('c1id') + "&c2id=" + $this.data('c2id') + "&comment=" + replyTxt,
1291			}).done(function(json) {
1292
1293				console.log('Ajax成功');
1294				$btn.prop("disabled", false);
1295				if (json['err_flg']) { //エラーフラグが1なら
1296					$('#msg-area p').removeClass('bg-success');
1297					$('#msg-area p').addClass('bg-danger');
1298				} else {
1299					$('#msg-area p').removeClass('bg-danger');
1300					$('#msg-area p').addClass('bg-success');
1301				}
1302				$('#msg-area p').text(json['msg']);
1303				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1304				$this.children('.js-send-target').val('');
1305
1306			}).fail(function(jqXHR, textStatus) {
1307				console.log('Ajax失敗:'.textStatus);
1308			});
1309		} else {
1310			$('#msg-area p').removeClass('bg-success');
1311			$('#msg-area p').addClass('bg-danger');
1312			$('#msg-area p').text('テキストを入力してください');
1313			$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1314		}
1315
1316	});
1317
1318	//Ajaxでフォーラムコメントに返信
1319	$('form.js-send-reply').on('submit', function(e) {
1320		e.preventDefault();
1321		console.log('submit');
1322		var $textForm = $(this).children('.js-send-target');
1323		var replyTxt = $textForm.val().replace(/\&/g, '&').replace(/\+/g, '+').replace(/\</g, '<').replace(/\>/g, '>');
1324		var mapSqlFuncObj = {
1325			set: "SET",
1326			grant: "GRANT",
1327			create: "CREATE",
1328			delete: "DELETE",
1329			drop: "DROP",
1330			show: "SHOW",
1331			select: "SELECT",
1332			insert: "INSERT",
1333			update: "UPDATE",
1334			alter: "ALTER",
1335			and: "AND",
1336			or: "OR",
1337		};
1338		var filterSqlWord = '';
1339		Object.keys(mapSqlFuncObj).forEach(function(key) {
1340			filterSqlWord += '|' + key;
1341		});
1342		var filter_ptn = new RegExp(filterSqlWord.substr(1), 'gi');
1343		replyTxt = replyTxt.replace(filter_ptn, function(matched) {
1344			return mapSqlFuncObj[matched.toLowerCase()];
1345		});
1346		var $btn = $(this).find('.btn');
1347		dlog(replyTxt);
1348		dlog($(this).data('id'));
1349		if (replyTxt.length > 0) {
1350			$btn.prop("disabled", true);
1351			$.ajax({
1352				url: "https://webukatu.com/ajax/reply_add.json",
1353				type: "post",
1354				data: "comment_id=" + $(this).data('id') + "&comment=" + replyTxt,
1355			}).done(function(json) {
1356
1357				console.log('Ajax成功');
1358				$btn.prop("disabled", false);
1359				$textForm.val('');
1360				if (json['err_flg']) { //エラーフラグが1なら
1361					$('#msg-area p').removeClass('bg-success');
1362					$('#msg-area p').addClass('bg-danger');
1363				} else {
1364					$('#msg-area p').removeClass('bg-danger');
1365					$('#msg-area p').addClass('bg-success');
1366				}
1367				$('#msg-area p').text(json['msg']);
1368				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1369
1370			}).fail(function(jqXHR, textStatus) {
1371				console.log('Ajax失敗:'.textStatus);
1372			});
1373		} else {
1374			$('#msg-area p').removeClass('bg-success');
1375			$('#msg-area p').addClass('bg-danger');
1376			$('#msg-area p').text('テキストを入力してください');
1377			$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1378		}
1379
1380	});
1381
1382
1383	//Ajaxでコンテンツ2ラーニング完了処理
1384	function learning_add($flg) {
1385		var $elapsed_minutes = "0";
1386		if ($flg != '1' && $flg != '2' && $flg != '3' && $flg != '4') {
1387			false;
1388		}
1389		var $elapsed_minutes = $('#elapsed_minutes' + $flg).val();
1390		if ($elapsed_minutes === "") {
1391			alert("学習時間を選択してください");
1392			return;
1393		}
1394		var $elapsed_minutes_select = $('#elapsed_minutes' + $flg);
1395		$elapsed_minutes_select.prop("disabled", true);
1396		if ($flg == '3' || $flg == '4') {
1397			var $learning_add = $('#learning_add' + $flg);
1398		} else {
1399			var $learning_add = $('#learning_add');
1400		}
1401		$learning_add.prop("disabled", true);
1402		var val = $learning_add.attr('value');
1403		val = val.split(',');
1404		var url = '';
1405		if ($flg == '1' || $flg == '2') url = "https://webukatu.com/ajax/learning_add.json";
1406		if ($flg == '3' || $flg == '4') url = "https://webukatu.com/ajax/learning_update.json";
1407		$.ajax({
1408			url: url,
1409			type: "post",
1410			data: "c1id=" + val[0] + "&c2id=" + val[1] + "&elapsed_minutes=" + $elapsed_minutes,
1411		}).done(function(json) {
1412
1413			console.log('Ajax成功');
1414			if (json['err_flg']) { //エラーフラグが1なら
1415				if ($flg == '3' || $flg == '4') {
1416					if (json['err_flg'] == 2) {
1417						alert(json['msg']);
1418					} else {
1419						alert('学習時間の更新に失敗しました。再度やり直してください。');
1420					}
1421					$elapsed_minutes_select.prop("disabled", false);
1422					$learning_add.prop("disabled", false);
1423				}
1424			} else { //エラーフラグ0
1425				if ($flg == '1' || $flg == '2') {
1426					$learning_add.addClass('btn-gray');
1427					$learning_add.tex
1428					if (json['c2id']) {
1429						location.href = location.protocol + '//' + location.hostname + '/search/contents2_detail?c2id=' + json['c2id']
1430					}
1431					// $('#learning_add').attr('onClick','learning_del();');
1432				}
1433				if ($flg == '3' || $flg == '4') {
1434					alert(json['msg']);
1435					$elapsed_minutes_select.prop("disabled", false);
1436					$learning_add.prop("disabled", false);
1437					if ($('#learning_add4')[0]) {
1438						if ($flg == '3') {
1439							$('#elapsed_minutes4').val($elapsed_minutes);
1440						}
1441						if ($flg == '4') {
1442							$('#elapsed_minutes3').val($elapsed_minutes);
1443						}
1444					}
1445				}
1446			}
1447
1448		}).fail(function(jqXHR, textStatus) {
1449			console.log('Ajax失敗:'.textStatus);
1450			if ($flg == '3' || $flg == '4') {
1451				alert('学習時間の更新に失敗しました。再度やり直してください。');
1452				$elapsed_minutes_select.prop("disabled", false);
1453				$learning_add.prop("disabled", false);
1454			}
1455		});
1456	}
1457
1458
1459	$('.like-button').click(function() {
1460		var $clicked_button = $(this);
1461		var updated_id = null;
1462		var col = 'comment-id';
1463		var like_button_class = $clicked_button.attr('class');
1464		if (like_button_class.match(/js-like-reply/g)) {
1465			col = 'reply-id';
1466		}
1467		updated_id = $clicked_button.find('.' + col).val();
1468		var action = like_button_class.match(/active/g) ? 'delete' : 'add';
1469		$.ajax({
1470			url: "https://webukatu.com/ajax/comment_reply_like_update.json",
1471			type: "post",
1472			data: "action=" + action + "&col=" + col.replace(/\-/g, '_') + "&updated_id=" + updated_id,
1473		}).done(function(json) {
1474			//console.log('Ajax成功');
1475			if (json['err_flg']) { //エラーフラグが1なら
1476				alert(json['msg']);
1477			} else { //エラーフラグ0
1478				var $current_num_like = $clicked_button.find('.like-button-number');
1479				var current_num_like = Number($current_num_like.text());
1480				if (action == 'add') {
1481					$clicked_button.addClass('active');
1482					$current_num_like.text(current_num_like + 1);
1483				}
1484				if (action == 'delete') {
1485					$clicked_button.removeClass('active');
1486					$current_num_like.text(current_num_like - 1);
1487				}
1488			}
1489		}).fail(function(jqXHR, textStatus) {
1490			//console.log('Ajax失敗:'.textStatus);
1491			alert('操作に失敗しました。画面を再読み込みの上やり直してください。');
1492		});
1493	});
1494
1495
1496	//Ajaxでコンテンツ2ラーニング未完了処理
1497	//function learning_del(){
1498	//
1499	//var val = $('#learning_add').attr('value');
1500	//val = val.split(',');
1501	// $.ajax({
1502	//     url: "//",
1503	//     type: "post",
1504	//		data: "c1id="+val[0]+"&c2id="+val[1],
1505	// }).done(function(json){
1506	//
1507	// 		console.log('Ajax成功');
1508	// 		if(json['err_flg']){ //エラーフラグが1なら
1509	//
1510	// 		}else{
1511	//
1512	// 			$('#learning_add').removeClass('btn-gray');
1513	// 			$('#learning_add').text('学習完了!');
1514	// 			$('#learning_add').attr('onClick','learning_add();');
1515	// 		}
1516	//
1517	//   }).fail(function(jqXHR, textStatus){
1518	//       console.log('Ajax失敗:'.textStatus);
1519	//   });
1520	//}
1521
1522	//document.radyにしないと画像が一瞬全部表示されてしまう
1523	$(document).ready(function() {
1524
1525		//ツールチップ
1526		$(function($) {
1527			$('p[rel=tooltip]').tooltip();
1528		});
1529
1530		//インジケーター
1531		$('#indicatorContainer1').radialIndicator({
1532			barColor: {
1533				0: '#FF0000',
1534				30: '#FFFF00',
1535				50: '#0066FF',
1536				80: '#0066FF',
1537				100: '#33CC33'
1538			},
1539			barWidth: 10,
1540			initValue: 40,
1541			roundCorner: false,
1542			percentage: true
1543		});
1544		$('#indicatorContainer2').radialIndicator({
1545			barColor: {
1546				0: '#FF0000',
1547				30: '#FFFF00',
1548				50: '#0066FF',
1549				80: '#0066FF',
1550				100: '#87CEEB'
1551			},
1552			barWidth: 10,
1553			initValue: 100,
1554			roundCorner: false,
1555			percentage: true
1556		});
1557		$('#indicatorContainer3').radialIndicator({
1558			barColor: {
1559				0: '#FF0000',
1560				30: '#FFFF00',
1561				50: '#0066FF',
1562				80: '#0066FF',
1563				100: '#33CC33'
1564			},
1565			barWidth: 10,
1566			initValue: 80,
1567			roundCorner: false,
1568			percentage: true
1569		});
1570		$('#indicatorContainer4').radialIndicator({
1571			barColor: {
1572				0: '#FF0000',
1573				30: '#FFFF00',
1574				50: '#0066FF',
1575				80: '#0066FF',
1576				100: '#33CC33'
1577			},
1578			barWidth: 10,
1579			initValue: 10,
1580			roundCorner: false,
1581			percentage: true
1582		});
1583
1584		//ヘッダー自動非表示
1585		//$("#header").headroom();
1586
1587		//フォームボタン押下時非活性(二重送信防止)
1588		$('form').submit(function() {
1589			if (!$(this).hasClass('js-no-disabled')) {
1590				$(this).find('button[type="submit"]').attr('disabled', 'disabled');
1591				$(this).find('input[type="submit"]').attr('disabled', 'disabled');
1592				$(this).find('#send-iken').attr('disabled', 'disabled');
1593			}
1594		});
1595
1596		//TimePicker
1597		$('#timepicker1').timepicker({
1598			minuteStep: 30,
1599			showMeridian: false,
1600			disableFocus: true,
1601		});
1602		$('#timepicker2').timepicker({
1603			minuteStep: 30,
1604			showMeridian: false,
1605			disableFocus: true,
1606		});
1607
1608		//DateTimePicker
1609		$('#datetimepicker').datetimepicker();
1610
1611		$('#datetimepicker_min_current').datetimepicker({
1612			minDate: 0,
1613			minTime: 0,
1614			maxDate: new Date() + 7,
1615			step: 30,
1616			defaultDate: new Date(),
1617		});
1618
1619		$('#datepicker_start').datetimepicker({
1620			timepicker: false,
1621			format: 'Y/m/d',
1622			onShow: function(ct) {
1623				this.setOptions({
1624					maxDate: jQuery('#datepicker_end').val() ? jQuery('#datepicker_end').val() : false
1625				})
1626			},
1627		});
1628		$('#datepicker_end').datetimepicker({
1629			timepicker: false,
1630			format: 'Y/m/d',
1631			onShow: function(ct) {
1632				this.setOptions({
1633					minDate: jQuery('#datepicker_start').val() ? jQuery('#datepicker_start').val() : false
1634				})
1635			},
1636		});
1637
1638		$('#timepicker_start').datetimepicker({
1639			step: 30,
1640			datepicker: false,
1641			format: 'H:i',
1642		});
1643		$('#timepicker_end').datetimepicker({
1644			step: 30,
1645			datepicker: false,
1646			format: 'H:i',
1647		});
1648
1649		//チェックがついていた場合にはセレクトボックスを非活性&非表示
1650		if ($("#form_all_day").attr('checked') == 'checked') {
1651			$("#timepicker_start").attr("disabled", true).parent().hide();
1652			$("#timepicker_end").attr("disabled", true).parent().hide();
1653		}
1654		$('label.checkbox-inline').click(function() {
1655
1656			var flag = $('input[name="all_day"]:checked').val();
1657
1658			if (!flag) {
1659				$("#timepicker_start").attr("disabled", true).parent().hide();
1660				$("#timepicker_end").attr("disabled", true).parent().hide();
1661			} else {
1662				$("#timepicker_start").attr("disabled", false).parent().show();
1663				$("#timepicker_end").attr("disabled", false).parent().show();
1664			}
1665		});
1666		$(".icheckbox_flat-red").click(function() {
1667
1668			var flag2 = $('input[name="all_day"]:checked').val();
1669
1670			alert('ok');
1671
1672			if (!flag2) {
1673				$("#timepicker_start").attr("disabled", true).parent().hide();
1674				$("#timepicker_end").attr("disabled", true).parent().hide();
1675			} else {
1676				$("#timepicker_start").attr("disabled", false).parent().show();
1677				$("#timepicker_end").attr("disabled", false).parent().show();
1678			}
1679
1680		});
1681
1682		//開始日が入っていたら、開始日を終了日へ自動設定する
1683		$('#datepicker_start').change(function() {
1684			var data = $(this).val();
1685			$('#datepicker_end').val(data);
1686		});
1687
1688		//開始時刻を入力した時点で、開始時刻を終了時刻へ+1時間足して自動設定する
1689		$('#timepicker_start').change(function() {
1690			var data = $(this).val();
1691			$('#timepicker_end').val(data);
1692		});
1693
1694
1695		//Ajaxで画像選択時にアップロード
1696		$('.ajax-upload').change(function(e) {
1697
1698			var name = $(this).attr('name');
1699
1700			var file = $(this).prop('files')[0];
1701			var img_url = file.name;
1702
1703			var filedata = new FormData();
1704			filedata.append("files", file);
1705
1706			$.ajax({
1707				url: "https://webukatu.com/ajax/img.json",
1708				type: "post",
1709				processData: false,
1710				contentType: false,
1711				data: filedata,
1712			}).done(function(json) {
1713
1714				console.log('Ajax成功');
1715
1716				//エラーフラグがある場合
1717				if (json['error_flg']) {
1718
1719					console.log(json['message']);
1720
1721					//エラーメッセージ表示
1722					$('#msg-area p').text(json['message']);
1723					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1724
1725				} else {
1726					//エラーフラグがない場合
1727					//変更したinputのname属性値と同じID属性のimgタグのsrc属性を書き換える
1728					$('#' + name).attr('src', 'https://webukatu.com/assets/uploads/' + json[0]['saved_as']);
1729
1730					//input[type=hiden]をname属性=アップロードしたファイル名で追加
1731					$('form').append('<input type="hidden" name="hidden_' + name + '" value="' + json[0]['saved_as'] + '" />');
1732				}
1733
1734			}).fail(function(jqXHR, textStatus) {
1735				console.log('Ajax失敗:'.textStatus);
1736			});
1737		});
1738
1739		//Ajaxで予約状況のキャンセル処理
1740		$('.reservation_canceled').click(function(e) {
1741
1742			var r_id = $(this).attr('value');
1743
1744			$.ajax({
1745				url: "https://webukatu.com/ajax/reservation_canceled.json",
1746				type: "post",
1747				data: "r_id=" + r_id,
1748			}).done(function(json) {
1749
1750				console.log('Ajax成功');
1751
1752				if (json['rst'] == true) {
1753
1754					//ステータスを設定
1755					$('#flag_' + r_id).text('キャンセル');
1756					//確定ボタンとキャンセルボタンを非表示
1757					$('#reservation_canceled_' + r_id).hide();
1758					$('#reservation_fixed_' + r_id).hide();
1759					//メッセージ表示
1760					$('#msg-area p').removeClass('bg-danger');
1761					$('#msg-area p').addClass('bg-success');
1762					$('#msg-area p').text('予約をキャンセルしました');
1763					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1764				} else {
1765					//エラーメッセージ表示
1766					$('#msg-area p').removeClass('bg-success');
1767					$('#msg-area p').addClass('bg-danger');
1768					$('#msg-area p').text('予約のキャンセル処理に失敗しました');
1769					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1770				}
1771
1772			}).fail(function(jqXHR, textStatus) {
1773				console.log('Ajax失敗:'.textStatus);
1774				//エラーメッセージ表示
1775				$('#msg-area p').removeClass('bg-success');
1776				$('#msg-area p').addClass('bg-danger');
1777				$('#msg-area p').text('予約のキャンセル処理に失敗しました');
1778				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1779			});
1780		});
1781
1782		//Ajaxで予約状況の確定処理
1783		$('.reservation_fixed').click(function(e) {
1784
1785			var r_id = $(this).attr('value');
1786
1787			$.ajax({
1788				url: "https://webukatu.com/ajax/reservation_fixed.json",
1789				type: "post",
1790				data: "r_id=" + r_id,
1791			}).done(function(json) {
1792
1793				console.log('Ajax成功');
1794
1795				if (json['rst'] == true) {
1796
1797					//ステータスを設定
1798					$('#flag_' + r_id).text('確定');
1799					//確定ボタンとキャンセルボタンを非表示
1800					$('#reservation_canceled_' + r_id).hide();
1801					$('#reservation_fixed_' + r_id).hide();
1802					//メッセージ表示
1803					$('#msg-area p').removeClass('bg-danger');
1804					$('#msg-area p').addClass('bg-success');
1805					$('#msg-area p').text('予約を確定しました');
1806					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1807				} else {
1808					//エラーメッセージ表示
1809					$('#msg-area p').removeClass('bg-success');
1810					$('#msg-area p').addClass('bg-danger');
1811					$('#msg-area p').text('予約の確定処理に失敗しました');
1812					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1813				}
1814
1815			}).fail(function(jqXHR, textStatus) {
1816				console.log('Ajax失敗:'.textStatus);
1817				//エラーメッセージ表示
1818				$('#msg-area p').removeClass('bg-success');
1819				$('#msg-area p').addClass('bg-danger');
1820				$('#msg-area p').text('予約の確定処理に失敗しました');
1821				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1822			});
1823		});
1824
1825		//Ajaxでコンテンツ1のブックマーク追加処理
1826		$('.favorite1_add').click(function(e) {
1827
1828			var val = $(this).attr('value');
1829			$.ajax({
1830				url: "https://webukatu.com/ajax/contents1_add.json",
1831				type: "post",
1832				data: "c1id=" + val,
1833			}).done(function(json) {
1834
1835				console.log('Ajax成功');
1836				$('#msg-area p').text(json['msg']);
1837				if (json['err_flg']) { //エラーフラグが1なら
1838					$('#msg-area p').removeClass('bg-success');
1839					$('#msg-area p').addClass('bg-danger'); //背景色を赤に
1840				} else {
1841					$('#msg-area p').removeClass('bg-danger');
1842					$('#msg-area p').addClass('bg-success'); //背景色を緑に
1843				}
1844				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1845
1846			}).fail(function(jqXHR, textStatus) {
1847				console.log('Ajax失敗:'.textStatus);
1848			});
1849		});
1850
1851		//Ajaxでコンテンツ2のブックマーク追加処理
1852		$('.favorite2_add').click(function(e) {
1853
1854			var val = $(this).attr('value');
1855
1856			$.ajax({
1857				url: "https://webukatu.com/ajax/contents2_add.json",
1858				type: "post",
1859				data: "c2id=" + val,
1860			}).done(function(json) {
1861
1862				console.log('Ajax成功');
1863
1864				$('#msg-area p').text(json['msg']);
1865				if (json['err_flg']) { //エラーフラグが1なら
1866					$('#msg-area p').removeClass('bg-success');
1867					$('#msg-area p').addClass('bg-danger'); //背景色を赤に
1868				} else {
1869					$('#msg-area p').removeClass('bg-danger');
1870					$('#msg-area p').addClass('bg-success'); //背景色を緑に
1871				}
1872				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1873
1874			}).fail(function(jqXHR, textStatus) {
1875				console.log('Ajax失敗:'.textStatus);
1876			});
1877		});
1878
1879		//Ajaxでコンテンツ2のブックマーク削除処理
1880		$('.favorite2_del').click(function(e) {
1881
1882			var val = $(this).attr('value');
1883
1884			$.ajax({
1885				url: "https://webukatu.com/ajax/contents2_delete.json",
1886				type: "post",
1887				data: "c2id=" + val,
1888			}).done(function(json) {
1889
1890				console.log('Ajax成功');
1891
1892				if (json['err_flg']) { //エラーフラグが1なら
1893					$('#msg-area p').removeClass('bg-success');
1894					$('#msg-area p').addClass('bg-danger'); //背景色を赤に
1895					$('#msg-area p').text(json['msg']);
1896					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1897				} else {
1898
1899					$('#favorite2_del_' + val).fadeOut(1000); //コンテンツを隠す
1900				}
1901
1902			}).fail(function(jqXHR, textStatus) {
1903				console.log('Ajax失敗:'.textStatus);
1904			});
1905		});
1906
1907		//Ajaxでコンテンツ1のブックマーク削除処理
1908		$('.favorite1_del').click(function(e) {
1909
1910			var val = $(this).attr('value');
1911
1912			$.ajax({
1913				url: "https://webukatu.com/ajax/contents1_delete.json",
1914				type: "post",
1915				data: "c1id=" + val,
1916			}).done(function(json) {
1917
1918				console.log('Ajax成功');
1919
1920				if (json['err_flg']) { //エラーフラグが1なら
1921					$('#msg-area p').removeClass('bg-success');
1922					$('#msg-area p').addClass('bg-danger'); //背景色を赤に
1923					$('#msg-area p').text(json['msg']);
1924					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1925				} else {
1926
1927					$('#favorite1_del_' + val).fadeOut(1000); //コンテンツを隠す
1928				}
1929
1930			}).fail(function(jqXHR, textStatus) {
1931				console.log('Ajax失敗:'.textStatus);
1932			});
1933		});
1934
1935		//Ajaxで意見のメール送信処理
1936		$('#send-iken').click(function(e) {
1937
1938			var val = $('#iken-area').attr('value');
1939			if (val) {
1940				$.ajax({
1941					url: "https://webukatu.com/ajax/send_mail.json",
1942					type: "post",
1943					data: "comment=" + val,
1944				}).done(function(json) {
1945
1946					console.log('Ajax成功');
1947
1948					if (json['rst']) {
1949						$('#iken-area').attr('value', '');
1950						$('#msg-area p').removeClass('bg-danger');
1951						$('#msg-area p').addClass('bg-success');
1952						$('#msg-area p').text('送信しました。ご意見頂きありがとうございます。');
1953						$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1954					} else {
1955
1956						//エラーメッセージ表示
1957						$('#msg-area p').removeClass('bg-success');
1958						$('#msg-area p').addClass('bg-danger');
1959						$('#msg-area p').text('送信出来ませんでした。');
1960						$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1961					}
1962
1963				}).fail(function(jqXHR, textStatus) {
1964					console.log('Ajax失敗:'.textStatus);
1965					//エラーメッセージ表示
1966					$('#msg-area p').removeClass('bg-success');
1967					$('#msg-area p').addClass('bg-danger');
1968					$('#msg-area p').text('送信出来ませんでした。');
1969					$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1970				});
1971			} else {
1972				$('#msg-area p').removeClass('bg-success');
1973				$('#msg-area p').addClass('bg-danger');
1974				$('#msg-area p').text('入力がありません');
1975				$('#msg-area').fadeIn(1000).delay(1500).fadeOut(2000);
1976
1977			}
1978		});
1979
1980		//Ajaxでマップ切り替え処理
1981		$('.btn-area').click(function(e) {
1982
1983			var val = $(this).attr('id');
1984
1985			$.ajax({
1986				url: "https://webukatu.com/ajax/changeMap.json",
1987				type: "post",
1988				data: "area=" + val,
1989			}).done(function(json) {
1990
1991				console.log('Ajax成功');
1992				$('#area-map').fadeOut();
1993				$('#area-map').html(json['map']).hide();
1994				$('#area-map').fadeIn();
1995
1996			}).fail(function(jqXHR, textStatus) {
1997				console.log('Ajax失敗:'.textStatus);
1998			});
1999		});
2000
2001
2002		//数字のフォームをフォーカスアウト時に自動半角変換
2003		$('.numeric').change(function() {
2004			var txt = $(this).val();
2005			var han = txt.replace(/[A-Za-z0-9]/g, function(s) {
2006				return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)
2007			});
2008			$(this).val(han);
2009		});
2010
2011		//モーダルウィンドウ
2012		$('#myModal').modal('hide');
2013		$('#search-area-modal1').modal('hide');
2014		$('#search-area-modal2').modal('hide');
2015		$('#search-area-modal3').modal('hide');
2016		$('#search-area-modal4').modal('hide');
2017
2018		//アコーディオンパネル
2019		$('.collapse').collapse();
2020
2021		//textareaカウント
2022		$('#comment').bind('keyup', function() {
2023			var thisValueLength = $(this).val().length;
2024			$('.count').html(thisValueLength);
2025		});
2026		$('#comment1').bind('keyup', function() {
2027			var thisValueLength = $(this).val().length;
2028			$('.count1').html(thisValueLength);
2029		});
2030		$('#comment2').bind('keyup', function() {
2031			var thisValueLength = $(this).val().length;
2032			$('.count2').html(thisValueLength);
2033		});
2034		$('#comment3').bind('keyup', function() {
2035			var thisValueLength = $(this).val().length;
2036			$('.count3').html(thisValueLength);
2037		});
2038		$('#comment4').bind('keyup', function() {
2039			var thisValueLength = $(this).val().length;
2040			$('.count4').html(thisValueLength);
2041		});
2042		$('#comment5').bind('keyup', function() {
2043			var thisValueLength = $(this).val().length;
2044			$('.count5').html(thisValueLength);
2045		});
2046
2047		//ツールチップ
2048		$('[data-toggle="tooltip"]').tooltip();
2049
2050		//タブメニュー表示
2051		$('#mypage_tab a').click(function(e) {
2052			e.preventDefault()
2053			$(this).tab('show')
2054		});
2055		$('#top_tab a').click(function(e) {
2056			e.preventDefault()
2057			$(this).tab('show')
2058		});
2059
2060
2061		//icheck読込み
2062		$("input").iCheck({
2063			checkboxClass: "icheckbox_flat-red", //使用するテーマのスキンを指定する
2064			radioClass: "iradio_flat-red", //使用するテーマのスキンを指定する
2065			increaseArea: '20%'
2066		});
2067
2068		//スマホ用スライドメニュー
2069		$("#menu-toggle").click(function() {
2070			$("#top-menu").slideToggle();
2071		});
2072
2073
2074		//画像スライダー
2075		$('.flexslider').flexslider({
2076			animation: "slide",
2077			controlNav: "thumbnails"
2078		});
2079		$('.flexslider2').flexslider({
2080			animation: "slide",
2081		});
2082		$('.flexslider-custom1').flexslider({
2083			animation: "slide",
2084			controlNav: true
2085		});
2086
2087		//画像自動リサイズ
2088		$(".img-liquid").imgLiquid();
2089
2090		//スクロール表示
2091		$('.scrollFade').scrollFade();
2092
2093		//ページトップへ戻る
2094		var topBtn = $('#pageTop');
2095		topBtn.hide();
2096		$(window).scroll(function() {
2097			if ($(this).scrollTop() > 100) {
2098				topBtn.fadeIn();
2099			} else {
2100				topBtn.fadeOut();
2101			}
2102		});
2103		topBtn.click(function() {
2104			$('body,html').animate({
2105				scrollTop: 0
2106			}, 1000);
2107			return false;
2108		});
2109
2110		//ヘッダーを上スクロールで非表示に
2111		var startPos = 0,
2112			winScrollTop = 0;
2113		$(window).on('scroll', function() {
2114			winScrollTop = $(this).scrollTop();
2115			heroHeight = $('#hero').height();
2116			if (winScrollTop > heroHeight) {
2117				$('.c-header').addClass('c-header-bg');
2118			} else {
2119				$('.c-header').removeClass('c-header-bg');
2120			}
2121
2122			if (winScrollTop >= startPos) {
2123				$('.c-header').addClass('move');
2124				$('.c-cv-sp').removeClass('move');
2125			} else {
2126				$('.c-header').removeClass('move');
2127				$('.c-cv-sp').addClass('move');
2128			}
2129			startPos = winScrollTop;
2130		});
2131
2132
2133		//メッセージエリア表示
2134		$("#msg-area p").change(function() {
2135			$('#msg-area').fadeIn(1000).delay(3000).fadeOut(2000);
2136		});
2137		var msg = $('#msg-area p').text();
2138		if (msg != '') $('#msg-area').fadeIn(1000).delay(3000).fadeOut(2000);
2139
2140
2141		// #で始まるアンカーをクリックした場合スムーズにスクロールさせる処理
2142		/*
2143		$('a[href^=#]').click(function() {
2144		   // スクロールの速度
2145		   var speed = 1000; // ミリ秒
2146		   // アンカーの値取得
2147		   var href= $(this).attr("href");
2148		   // 移動先を取得
2149		   var target = $(href == "#" || href == "" ? 'html' : href);
2150		   // 移動先を数値で取得
2151		   var position = target.offset().top;
2152		   // スムーススクロール
2153		   $('body,html').animate({scrollTop:position}, speed, 'swing');
2154		   return false;
2155		});
2156		*/
2157
2158		$(".iradio_flat-red .iCheck-helper").click(function() {
2159			var ctg3 = $('input[name="category3_id_radio_required"]:checked').val();
2160
2161			if (ctg3 == 1) {
2162				$('input[name="zip_required"]').val('').attr("disabled", true);
2163				$('select#pref').val('').attr("disabled", true);
2164				$('input[name="addr_required"]').val('').attr("disabled", true);
2165			}
2166			if (ctg3 == 2 || ctg3 == 4) {
2167				$('input[name="zip_required"]').val('').attr("disabled", true);
2168				$('select#pref').val('').attr("disabled", true);
2169				$('input[name="addr_required"]').attr("disabled", false);
2170			}
2171			if (ctg3 == 3) {
2172				$('input[name="zip_required"]').attr("disabled", false);
2173				$('select#pref').attr("disabled", false);
2174				$('input[name="addr_required"]').attr("disabled", false);
2175			}
2176
2177		});
2178		$("label.category3_id").click(function() {
2179			var ctg3 = $('input[name="category3_id_radio_required"]:checked').val();
2180
2181			if (ctg3 == 1) {
2182				$('input[name="zip_required"]').val('').attr("disabled", true);
2183				$('select#pref').val('').attr("disabled", true);
2184				$('input[name="addr_required"]').val('').attr("disabled", true);
2185			}
2186			if (ctg3 == 2 || ctg3 == 4) {
2187				$('input[name="zip_required"]').val('').attr("disabled", true);
2188				$('select#pref').val('').attr("disabled", true);
2189				$('input[name="addr_required"]').attr("disabled", false);
2190			}
2191			if (ctg3 == 3) {
2192				$('input[name="zip_required"]').attr("disabled", false);
2193				$('select#pref').attr("disabled", false);
2194				$('input[name="addr_required"]').attr("disabled", false);
2195			}
2196		});
2197
2198		var ctg3 = $('input[name="category3_id_radio_required"]:checked').val();
2199		if (ctg3 == 1) {
2200			$('input[name="zip_required"]').val('').attr("disabled", true);
2201			$('select#pref').val('').attr("disabled", true);
2202			$('input[name="addr_required"]').val('').attr("disabled", true);
2203		}
2204		if (ctg3 == 2 || ctg3 == 4) {
2205			$('input[name="zip_required"]').val('').attr("disabled", true);
2206			$('select#pref').val('').attr("disabled", true);
2207			$('input[name="addr_required"]').attr("disabled", false);
2208		}
2209		if (ctg3 == 3) {
2210			$('input[name="zip_required"]').attr("disabled", false);
2211			$('select#pref').attr("disabled", false);
2212			$('input[name="addr_required"]').attr("disabled", false);
2213		}
2214
2215		//住所自動入力
2216		/*
2217		        $('#zip').jpostal({
2218		               postcode : [
2219		                  '#zip'
2220		               ],
2221		               address : {
2222		                  '#pref'  : '%3',
2223		                  '#addr'  : '%4%5'
2224		               }
2225		        });
2226
2227		*/
2228		$("#loading").fadeOut();
2229
2230
2231		//var $jsAnimatePalalax = $(".top-baner .title");
2232		var $jsAnimateFadeInNone = $('.js-animate-fadeIn-none');
2233		var $jsAnimateFadeInTop = $('.js-animate-fadeIn-top');
2234		var $jsAnimateFadeInRight = $('.js-animate-fadeIn-right');
2235		var $jsAnimateFadeInLeft = $('.js-animate-fadeIn-left');
2236		var $jsAnimateHover = $('.js-animate-hover');
2237
2238		// マウスオーバーアニメーション
2239		$jsAnimateHover.animateHover({
2240			rotateZ: '5deg',
2241			scale: 1.2
2242		});
2243
2244		// アニメーション
2245		$jsAnimateFadeInNone.animateFadeIn({
2246			duration: 1000,
2247		});
2248		$jsAnimateFadeInRight.animateFadeIn({
2249			direction: 'R',
2250			duration: 800,
2251		});
2252		$jsAnimateFadeInLeft.animateFadeIn({
2253			direction: 'L',
2254			duration: 800,
2255		});
2256		$jsAnimateFadeInTop.animateFadeIn({
2257			direction: 'T',
2258			duration: 800,
2259		});
2260		/*
2261		        $jsAnimatePalalax.animatePalalax({
2262		          direction: 'B'
2263		        });
2264		*/
2265
2266		$('.js-qa-q').on('click', function(e) {
2267			$(this).siblings('.js-qa-a').css("min-height", 0).slideToggle('slow', function() {
2268				$(this).css("min-height", "120px");
2269			});
2270			$(this).toggleClass('open');
2271		});
2272		//アコーディオンパネル
2273		var $acordionAction = $('.js-acordion-action');
2274		$acordionAction.on('click', function(e) {
2275			$(this).siblings('.js-acordion-target').slideToggle();
2276		});
2277		//アコーディオンパネル(質問一覧)
2278		var $questionAction = $('.js-question-action');
2279		$questionAction.on('click', function(e) {
2280			//クリックでコンテンツを開閉
2281			$(this).siblings('.js-question-target').slideToggle();
2282			//要素内のテキストを変更
2283			$(this).find('.js-question-text').toggle();
2284			//コメントを表示横の矢印の向きを変更
2285			$(this).find('.comment-open').toggleClass('open');
2286		});
2287		//アコーディオンパネル(返信フォーム)
2288		var $formOpen = $('.js-reply-form-open');
2289		$formOpen.on('click', function(e) {
2290			//返信するボタンクリックでフォームを開閉
2291			$(this).siblings('.js-reply-form-target').slideToggle();
2292			//親要素への伝播防止(フォーム開閉時に、コメント一覧が閉じてしまわないようにする)
2293			event.stopPropagation();
2294		});
2295		var $formClose = $('.js-reply-form-close');
2296		$formClose.on('click', function(e) {
2297			//キャンセルボタンクリックでフォームを閉じる
2298			$(this).parent().parent().parent('.js-reply-form-target').slideUp();
2299			//親要素への伝播防止(フォーム開閉時に、コメント一覧が閉じてしまわないようにする)
2300			event.stopPropagation();
2301		});
2302		//テキストエリアカウント
2303		var $txtCountAction = $('.js-count-action');
2304		$txtCountAction.on('keyup', function(e) {
2305			var txtCount = $(this).val().length;
2306			var $txtCountTarget = $(this).siblings('.js-count-target').children('.js-set-target');
2307			$txtCountTarget.html(txtCount);
2308			if (txtCount > 500) {
2309				$txtCountTarget.css('color', 'red');
2310			}
2311		});
2312
2313		//ホバーによる動画再生
2314		$('.js-video-btn').hover(function() {
2315			$(this).siblings('.js-video')[0].play();
2316		}, function() {
2317			$(this).siblings('.js-video')[0].pause();
2318		});
2319
2320		//ムービーを見るエリア
2321		$('#js-click-contents-show-action').on('click', function(e) {
2322			var $this = $(this);
2323			$this.parent('#js-click-contents-show-target').slideToggle();
2324			dlog($this.data('c1id'));
2325			dlog($this.data('c2id'));
2326			$.ajax({
2327				url: "https://webukatu.com/ajax/histLearning_add.json",
2328				type: "post",
2329				data: "c1id=" + $this.data('c1id') + "&c2id=" + $this.data('c2id'),
2330			}).done(function(json) {
2331
2332				dlog($this.data('Ajax成功'));
2333				if (json['err_flg']) { //エラーフラグが1なら
2334					dlog($this.data('登録エラー'))
2335				} else {
2336					dlog($this.data('登録成功'))
2337				}
2338
2339			}).fail(function(jqXHR, textStatus) {
2340				dlog($this.data('Ajax失敗'.textStatus));
2341			});
2342
2343		});
2344
2345		//仮入部未視聴アンケート理由の詳細用
2346		$('.js-trial-reason-check').on('click', function() {
2347
2348			var $detail = $('.js-trial-reason-detail');
2349			var reason = parseInt($(this).find('input[name="nowatchreason_radio_required"]:radio').val());
2350
2351			if (reason === 1) {
2352				$detail.find('strong').text("どの様な内容をご希望でしたか?");
2353			} else if (reason === 2 || reason === 3) {
2354				$detail.find('strong').text("改善のために詳しい内容を教えて下さい。");
2355			} else if (reason === 4) {
2356				$detail.find('strong').text("差し支えなければ詳しい理由をお聞かせ下さい");
2357			} else if (reason === 5) {
2358				$detail.find('strong').text("どのサービスと比較されましたか?");
2359			} else {
2360				$detail.find('strong').text("詳しい理由をお聞かせ下さい");
2361			}
2362			$detail.fadeIn();
2363		});
2364
2365		//input部分が上記では動作しないので別に作成
2366		$('.js-trial-reason-check').find('.iCheck-helper').on('click', function() {
2367
2368			var $detail = $('.js-trial-reason-detail');
2369			var reason = parseInt($(this).prev('input[name="nowatchreason_radio_required"]:radio').val());
2370
2371			if (reason === 1) {
2372				$detail.find('strong').text("どの様な内容をご希望でしたか?");
2373			} else if (reason === 2 || reason === 3) {
2374				$detail.find('strong').text("改善のために詳しい内容を教えて下さい。");
2375			} else if (reason === 4) {
2376				$detail.find('strong').text("差し支えなければ詳しい理由をお聞かせ下さい");
2377			} else if (reason === 5) {
2378				$detail.find('strong').text("どのサービスと比較されましたか?");
2379			} else {
2380				$detail.find('strong').text("詳しい理由をお聞かせ下さい");
2381			}
2382			$detail.fadeIn();
2383
2384		});
2385
2386		//退会フォーム理由の詳細用
2387		$('.js-reason-check').on('click', function() {
2388
2389			var $detail = $('.js-reason-detail');
2390			var $other = $('.js-reason-other');
2391			var reason = parseInt($(this).find('input[name="reason_radio_required"]:radio').val());
2392			var $placeholder = $('.js-reason-textarea')
2393
2394			if (reason === 1 || reason === 2) {
2395				$detail.find('strong').text("差し支えなければ詳しい理由をお聞かせ下さい");
2396				$other.css('display', 'none')
2397				$placeholder.attr('placeholder', '');
2398			} else if (reason === 3) {
2399				$detail.find('strong').text("モチベーションが低下したのはなぜですか?");
2400				$other.css('display', 'block')
2401				$placeholder.attr('placeholder', '');
2402			} else if (reason === 4) {
2403				$detail.find('strong').text("簡単な業務内容と年収、就職活動内容を教えて下さい");
2404				$other.css('display', 'block')
2405				$placeholder.attr('placeholder', '例)○○株式会社(年収400万)と××制作会社(年収350万)から2020年5月に内定を頂きました。エージェントは使用せずwantedlyとgreenを利用しました。最終的に○○株式会社に就職し、現在はReactを用いたフロントエンド業務に従事しています。');
2406			} else if (reason === 5) {
2407				$detail.find('strong').text("簡単な業務内容と年収、就職活動内容を教えて下さい");
2408				$other.css('display', 'block')
2409				$placeholder.attr('placeholder', '例)○○株式会社(年収400万)と××有限会社(年収350万)から2020年5月に内定を頂きました。dodaとwantedlyを利用しました。最終的に○○株式会社に就職し、現在はマーケティング業務に携わっています。');
2410			} else if (reason === 6) {
2411				$detail.find('strong').text("やりたい事とはどんなものですか?");
2412				$other.css('display', 'block')
2413				$placeholder.attr('placeholder', '');
2414			} else if (reason === 7) {
2415				$detail.find('strong').text("どんな目標を達成されましたか?");
2416				$other.css('display', 'block')
2417				$placeholder.attr('placeholder', '');
2418			} else if (reason === 8) {
2419				$detail.find('strong').text("あなたに合わなかった部分を教えて下さい");
2420				$other.css('display', 'block')
2421				$placeholder.attr('placeholder', '');
2422			} else if (reason === 9) {
2423				$detail.find('strong').text("どのスクール・サービスをご利用予定ですか?");
2424				$other.css('display', 'block')
2425				$placeholder.attr('placeholder', '');
2426			} else {
2427				$detail.find('strong').text("詳しい理由をお聞かせ下さい");
2428				$other.css('display', 'none')
2429				$placeholder.attr('placeholder', '');
2430			}
2431			$detail.fadeIn();
2432		});
2433
2434		//input部分が上記では動作しないので別に作成
2435		$('.js-reason-check').find('.iCheck-helper').on('click', function() {
2436
2437			var $detail = $('.js-reason-detail');
2438			var $other = $('.js-reason-other');
2439			var reason = parseInt($(this).prev('input[name="reason_radio_required"]:radio').val());
2440			var $placeholder = $('.js-reason-textarea')
2441
2442			if (reason === 1 || reason === 2) {
2443				$detail.find('strong').text("差し支えなければ詳しい理由をお聞かせ下さい");
2444				$other.css('display', 'none')
2445				$placeholder.attr('placeholder', '');
2446			} else if (reason === 3) {
2447				$detail.find('strong').text("モチベーションが低下したのはなぜですか?");
2448				$other.css('display', 'block')
2449				$placeholder.attr('placeholder', '');
2450			} else if (reason === 4) {
2451				$detail.find('strong').text("簡単な業務内容と年収、就職活動内容を教えて下さい");
2452				$other.css('display', 'block')
2453				$placeholder.attr('placeholder', '例)○○株式会社(年収400万)と××制作会社(年収350万)から2020年5月に内定を頂きました。エージェントは使用せずwantedlyとgreenを利用しました。最終的に○○株式会社に就職し、現在はReactを用いたフロントエンド業務に従事しています。');
2454			} else if (reason === 5) {
2455				$detail.find('strong').text("簡単な業務内容と年収、就職活動内容を教えて下さい");
2456				$other.css('display', 'block')
2457				$placeholder.attr('placeholder', '例)○○株式会社(年収400万)と××有限会社(年収350万)から2020年5月に内定を頂きました。dodaとwantedlyを利用しました。最終的に○○株式会社に就職し、現在はマーケティング業務に携わっています。');
2458			} else if (reason === 6) {
2459				$detail.find('strong').text("やりたい事とはどんなものですか?");
2460				$other.css('display', 'block')
2461				$placeholder.attr('placeholder', '');
2462			} else if (reason === 7) {
2463				$detail.find('strong').text("どんな目標を達成されましたか?");
2464				$other.css('display', 'block')
2465				$placeholder.attr('placeholder', '');
2466			} else if (reason === 8) {
2467				$detail.find('strong').text("あなたに合わなかった部分を教えて下さい");
2468				$other.css('display', 'block')
2469				$placeholder.attr('placeholder', '');
2470			} else if (reason === 9) {
2471				$detail.find('strong').text("どのスクール・サービスをご利用予定ですか?");
2472				$other.css('display', 'block')
2473				$placeholder.attr('placeholder', '');
2474			} else {
2475				$detail.find('strong').text("詳しい理由をお聞かせ下さい");
2476				$other.css('display', 'none')
2477				$placeholder.attr('placeholder', '');
2478			}
2479			$detail.fadeIn();
2480		});
2481
2482		//退会フォーム満足度の詳細用
2483		$('.js-satisfied-check').on('click', function() {
2484			var unsatisfied = $(this).find('input[name="unsatisfied_radio_required"]:radio').val();
2485			//満足出来なかった場合にはその理由を聞くフォームを表示する
2486			if (unsatisfied === 'unsatisfied') {
2487				$('.js-unsatisfied-reason-textarea').prop('required', true);
2488				$('.js-unsatisfied-reason').fadeIn();
2489			} else {
2490				$('.js-unsatisfied-reason-textarea').prop('required', false);
2491				$('.js-unsatisfied-reason').fadeOut('normal');
2492			}
2493		});
2494
2495		//input部分が上記では動作しないので別に作成
2496		$('.js-satisfied-check').find('.iCheck-helper').on('click', function() {
2497			var unsatisfied = $(this).prev('input[name="unsatisfied_radio_required"]:radio').val();
2498			//満足出来なかった場合にはその理由を聞くフォームを表示する
2499			if (unsatisfied === 'unsatisfied') {
2500				$('.js-unsatisfied-reason').fadeIn();
2501			} else {
2502				$('.js-unsatisfied-reason').fadeOut('normal');
2503			}
2504		});
2505
2506		////////////////卒業生アンケートここから////////////////
2507		//卒業生アンケート詳細用
2508		//入部前経験
2509		$('.js-grad-experience-check').on('click', function() {
2510			var value = $(this).find('input[name="experience_flg_radio_required"]:radio').val();
2511			//はいの場合にはその理由を聞くフォームを表示する
2512			if (value === 'true') {
2513				$('.js-experience-detail-textarea').prop('required', true);
2514				$('.js-grad-experience-detail').fadeIn();
2515			} else {
2516				$('.js-experience-detail-textarea').prop('required', false);
2517				$('.js-grad-experience-detail').fadeOut('normal');
2518			}
2519		});
2520
2521		//他のスクール利用
2522		$('.js-grad-others-check').on('click', function() {
2523			var value = $(this).find('input[name="others_flg_radio_required"]:radio').val();
2524			//はいの場合には違いの有無を聞くフォームを表示する
2525			if (value === 'true') {
2526				$('.js-grad-difference-input').prop('required', true);
2527				$('.js-grad-difference').fadeIn();
2528			} else {
2529				$('.js-grad-difference-input').prop('required', false);
2530				$('.js-difference-detail-textarea').prop('required', false);
2531				$('.js-grad-difference').fadeOut('normal');
2532				$('.js-grad-difference-detail').fadeOut('normal');
2533			}
2534		});
2535
2536		//他のスクールとの違い
2537		$('.js-grad-difference-check').on('click', function() {
2538			var value = $(this).find('input[name="difference_flg_radio"]:radio').val();
2539			//はいの場合にはその理由を聞くフォームを表示する
2540			if (value === 'true') {
2541				$('.js-difference-detail-textarea').prop('required', true);
2542				$('.js-grad-difference-detail').fadeIn();
2543			} else {
2544				$('.js-difference-detail-textarea').prop('required', false);
2545				$('.js-grad-difference-detail').fadeOut('normal');
2546			}
2547		});
2548
2549		//卒業試験を受けて良かったか
2550		$('.js-grad-exam-check').on('click', function() {
2551			var value = $(this).find('input[name="exam_impression_flg_radio_required"]:radio').val();
2552			console.log(value);
2553			//はいの場合には勧めるか有無を聞くフォームを表示する
2554			if (value === 'true') {
2555				$('.js-grad-exam-input').prop('required', true);
2556				$('.js-grad-exam').fadeIn();
2557			} else {
2558				$('.js-grad-exam-input').prop('required', false);
2559				$('.js-grad-exam').fadeOut('normal');
2560			}
2561		});
2562
2563		//転職の有無
2564		$('.js-grad-job-change-check').on('click', function() {
2565			var value = $(this).find('input[name="job_change_flg_radio_required"]:radio').val();
2566			//はいの場合には役に立った有無を聞くフォームを表示する
2567			//転職の詳細を聞くフォームも追加
2568			if (value === 'true') {
2569				$('.js-grad-useful-input').prop('required', true);
2570				$('.js-grad-useful').fadeIn();
2571				$('.js-job-detail-textarea').prop('required', true);
2572				$('.js-job-detail').fadeIn();
2573			} else {
2574				$('.js-grad-useful-input').prop('required', false);
2575				$('.js-useful-textarea').prop('required', false);
2576				$('.js-grad-useful').fadeOut('normal');
2577				$('.js-grad-useful-detail').fadeOut('normal');
2578				$('.js-job-detail-textarea').prop('required', false);
2579				$('.js-job-detail').fadeOut('normal');
2580			}
2581		});
2582
2583		//役に立ったかどうか
2584		$('.js-grad-useful-check').on('click', function() {
2585			var value = $(this).find('input[name="useful_flg_radio"]:radio').val();
2586			//はいの場合にはその理由を聞くフォームを表示する
2587			if (value === 'true') {
2588				$('.js-useful-detail-textarea').prop('required', true);
2589				$('.js-grad-useful-detail').fadeIn();
2590			} else {
2591				$('.js-useful-detail-textarea').prop('required', false);
2592				$('.js-grad-useful-detail').fadeOut('normal');
2593			}
2594		});
2595
2596		//input部分が上記では動作しないので別に作成
2597		//入部前経験
2598		$('.js-grad-experience-check').find('.iCheck-helper').on('click', function() {
2599			var value = $(this).prev('input[name="experience_flg_radio_required"]:radio').val();
2600			//はいの場合にはその理由を聞くフォームを表示する
2601			if (value === 'true') {
2602				$('.js-experience-detail-textarea').prop('required', true);
2603				$('.js-grad-experience-detail').fadeIn();
2604			} else {
2605				$('.js-experience-detail-textarea').prop('required', false);
2606				$('.js-grad-experience-detail').fadeOut('normal');
2607			}
2608		});
2609
2610		//他のスクール利用
2611		$('.js-grad-others-check').find('.iCheck-helper').on('click', function() {
2612			var value = $(this).prev('input[name="others_flg_radio_required"]:radio').val();
2613			//はいの場合には違いの有無を聞くフォームを表示する
2614			if (value === 'true') {
2615				$('.js-grad-difference-input').prop('required', true);
2616				$('.js-grad-difference').fadeIn();
2617			} else {
2618				$('.js-grad-difference-input').prop('required', false);
2619				$('.js-difference-detail-textarea').prop('required', false);
2620				$('.js-grad-difference').fadeOut('normal');
2621				$('.js-grad-difference-detail').fadeOut('normal');
2622			}
2623		});
2624
2625		//他のスクールとの違い
2626		$('.js-grad-difference-check').find('.iCheck-helper').on('click', function() {
2627			var value = $(this).prev('input[name="difference_flg_radio"]:radio').val();
2628			//はいの場合にはその理由を聞くフォームを表示する
2629			if (value === 'true') {
2630				$('.js-difference-detail-textarea').prop('required', true);
2631				$('.js-grad-difference-detail').fadeIn();
2632			} else {
2633				$('.js-difference-detail-textarea').prop('required', false);
2634				$('.js-grad-difference-detail').fadeOut('normal');
2635			}
2636		});
2637
2638		//卒業試験を受けて良かったか
2639		$('.js-grad-exam-check').find('.iCheck-helper').on('click', function() {
2640			var value = $(this).prev('input[name="exam_impression_flg_radio_required"]:radio').val();
2641			//はいの場合には勧めるか有無を聞くフォームを表示する
2642			if (value === 'true') {
2643				$('.js-grad-exam-input').prop('required', true);
2644				$('.js-grad-exam').fadeIn();
2645			} else {
2646				$('.js-grad-exam-input').prop('required', false);
2647				$('.js-grad-exam').fadeOut('normal');
2648			}
2649		});
2650
2651		//転職の有無
2652		$('.js-grad-job-change-check').find('.iCheck-helper').on('click', function() {
2653			var value = $(this).prev('input[name="job_change_flg_radio_required"]:radio').val();
2654			//はいの場合には役に立った有無を聞くフォームを表示する
2655			//転職の詳細を聞くフォームも追加
2656			if (value === 'true') {
2657				$('.js-grad-useful-input').prop('required', true);
2658				$('.js-grad-useful').fadeIn();
2659				$('.js-job-detail-textarea').prop('required', true);
2660				$('.js-job-detail').fadeIn();
2661			} else {
2662				$('.js-grad-useful-input').prop('required', false);
2663				$('.js-useful-textarea').prop('required', false);
2664				$('.js-grad-useful').fadeOut('normal');
2665				$('.js-grad-useful-detail').fadeOut('normal');
2666				$('.js-job-detail-textarea').prop('required', false);
2667				$('.js-job-detail').fadeOut('normal');
2668			}
2669		});
2670
2671		//役に立ったかどうか
2672		$('.js-grad-useful-check').find('.iCheck-helper').on('click', function() {
2673			var value = $(this).prev('input[name="useful_flg_radio"]:radio').val();
2674			//はいの場合にはその理由を聞くフォームを表示する
2675			if (value === 'true') {
2676				$('.js-useful-detail-textarea').prop('required', true);
2677				$('.js-grad-useful-detail').fadeIn();
2678			} else {
2679				$('.js-useful-detail-textarea').prop('required', false);
2680				$('.js-grad-useful-detail').fadeOut('normal');
2681			}
2682		});
2683
2684		//5段階評価
2685		$('.js-grad-star-item').on('click', function() {
2686			var index = $(this).index();
2687			var target = index + 1;
2688			console.log(target);
2689			$('.js-grad-star li:lt(' + target + ')').addClass('active');
2690			$('.js-grad-star li:gt(' + index + ')').removeClass('active');
2691			$('.js-grad-star-form').val(target);
2692
2693
2694		});
2695		////////////////卒業生アンケートここまで////////////////
2696
2697		////////////////リニューアルしたトップページ関連////////////////
2698		// ログイン/アカウント作成フォームのタブの切り替え
2699
2700		//ハンバーガーメニューのクリック
2701		// SPメニュー
2702		$('.js-toggle-sp-menu').on('click', function() {
2703			$(this).toggleClass('active');
2704			$('html').toggleClass('is-fixed');
2705			$('body').toggleClass('is-fixed');
2706			$('.js-toggle-sp-menu-target').toggleClass('active');
2707		});
2708		$('.js-toggle-sp-menu-list').children('li').children('a').on('click', function() {
2709			$(this).toggleClass('active');
2710			$('html').toggleClass('is-fixed');
2711			$('body').toggleClass('is-fixed');
2712			$('.js-toggle-sp-menu-target').toggleClass('active');
2713		});
2714	});
2715	//ローディング
2716	$(window).on('load', function() {
2717		$("#loading").fadeOut();
2718	});
2719
2720</script>
2720
2721<!-- Twitter universal website tag code -->
2722<script>
2723!function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments);
2724},s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js',
2725a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script');
2726// Insert Twitter Pixel ID and Standard Event data below
2727twq('init','o2awi');
2728twq('track','PageView');
2729</script>
2729
2730<!-- End Twitter universal website tag code -->
2731
2732</body>
2733
2734</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.