Web デザインの必須スキル！div タグと span タグを使いこなして、プロのようなレイアウトを作成しよう
2024-04-05
HTML の div タグと span タグはどちらも要素をグループ化するために使用されますが、いくつかの重要な違いがあります。
要素の種類
divタグはブロック要素です。これは、改行と余白を持つ独立したブロックを作成することを意味します。spanタグはインライン要素です。これは、他の要素内にあるテキストの一部を強調するために使用することを意味します。
使用例
divタグは、ページのレイアウトを構築するために使用されます。例えば、ヘッダー、ナビゲーション、メインコンテンツ、フッターなどを定義するために使用できます。spanタグは、テキストの色、フォント、サイズなどを変更するために使用されます。例えば、重要なキーワードを強調したり、リンクを作成したりするために使用できます。
表示上の違い
divタグは、デフォルトで幅と高さが設定されていません。そのため、CSS を使用してサイズを指定する必要があります。spanタグは、周囲のテキストと同じ幅と高さになります。
検索エンジン最適化 (SEO)
divタグは、意味的に関連するコンテンツをグループ化するために使用することで、SEO に役立ちます。spanタグは、SEO に直接的な影響はありません。
コード例
<div class="header">
<h1>サイト名</h1>
</div>
<div class="main-content">
<p>本文</p>
</div>
<p>
この文章の中で、<span class="important">重要なキーワード</span>を強調します。
</p>
divタグは、ページのレイアウトを構築するために使用されます。spanタグは、テキストの一部を強調するために使用されます。
どちらのタグを使用するべきかは、要素の役割と目的によって決まります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
</head>
<body>
<div class="header">
<h1>サイト名</h1>
</div>
<div class="main-content">
<p>本文</p>
<p>
この文章の中で、
<span class="important">重要なキーワード</span>
を強調します。
</p>
</div>
<div class="footer">
<p>Copyright © 2024</p>
</div>
</body>
</html>
このコードを実行すると、以下のようなページが表示されます。
解説
divタグは、ヘッダー、メインコンテンツ、フッターなどのページレイアウトを構築するために使用されています。spanタグは、「重要なキーワード」というテキストを強調するために使用されています。
このコードは、div タグと span タグの基本的な使用方法を示しています。これらのタグを組み合わせて、さまざまなレイアウトやデザインを作成することができます。
その他の div タグと span タグの使用方法
div タグ
- セクションや記事などのコンテンツをグループ化する
- 列やグリッドレイアウトを作成する
- 浮動要素を配置する
- モーダルウィンドウやその他のオーバーレイを作成する
span タグ
- テキストの色、フォント、サイズなどを変更する
- ツールチップやその他の補助情報を表示する
- JavaScript で操作する要素を特定する
<div class="section">
<h2>セクションタイトル</h2>
<p>セクションの内容</p>
</div>
<p>
<span class="tooltip">ここにツールチップテキストが表示されます</span>
</p>
<script>
const span = document.querySelector(".tooltip");
span.addEventListener("mouseover", () => {
// ツールチップを表示する
});
span.addEventListener("mouseout", () => {
// ツールチップを非表示にする
});
</script>
html tags
