CSS、JavaScriptから学ぶHTMLの属性とレスポンシブデザイン【初級第3回-2】
教材の準備
以下のページに簡単な手順を書き記しましたので、参考にしてください。
HTMLの属性と属性値とは
属性とは、その要素に対しての設定だと思ってください。
そして属性値とは、その設定の内容になります。
属性といってもかなり複数あるので、以下が簡単な例になります。
/*要素divに対してid属性（属性値=main）とclass属性（属性値=red）*/ <div id="main" class="red">メインエリア</div> /*要素aに対してhref属性（属性値=yahoo.jp）とtarget属性（属性値=_blank）*/ <a href="yahoo.jp" target="_blank">ヤフーへのリンク</a> /*要素imgに対してid属性（属性値=image.jpg）とalt属性（属性値=メイン画像）*/ <img src="image.jpg" alt="メイン画像">
例を見てわかるとおり、書き方に決まりがあります。
<要素名 属性="属性値">
- 要素名の後ろには半角スペース
- 属性の後ろには=
- 属性値は“属性値”で囲む
属性の種類に関しては、以下のページを参考にしましょう。
【HTML入門】HTMLの属性ってなに？属性の役割と書き方 | Qlio（キュリオ）
HTMLの要素！属性、属性値とは！？class名を複数設定するHTMLの書き方付 | ビバ★りずむ
id属性とclass属性の違い
共通の性質
- 主にCSSやJavaScriptに対して利用する
- 半角英数字とハイフン（-）、アンダーバー（_）が使用できる
- 先頭の文字に数字は使えない
id属性
最も留意すべきは1ページのHTMLコード中に同じid属性値は使えないということです。
慣れが必要ですが、大きい枠に対する目印として、id属性を付与することが主です。
class属性
こちらで留意すべきは半角スペースで区切る事で複数のclass名を指定可能ということです。
<p class="animal dog">柴犬</p>
CSSとJavaScriptから学ぶ属性の使い道
教材の編集
以下のコードを各ファイルに書き足してください。
lesson/assets/css/style.cssに以下を追加
@charset "utf-8";
.anime{transition: all 500ms 0s ease;}
.item{background:#06FF12; height:50px; width:50px; margin: 10px; position: relative; left: 0; top: 0;}
.item-big{width: 125px; height: 125px;}
.action-1{left: 150px;}
.action-2{background:#daadcf; border-radius: 50%;}
.action-3{width: 100px; height: 100px;}
lesson/assets/js/script.jsに以下を追加
document.getElementById('btn-1').onclick = function() {
let element = document.getElementById('item-1');
element.classList.toggle( "action-1" ) ;
};
document.getElementById('btn-2').onclick = function() {
let element = document.getElementById('item-2');
element.classList.toggle( "action-2" ) ;
};
document.getElementById('btn-3').onclick = function() {
let element = document.getElementById('item-3');
element.classList.toggle( "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" ) ;
}
};
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);
}
lesson/lesson_xx.html内、14行目の後に以下を追加
<div> <div id="item-1" class="item"></div> <button id="btn-1" class="btn btn-success">ボタン1</button> </div> <div class="mt-3"> <div id="item-2" class="item item-big anime"></div> <button id="btn-2" class="btn btn-primary">ボタン2</button> </div> <div class="mt-3"> <div id="item-3" class="item anime"></div> <button id="btn-3" class="btn btn-warning">ボタン3</button> </div> <div class="mt-3"> <button id="btn-4" class="btn btn-danger">ボタン4</button> <button class="btn btn-info btn-action">ボタン5-1</button> <button class="btn btn-info btn-action">ボタン5-2</button> </div>
以上で教材が準備できたので、HTMLファイルをブラウザに表示しましょう。
属性学習の教材解説の前に
全てが初見のものばかりで戸惑ったでしょうが、重要なのは属性の性質がどのようなものかへの理解です。
その為に、CSSやJSの複雑な書き方をしていますが、こちらは添え物です。
なんとなく「今後はこういうものも理解していかなければいかないのだ」と思ってもらえれば十分です。
『触れるなら難しいものを』、という考えからこのような教材にしました。
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を付与するのは大きい枠の目印として使う場合が多いです。
レスポンシブデザイン
PCであれば、モニターサイズに。
タブレット、スマホであれば、その画面サイズに応じてレイアウトが変化します。
どのようにレイアウトが変化するのか
実は、当塾のHPもレスポンシブデザインで作られており、どのようにレイアウトがするかを確認することができます。
確認方法は画面上で右クリックの後、メニューの中から『検証』をクリックでChromeのデベロッパーツールを開きます。
ツール右上にある『デバイス切り替えのON/OFF』スイッチをクリックします（以下の画像参照）。
あとは画面中央上部にある『デバイスの切り替え』プルダウンでデバイスを選択し、幅を変更します。
iPadからiPhoneの複数サイズがあるので様々な画面幅の表示が確認できます。
レスポンシブデザインの利用方法
レスポンシブデザインは、利用するのに何も難しいことはいらず、CSSだけで実現できます。
lesson/assets/css/style.cssに以下を追加
/*---iPad Pro---*/
@media only screen and (max-width: 1280px) {
.panel-body{background-color: red}
}
/*---iPad,タブレット---*/
@media only screen and (max-width: 800px) {
.panel-body{background-color: blue}
}
/*---スマートフォン---*/
@media only screen and (max-width: 767px) {
.panel-body{background-color: pink}
}
/*---スマートフォン 小サイズ---*/
@media only screen and (max-width: 350px) {
.panel-body{background-color: green}
}
書き方は上の通りです。
ブレイクポイントと呼ばれる幅を設定し、そこの枠内で定義されたCSSが横幅に応じて適用されるというものです。
例えば、『max-width: 350px』であれば、横幅が350px以下になったときに、class『panel-body』に対して『background-color: green』が適用されるということです。
この特性を利用すれば、横幅に応じて画像サイズを変更したり、文字サイズを変更したりしてデバイスに応じたレイアウトデザインとして表示することができるというわけです。
まとめ
特に、属性の『class』の使い方はパズルを解くのと同じで、上手い人はすごく効率的な使い方をしています。
そして、その『class』の使い方によってレスポンシブの効率的な書き方に繋がります。
たったこれだけなのですが、上級者と初級者の作業時間の差は、ここで決まると言っても過言ではありません。
他人のコードを参考するなどして、良いところは全部真似していくのが上達への近道です。
自主学習のススメ
物足りない方は『JavaScript』までさらに進めてみましょう。
