WePuri


ログイン

パスワードを忘れた方はこちらから

無料登録

class名とdivタグの使い方

このlessonでは、classとdivの使い方について解説させていただきます。

divとは

<div></div>h1abのように、意味がついていません。例えばh1であればタイトルの時に利用するなどの意味がついています。

ですが<div></div>は何の意味も持っていません。

そのためレイアウトを行う上で補助的に使われています。

<div></div>のようにhtmlのタグであって意味を持たないもので<span></span>がありますが、このレッスンでは<div></div>を中心に進めていきたいと思います。

class名とは

class名とはhtmlのタグに名前をつける時に利用します。

使い方は下記のようになります。

例
<h1 class="ttl"></h1>
<p class="in"></p>
<div class="box"></div>

いままでcssを扱う時htmlのタグに対して、例えば下記のように指定していました。

h1{
    height: 100px;
    width: 100%;
    background: #000;
}

ですが、h1に対して「ttl」というclass名をつけた場合、cssをh1に指定するのではなく、ttlに対して指定してレイアウトを変更をすることができます。

例
.ttl{
    height: 100px;
    width: 100%;
    background: #000;
}

クラス名でcssを指定するときは、クラス名の手前に「ドット」をつけなければいけません。