フロントエンドエンジニアになるための基礎ともいえる、HTML, CSS, そして Java Script のライブラリである jQuery 。これらの関係性についてわかりやすく解説します。
HTMLとは？ とか、概念的な話は参考書に任せます。ここでは直感的にわかるように説明していければなと思っています。
読んでいただきたい人は、WEB関係の仕事に興味がある人、WEBサイトが表示される仕組みを知りたい人、フロントエンドエンジニアを目指している人などです。
HTMLとCSSの関係性
HTMLは文章や画像を表示させます
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
さて、HTMLとは上記のような <p> と </p> に囲まれているもののことを指します。
この <p> は文章を表示させたいときに使うもので、終わりには </p> と記述します。
ただこれだけです。簡単でしょ？
文章以外にも、タイトルを記述するもの、リストやボタン、表などを表示させるものがあります。
それらはほとんどの場合 <>~</> という形で書かれています。
でも皆さんお気づきのように、実際のWEBサイトはもっとおしゃれです。
ただ文字が並んでいるだけではありません。
色がついていたり、文字が美しく並んでいたり、枠線があったり… それら「装飾」をするのが、CSSになります。
先ほどの文章にCSSで装飾を加えてみましょう。
CSSはHTMLに装飾を加えます
See the Pen
HTML&CSS2 by taichi (@taichi_na)
on CodePen.
文字が赤くなりましたね。CSSにそのように書いたからです。
HTMLで作った文章 <p> ~ </p> に囲まれている部分に対して、文字の色を赤くするように指定しています。以下のようなCSSを書いています。
p { color: red; }
p の文字の色を red にします、ということです。
これで文字の色を赤くすることができましたが、例えば、最初の文章のみ赤くしたい場合はどうすればよいでしょうか？
今のままだと <p> ～ </p> で囲まれている二つの文章はすべて赤くなってしまいます。
そこでクラスというものを使います。一度HTMLに戻って最初の <p> に少し手を加えましょう。
class で名札を付けて特定のものにする
See the Pen
HTML&CSS3 by taichi (@taichi_na)
on CodePen.
最初の <p> の中に以下を書き加えました。
class=”hello”
これはわかりやすく言うと、名札を付けたようなものです。
名札の中身はなんでもOKです。ここでは hello としていますが、unko でもいいですし、dog でも cat でも構いません。ルールは英数字を使うことのみです。
通常、わかりやすくするために、関連のあるクラス名にすることが多いです。
さて、今最初の <p> に名札を付けてあげました。
hello という名札が付いているものだけ、文字の色を赤く変えてみましょう。
See the Pen
HTML&CSS4 by taichi (@taichi_na)
on CodePen.
文字の色を変えるためにはCSSで指定をする必要があります。
先ほどは <p> の文字を赤くするという指定をしましたが、今回は、hello という名札を付けているもの限定で文字の色を赤く変えています。
.hello { color: red; }
としました。
p を指定したときと一つだけ違う点があります。
それは先頭に . が付いていること。class=”hello” という形で名札を付けた場合は .hello { } という形でCSSに書きます。
もし class=”unko” だった場合は、.unko { }
class=”dog” だった場合は、.dog{ } ですね。
これで、それぞれの文章に対して装飾を加えることができるようになりました。
さて、もう一つ名札を付ける方法をご紹介しておきましょう。
id でも名札を付けてCSSで装飾ができる
See the Pen
HTML&CSS5 by taichi (@taichi_na)
on CodePen.
先ほどは class=” “ という方法で名札を付けました。
今度は二つ目の <p> に違う方法で名札を付けてみましょう。
<p id=”cold”>
class ではなく id を使いました。
id も class と同様、好きな名前をつけてOKです。unko でも dog でも hage でもなんでもOKです。
（※ id は一つのページで1回しか同じ名前を使えません。）
さて、上の例のCSSのボタンを押してCSSの内容を見てみてください。
今回付けた名札 id=”cold” を持っているものに対して装飾をしてみます。
#cold { font-size: x-large; }
class で名札を付けたときには、名前の前に . を付けました。
id で名札を付けたときには、名前の前に # を付けます。
だから、<p id=”cold”> とした場合、CSSでは #cold { } と書きます。
さて、<p> などの要素に名札を付ける方法、そして、それに対してCSSで装飾をする方法を説明しました。
ではいったい、class と id どちらを使えばいいのでしょうか？
【同じ名札だけど…】class と id の違いについて
結論から言うと、CSSによる装飾が目的の場合には class を
リンクや外部のスクリプトで動きを付ける場合には id を指定します。
ちなみに、 class と id は同時に付けることもできます。
以下の例では最初の <p> に class と id を同時に付けています。
See the Pen
HTML&CSS6 by taichi (@taichi_na)
on CodePen.
CSSの内容は変えていません。
でも二つ目の <p> に class=”hello” を追加したことによって、文字が大きくなっています。
文字が大きいのは id=”cold” が効いているからですね。
jQuery とHTML,CSSの関係について
HTMLとCSSの関係については理解できましたか？
そのまま <p> を指定して装飾をしてもいいし、class, id で名札を付けて個別に指定して装飾を加えてもよいというお話をしました。
HTMLで表示したい中身を作り、CSSで見栄えをよくする。
これがHTML, CSSの関係でした。
今度は jQuery というものを使って、さらに変化を付けてみたいと思います。
jQuery でもCSSのように要素を指定する
See the Pen
HTML&CSS7 by taichi (@taichi_na)
on CodePen.
先ほどと同じHTML, CSSなのですが、表示が消えてしまいました。
上の JS のボタンを押してみてください。以下のように書いてありますね。
$(“p”).hide();
これが jQuery のスクリプト（命令文)となります。
注目してほしいのは最初のカッコの中に入っている、“p” です。
これは <p> に対して命令をしているということで、その命令とは .hide(); の部分です。
.hide(); は「隠せ」という命令をあらわしています。
だから <p> は2列とも隠れてしまったのです。
jQuery でも名札を指定できる
See the Pen
HTML&CSS8 by taichi (@taichi_na)
on CodePen.
今度は2番目の文章が消えています。
JS のボタンを押して jQuery のスクリプトを確認してみてください。
$(“#cold”).hide();
今度は最初のカッコ内に #cold と書かれています。これは先ほどCSSのところで説明した id=”cold” を指定しているということですね。
だから、 id=”cold” と名札を付けられている二つ目の <p> が隠れたということです。
ではもう一つだけ、jQuery で変化を付けて遊んでみましょう。
See the Pen
HTML&CSS9 by taichi (@taichi_na)
on CodePen.
二つ目の <p> にマウスカーソルを乗せると文字の色が変わりました。
これは #cold にマウスカーソルを乗せたときに、#cold の文字の色を変えるようにスクリプトを書いています。
詳しい説明はここでは省きますが、これまで見てきたように、CSSと同じように <p> のような要素そのもの、class, id で付けられた名札を指定して、動きを付けることができるのです。
まとめ:やはり基本はHTMLです！
ということで、この記事では HTML, CSS, jQuery の関係についてみてきました。
超初心者の方を対象にしたものなので、詳しい説明やルール、名称を省いていますが、これが全ての基本になると思います。
フロントエンドエンジニアを目指すとなると、jQuery (Java Script) を勉強したくなりますが、HTMLとCSSの基礎ができていないと、正しい動きを付けることはできません。
なのでまずは、じっくり HTML/CSS から学習することをお勧めします。
では、お疲れさまでした！
