classってそんな使い方ができるの！？

はじめに

今回は、この1か月間HTMLとCSSを学ぶ中で、私自身が躓いたclassをまとめようと思います。もしかすると、「こんな簡単なこと」と思われてしまうかもしれませんが、私と同じく、右も左もわからないような、これからプログラミングを学ぶという人など、少しでも参考になれば嬉しいです。

【div class】

"div class"はHTMLに記述したコードを分類するときによく使われます。

例

<div class="box"></div>

このdiv classは複数のコードに処理をする場合に使われますが、下記の例のように、ひとつだけ違う指定をすることも出来てしまいます。

例

<div class="content-block">
    <p>box1</p>
</div>
~~~~~
<div class="content-block box-yellow">
    <p>box7</p>
</div>
~~~~~
<div class="content-block">
    <p>box18</p>
</div>

うん、とても便利ですね。

【p class】

先ほどは"div"というブロック要素を使用しましたが、実は"p"タグにもclassをつけることが出来ます。例えば下記の例のように、同じ言葉でもひとつだけ位置や状態を変えたい場合はこの方法によって簡単に指定することが出来ます。（私はpタグにclassをつけることが出来ると知らずに、しばらく悩んでいました。。。）

例

<p>仮テキスト</p>
<p class=text-left>仮テキスト</p>
<p>仮テキスト</p>

こちらも便利ですね。

おわりに

今回は、簡単に2種類まとめてみましたが、プログラミングを学ぶ中で気づいたことがあります。

それは。。。。。

固定観念に縛られず、思いついたら試せ！！！

拙い記事ですが、ここまで読んでいただきありがとうございました。