オファシムの広告掲載枠

ホームページ制作

初心者によるCSS講座!divの使い方

投稿日:

今回は第2回!
第1回はmarginとpaddingの違い
前回はmarginとpaddingnの違いについて、勉強してきました!
まだご覧になってない方はぜひご覧ください!

では、今回はhtmlのdivについて勉強していきます。
サイトを実際に作り始めた方だと、色々なサイトで

<div class="〇〇(クラス名)">

<h1>〇〇</h1>

<p>△△△△△△△△</p>

</div>

といったコードを目にする機会が多いと思います。僕もやけにこの書き方が多いなー、と感じたので・・・
では、いったい div class とはいったい何に使っているのか?
勉強していきましょう!

divの使い方

まずは上記の例です。
<div>の中にh1タグとpタグが入っていますね。
divは中に入っている要素にcssを適応することが出来ます!
それって、いったいどういう事?何が便利なの?
一つずつ説明していきます!

div内の要素

divを使わなかった場合で考えていきます。
例えば、h1を赤くしたい、pも赤くしたい。
この場合、cssで
h1 {

color  :  red;

}

p {

color : red;

}

といった書き方になると思います。(あえて分けて書きますね!)

では、divを使った場合だと?

cssで

.〇〇(class名) {

color : red;

}
と書くだけて、div内の要素に適応されるわけです!
これは便利ですね!

幅、高さの設定

divはブロック要素(一般的に前後に改行がはいる様な要素)で出来ています。
そのため、幅(width)や高さ(height)を指定してあげることが出来ます。
さらに前回説明したmargin、paddingも指定できるので、
好きな場所に配置することができるので、divはとても使い勝手の良い要素となっています。

グループにする

簡単にいってしまうと、divは要素をグループする物。という認識でOKです!
そこにclassをつけてあげて、そのグループにcssを適応させる。
といった使い方になります。

何回も使える

divはhtmlのコードで何回でも使うことが出来ます!
例を挙げると、

<div class="section">

<div class="left">

<img ・・・>

</div>

<div class="right">

<p>・・・</p>

</div>

</div>

上のように、sectionというクラス名のdivの中にleft、rightというクラス名のdivを入れています。
leftのdivの中身はimgタグで画像データを入れ、rightのdivの中身はpタグで文字を入れている。といったような使い方が出来るので、
自由に配置でき、グループにまとめることが出来るので、やはり覚えてしまえば使い勝手の良いものだと思います!

また、ofasimではホームページ制作も承っています。
詳しくは以下よりお進みください!
ご相談、お見積もりは無料ですので、お気軽にお問い合わせくださいませ。

あなたの目的を達成するためのホームページを作ります。

オファシムはSEO対策、記事コンテンツの制作を主に行なっている会社ですが、ホームページ制作も承っております。ホームページ制作をメインで行っているわけではないのですが、オファシムでは自社運用しているWebサイトが多数あるため、しっかり本来の役割を理解したホームページ制作が可能です。

Web制作のエンジニア集団ではないので、特殊なコーディングスキルは持ち合わせていません。しかし、多ジャンルのサイトを自社運用してきた実績を基に、クライアント様の目的を達成できる最適な構成を作り上げます。

オファシムが意識しているのはホームページの見た目だけではなく、その中身です。

  • ユーザー数を増やしたい
  • 購入者数を増やしたい
  • 自社のブランディングがしたい

あらゆる目的を理解し、最適なサイト構成を行います。初めての方も、まずはお気軽にご相談ください。

ご相談、お見積もりは無料ですので、お気軽にお問い合わせくださいませ。

-ホームページ制作

Copyright© 株式会社OFASIM(オファシム) , 2019 All Rights Reserved.

MENU