ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

divでまとめて指定

divを使ってまとめて指定する

<div>タグを使ってスタイルを呼び出せば、任意の範囲にスタイルを適用することができます。

例えば、

<p class="aka">テキストテキスト</p>

であれば、<p>~</p>だけの範囲にスタイルが適用されますが、<div>を使えば好きな範囲に適用可能です。

divとは

その前にまず、<div>タグについて説明します。

<div>は単体では特に意味は持たないタグです。
汎用的なブロック要素として存在します。

divタグについて

例えば「テキスト」の文字を<div></div>で囲んでも特に変化は無く、ブラウザで見ても「テキスト」としか表示されません。
ブロック要素であるため、上下に改行が入りますが、それ以外に変化はありません。

しかし、この「特徴のなさ」が<div>の最大の特徴であり、CSSを使う上で非常に便利なのです。

特に意味を持たないタグなので邪魔になることもなく、スタイルを適用する「入れ物」として最適なのです。

divの特徴

divタグの使い方

<div>の使い方はとってもカンタンです。
スタイルを適用したい範囲を<div></div>で囲むだけでOKです。

例えば以下のスタイルを、<p>と<li>に適用するとします。

.aka {
color:#F00;
}

その場合、<p>と<li>を、<div>で囲んであげればOKです。

[記述例]

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>divの使い方</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div class="aka"> ← <div>にスタイルを指定します
<p>テキスト</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
<p>テキスト</p>
</div>  ← </div>で閉じます。

</body>
</html>

このソースコードをブラウザで確認すると…

ブラウザで確認した画像

<div>~</div>で囲んだ範囲に、スタイルが適用されました。

このように、<div>を使えば好きな範囲にスタイルを適用することが可能です。
まとめてドカッと適用できるので、効率的であり、変更・修正する際にも一気に修正できるので時間の短縮にもなります。

覚えておきたいポイント

まとめて便利!

<div>を使えば好きな範囲にスタイルをまとめて指定することができます。また、変更や修正するときにもスタイルを変更するだけで、適用範囲全てを修正することができます。

古いブラウザへの対応
« 前のページへ classとidの使い方

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。