ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。
CSSとは、「HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するための言語」です。
Webページの見栄えを整えるにあたり、CSSでは次の3つの要素を用います。
簡単に言えば、「何に、どのように、どのくらい」デザインを施すかということを示します。
説明だけではわかりにくいと思うので、実際にスタイルを作ってみましょう。
たとえば、「h1タグ」に対して、文字の大きさを50ピクセルにしたいときは次のように設定します。
h1{ font-size:50px }
ほかのタグに設定したいときも同様です。
例）pタグ
p { color: green; }
最初はややこしく感じるかもしれませが、一度覚えてしまえば簡単です。「:」や「;」を書き忘れないようにしましょう。
ひとつのセレクタに対して、プロパティは複数指定することができます。
たとえば、フォントサイズを70px・文字の色を青にしたいときには、
h1{font-size: 70px; color: blue;}
のように書きます。
また、コードには空白部分は無視されるという性質があるので、{ }で囲んだ設定を見やすく並列に並べてもいいでしょう。
h1{
font-size: 20px,
color: blue;
}
プロパティにはほかにも、文字幅の調整や背景色の指定など目的別にたくさんの種類があります。
CSS リファレンスなどで検索すれば、様々なサイトが出てくるのでいろいろ試してみましょう。
プロパティ自体は他にも多くありますが、紹介しているものは覚えておくと作業効率も上がるでしょう
HTMLでは、classと似たようなものとして、idというのがあります。
この違いも重要なので、しっかり覚えていきましょう。違いはとてもシンプルです。
これも例で解説していきます。
【例1】
<div class="demo"> <h1>cybergreen</h1> <p>サイバーグリーン</p> </div>
【例2】
<div class="demo"> <h2>cybergreenとは？</h2> <h3>サイバーグリーンとは？</h3> </div>
classは上記のように同じ名前(demo)を何回使っても問題はありません。
では、idの例を見てみましょう。
【良い例】
<div id="demo1"> <h1>cybergreenとは？</h1> <p>サイバーグリーンとは？</p> </div> <div id="demo2"> <h2>cybergreenとは？</h2> <h3>サイバーグリーンとは？</h3> </div>
【悪い例】
<div id="demo"> <h1>cybergreeenとは？</h1> <p>サイバーグリーンとは？</p> </div> <div id="demo"> <h2>cybergreenとは？</h2> <h3>サイバーグリーンとは？</h3> </div>
【idは同じ名前を２回以上使うことは出来ない】
【悪い例】のように、「demo」というid名を２回（以上）使うことはできないのです。
demo1、demo2のように名前を変えることが必要です。
classとidの違いについてはよくある疑問として挙げられるので、これを機にしっかり覚えておきましょう。
今回でHTMLのdiv classについて大体理解できたのではないでしょうか。
divはHTMLのコードに範囲を指定したい時に使います。例えば、以下のようなHTMLのコードがあるとします。
<h1>cybergreen</h1> <p>サイバーグリーンWEB</p>
ここで、上記の文字の色を緑にしたい、と思った時に<h1>と<p>別々にCSSで赤色を指定するのは二度手間な感じがしますよね？
どうせなら一度にまとめて赤色を指定した方が、CSSの記述量も少なくて楽です。
<h1>と<p>を一つの「かたまり・グループ」と考えれば良いのです。
そのような時にdivが使えます。以下のようにdivを記述することで、<h1>と<p>を１つのかたまり・グループとすることができます。
<div> <h1>cybergreen</h1> <p>サイバーグリーンWEB</p> </div>
【<h1>と<p>が一つのかたまり、グループとなりました】
classとは何なのでしょうか。これは、<div>に付ける名前だと考えてください。
例えば、<div></div>で囲まれたHTMLのコードがたくさんあると、CSSを適用するときに
どこの<div></div>にCSSを適用すれば良いのかわからなくなります。
【例1】
<div> <h1>cybergreen</h1> <p>サイバーグリーンWEB</p> </div>
【例2】
<div> <h2>cybergreenとは？</h2> <h3>WEBサイバーグリーンとは？</h3> </div>
【上記のように<div></div>同士で区別がつかない】
そんな時に<div>同士でも区別がつくようにするため、それぞれの<div>にclass(名前)を付けてあげましょう。
class=”付けたい名前”のように記述します。
【例3】
<div class=”sample1”> <h1>cybergreenとは？</h1> <p>サイバーグリーンWEBとは？</p> </div>
【例4】
<div class=”sample2”> <h2>CYBERGREEBとは？</h2> <h3>サイバーグリーンウェブとは？</h3> </div>
<div>にclassを与えたことにより、<div></div>同士での区別ができるようになり、これで２つの<div>が区別できるようになりました。
他にもHTMLには多くのタグがあります。これからHTMLを学習していくと様々なタグを使うことなるでしょう！