スライドによる学習

スライドを見て知識を習得します。
図を用いた説明により、直感的理解をすることができます。
自分のスピードで学習ができ、必要な時にいつでも見返すことが出来ます。

オンラインエディタでの演習

スライドで得た知識をオンラインエディタでの演習によって身につけます。
プログラミングはコードを書くことによってはじめて上達します。
インストラクションに従ってコーディングしていきましょう。

プレビューで結果を確認

エディタに書いたコードの結果をすぐに確認することができます。
これにより自分の書いたコードにより何が起きたのかを理解しながら
進めることが出来ます。

HTML

	<div class="steps">
	<!-- タブ部分 -->
      <ul id="step-list">
        <li class="step-list active">STEP1</li>
        <li class="step-list">STEP2</li>
        <li class="step-list">STEP3</li>
      </ul><!-- /#step-list -->
	  
	
      <div class="explain active"><!-- 始め表示 -->
        <div class="image-part">
          <img src="http://prog-8.com/images/top_slide_3.png">
        </div>
        <div class="explain-part">
          <h2>スライドによる学習</h2>
          スライドを見て知識を習得します。<br>
          図を用いた説明により、直感的理解をすることができます。<br>
          自分のスピードで学習ができ、必要な時にいつでも見返すことが出来ます。
        </div><!-- /.explain-part -->
      </div><!-- /.explain -->
	  
      <div class="explain"><!-- 始め非表示 -->
        <div class="image-part">
          <img src="http://prog-8.com/images/top_editor_2.png">
        </div>
        <div class="explain-part">
          <h2>オンラインエディタでの演習</h2>
          スライドで得た知識をオンラインエディタでの演習によって身につけます。<br>
          プログラミングはコードを書くことによってはじめて上達します。<br>
          インストラクションに従ってコーディングしていきましょう。
        </div>
      </div>
	  
      <div class="explain">
        <div class="image-part">
          <img src="http://prog-8.com/images/top_outcome_2.png">
        </div>
        <div class="explain-part">
          <h2>プレビューで結果を確認</h2>
          エディタに書いたコードの結果をすぐに確認することができます。<br>
          これにより自分の書いたコードにより何が起きたのかを理解しながら<br>
          進めることが出来ます。
        </div>
      </div><!-- /.explain -->
    </div><!-- /.steps -->

CSS

	.steps{
  padding: 50px;
  background-color: white;
  overflow: hidden;
}

.steps-heading{
  text-align: center;
  font-weight: 200;
  font-size: 40px;
  color: #204056;
  margin-bottom: 30px;
}

.explain{
  padding-top: 50px;
}

.steps ul{
  width: 350px;
  height: 50px;
  margin: auto;
  list-style:none;
}

.steps li{
  float: left;
  background-color: rgb(53, 170, 165);
  color: white;
  padding: 15px 30px;
  margin: 0 5px;
  cursor: pointer;
}

.steps li:hover{
  background-color: rgb(54, 177, 172);
}

.steps li.active{
  background-color: rgb(67, 216, 210);
  color: white;
}

.image-part{
  float: left;
  padding-left: 100px;
}

.image-part img{
  width: 500px;
  border: 1px solid gray;
}

.explain-part{
  float: left;
  margin-left: 60px;
  font-size: 1.2em;
}

.explain-part h2{
  margin: 50px 0;
}

.explain{
  display: none;
}

.explain.active{
  display: block;
  border: dotted 1px #000;
  overflow:hidden;
}

jQuery

			$('.step-list').click(function(){
			
			/* タブに<class = active>を外したり加えたり */
			var Index = $(this).index(); // クリックした.step-listが何番目か取得する（したものをIndexに代入）
			$('.step-list').removeClass('active'); // 一度全ての.step-listから.activeを外す
			$('.step-list').eq(Index).addClass('.active'); // .step-listのうちクリックされたものに.activeを加える

           /* 本文に<class = active>を外したり加えたり */
			$('.explain').removeClass('active'); // .explainから.activeを外す
			$('.explain').eq(Index).addClass('active'); // .explainのうちクリックされたものに.activeを加える			
		}); // End function

インデックスにもどる