第七回講義　教材WEBページ

まずは、以下のエディターにあるコードとレヴュー画面を見てください。
この内容はHTML,CSS,JavaScriptから成り立っています。
そして、ボタンをクリックした際に行われる動作はにclassやidの属性が関わっています。

See the Pen
base by ちょもらんまWEBプログラミング塾｜石川県小松市 (@qomolangma_juku)
on CodePen.

CSS

エディター内のCSSタブを開くと、CSSコードが記述されています。
クラスを指定すると呼び出されるCSSです。
例えば

<div id="item-1" class="item"></div>

であれば、classに『item』があるので、対応する以下のスタイルが呼び出されます。

.item{background:#06FF12; height:50px; width:50px; margin: 10px; position: relative; left: 0; top: 0;}

では、『ボタン1』をクリックしてみましょう。
これを押すことにより、class『action-1』が先程のdivに追加され、以下のコードの状態になります。

<div id="item-1" class="item action-1"></div>

追加されたclassに対応するスタイルは以下です。

.action-1{left: 150px;}

これは、左から150pxの場所にポジションをとるという意味のスタイルなので、ボタンを押した瞬間に移動します。
もう一度ボタンを押すと、追加されたclass『action-1』が削除されるので、元の場所に戻ります。

このように、さまざまなスタイルを事前に用意しておくことにより、classを追加するだけでブロック要素を変化されることができます。

CSSアニメーション

次は二番目のブロックを見てみます。

<div id="item-2" class="item item-big anime"></div>

先程と違うのはclass名が二つ多いという事です。
対象スタイルは以下

.anime{transition: all 500ms 0s ease;}
.item-big{width: 125px; height: 125px;}

『item-big』により、ブロックのサイズが大きくなり、『anime』により、スタイルの変化時にアニメがつくようになります。

『ボタン2』をクリックしてみます。
これを押すことにより、class『action-2』が先程のdivに追加され、以下のコードの状態になります。

<div id="item-2" class="item item-big action-2 anime"></div>

追加されたclassに対応するスタイルは以下です。

.action-2{background:#daadcf; border-radius: 50%;}

これは、ブロックの背景色と角の丸さを変化するスタイルになります。
もう一度ボタンを押すと、追加されたclass『action-2』が削除されるので、元の状態に戻ります。
このゆっくりとした変化をCSSアニメーションと呼びます。
ちなみに、『anime』をclassから削除すると、一瞬で変化し、中間のアニメはなくなります。

CSSアニメーションの簡単な部分だけを説明しましたが、この知識を広げると、複雑なアニメーションを作ることもできるので、興味があれば以下の記事を読んでみてください。
CSSアニメーション 入門 – Qiita
使える！CSSアニメーション 20選 | SONICMOOV LAB

JavaScript

エディター内のJSタブを開くと、JavaScriptコードが記述されています。
これらは、ボタンをクリックした際に各ブロックに対してclassを追加する処理になっています。
例えば

document.getElementById('btn-3').onclick = function() {
    let element = document.getElementById('item-3');
    element.classList.toggle( "action-3" ) ;
};

であれば、id『btn-3』をクリックしたら、id『item-3』に対してclass『action-3』を追加します。
追加されたブロックは、『action-3』のスタイルを加えられ、アニメーションします。

では、このアクションを3つのブロックに対して行いたい場合はどうするでしょうか？
id『item-3』はこのページに1つしか使えないので、他の付与するわけにはいきません。
そこで、同じものをどこでも付与できるclassを使います。
各ブロックで共通して持っている『item』に対して、『action-3』を追加します。

document.getElementById('btn-4').onclick = function() {
    var array = document.getElementsByClassName('item');
    for( var i=0; i<array.length; i++) {
      var element = array[i];
      element.classList.toggle( "action-3" ) ;
    }   
};

id『btn-4』をクリックしたら、class『item』に対してclass『action-3』を追加します。
追加されたブロックは、『action-3』のスタイルを加えられ、アニメーションします。

では、アニメーションのきっかけになるボタンを複数設置したい場合はどうするべきでしょう？
id『btn-4』はこのページに1つしか使えないので、同じボタンがほかの場所に設置できません。

そこで、class『btn-action』を用意し、これをクリックしたきっかけで動作するよう、JavaScriptを記述します。

const targets = document.getElementsByClassName('btn-action');
for(let i = 0; i < targets.length; i++){
  
  targets[i].addEventListener('click', () => {
	var array = document.getElementsByClassName('item');
	for( var i=0; i<array.length; i++) {
	  var element = array[i];
	  element.classList.toggle( "action-3" ) ;
	}	  
  }, false);
}

class『btn-action』をクリックしたら、class『item』に対してclass『action-3』を追加します。
追加されたブロックは、『action-3』のスタイルを加えられ、アニメーションします。

というように、目的に応じてidとclassを使い分ける必要があります。
こうしてみるとidは1ページには1つしか使えない分、使う意味が見いだせないという気持ちはありますが、属性にはそれに応じた特徴がありますので、それを理解したうえで使い分けましょう。

ちなみに、要素にidを付与するのは大きい枠の目印として使う場合が多いです。

• id属性とclass属性にはそれぞれ特徴がある
• cssだけでアニメーションを表示することができる
• 自分が表現したいデザインや動作に応じてidとclassを使い分ける

今回の講義では、idやclassの上手な使い方を学びました。
私の経験上、この二つの使い方が失敗するだけで、WEBサイトの記述は倍に膨らみます。
それは、同時に作業時間も膨らむという事を意味します。

単純なようでとても複雑なものなので、事前に頭の中で組み立てるというのも良いでしょう。
これらの使い方が上手な人は、整理整頓の知識と技術があり、プログラミング適性が高いと私は考えます。
さらに言えば、プログラミングを身に着けるという事は、整理整頓ができるようになる事だと思います。

論理的思考を磨くには、まず自分に関わるものに対し、整理整頓をする癖をつける事がプログラミング上達の近道なのかもしれません。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール

STEP UP!!

はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール

さらにSTEP UP!!

PHP入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]
PHP入門 (全30回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。