divとspanの違いと使い方

divとspanの違いと使い方

次に、div+css で開発する場合の HTML Web ページの制作について、特にタグ適用における div と span の違いと使用方法について学習します。初心者がウェブ標準(div css)を使用してウェブページを開発する場合、最初に遭遇する質問は、divとspanの違いは何か、divタグをいつ使用し、spanタグをいつ使用するかということです。

以下は、開発 Web ページに CSS スタイルが設定されていない場合のシステムのデフォルトの紹介です。

1. DIVとSPANの違いと特徴

divとspanの違い

divが占める位置は1行です。
次の図に示すように、スパンはコンテンツと同じスペースを占有します。


スパンタグの使用例のスクリーンショット

2. スパンタグの概要

Webページを開発する際には、divとspanの両方を使用できますが、通常は違いがないことがわかります。ただし、div は 1 行を占めますが、span は 1 行を占めないことに注意してください。span の幅はコンテンツの幅と同じです。

一般的に、div は Web ページのレイアウトに使用され、p タグは段落コンテンツに使用され、span は段落コンテンツの一部のスタイルや色を設定するために使用されます。

ラベル一般
分割ウェブページのレイアウト 123WORDPRESS.COM のウェブページのレイアウトはすべて div で行われ、いわゆる div+css レイアウトです。テーブルのサイズが大きいため、ページのコンテンツの表示が遅くなります。
p 123WORDPRESS.COM の記事の多くの部分では、強調表示されたコードを除いて、p タグが使用されています。
スパン一般的に、pタグやdivタグは、コンテンツの局所的な領域の表示や、レイアウト(右揃え)や色の設定などに使用されます。

3. 拡大と改善

div内のspanは、以下に示すように、CSSセレクタ疑似クラスに名前を付ける必要はありません。

divのクラスがyangshiの場合、内部のspanのCSS属性を設定します。コードは次のとおりです。
.yanshi span{属性と属性値}

4. 凡例の効果の実証例

上の図を分析すると、span に疑似クラス名を付ける必要はなく、CSS 継承属性を直接使用して span の CSS スタイルを設定できることがわかります。 div の元のスタイルではテキストが青に設定されますが、span のスタイルは継承によって赤に設定されています。

divcss5 の Web サイトでまとめられている CSS の事例がお役に立てば幸いです。こちらは、div と span の違いと使用方法を説明した技術記事です。

Q: DIV と SPAN の違いは何ですか?

回答: 解決策:

DIV 要素と SPAN 要素の最大の特徴は、デフォルトでは要素内のオブジェクトに対して書式設定やレンダリングが実行されないことです。主にスタイルシートを適用するために使用されます。 2 つの要素の最も明らかな違いは、DIV がブロック要素であるのに対し、SPAN はインライン要素 (埋め込み要素とも呼ばれます) である点です。

具体的な手順:

1. ブロック要素は新しい行からレンダリングが開始される要素ですが、インライン要素は新しい行から開始する必要はありません。次のコードをテストすると、より鮮明な理解が得られます。
テスト <span> は前の "test" の直後に表示されます </span> <div> はここで新しい行に表示されます </div>
2. ブロック要素とインライン要素は静的ではありません。次のように CSS の display プロパティ値を定義することで、ブロック要素とインライン要素を相互に変換できます。
テスト <div style="display:inline">前の「テスト」表示の直後</div> <span style="display:block">ここでは別の行に表示されます</span>
ヒント: DIV 要素に CSS プロパティを定義しない場合、その表示効果は P 要素と同じになります。

DIV 要素と SPAN 要素は特殊な性質を持つため、CSS でレイヤーとして定義するなど、スタイルシートを適用するためによく使用されます。区別する必要があるのは、ブロック要素とインライン要素の違いと、両者の変換です。

DIV は HTML をレンダリングするためのコンテナーを指定します。
SPAN はインライン テキスト コンテナーを指定します。
一般的に、div はブロックを占有し、そのデフォルトの表示属性はブロックを意味する block です。のように:
<div>aaa</div>bbb が 2 行で表示されます。
span の場合、デフォルトの表示属性は inline であり、つまり連結できることを意味します。たとえば、<span>aaa</span>bbb は 1 行として表示されます。
Div は通常、タイプセットに使用され、span は通常、ローカルテキストのスタイル設定に使用されます。

<<:  Vue開発の詳細な説明 ソートコンポーネントコード

>>:  MySQL でコミットされていないトランザクションを見つけるための SQL の例の簡単な分析

推薦する

UCenter ホームサイトに統計コードを追加

UCenter Homeは、ComsenzがリリースしたSNSサイト構築システムです。最新バージョン...

CSS3 メディアクエリにおけるデバイス幅と幅の違いの詳細な説明

1.デバイス幅定義: 出力デバイスの画面表示幅を定義します。 Web ページが Safari で開か...

CSS の overflow: hidden の使い方 (オーバーフローの非表示とフロートのクリア)

オーバーフロー非表示指定された高さを超えるテキストや画像情報を非表示にすることを意味します。 <...

シンプルなスネークゲームを実現するネイティブjs

この記事では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な内容...

MySQL 5.7 のパフォーマンスと sys スキーマの監視パラメータの説明 (推奨)

1. パフォーマンス スキーマ: はじめにMySQL 5.7 では、多数の新しい監視項目の導入、ス...

Zabbix 監視 Docker アプリケーション構成

コンテナの応用はますます一般的になっていますが、大量のコンテナをどのように管理すればよいのでしょうか...

Web デザインのヒント: ページ レイアウトの簡単なルール

繰り返し: サイト全体で特定のページ デザイン スタイルを繰り返します。繰り返し要素としては、特定の...

Vueはショッピングカート決済機能をシミュレートします

この記事では、ショッピングカート決済機能を実現するためのVueの具体的なコードを例として紹介します。...

Linuxダイナミックリンクライブラリの使用

通常のプログラムと比較すると、ダイナミック リンク ライブラリにはメイン関数がなく、一連の関数の実装...

MySQL ユーザー変数と set ステートメントの例の詳細な説明

目次1 ユーザー変数の概要2 ユーザー変数の定義3 ユーザー変数の使用3.1 セットを通した例3.2...

Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法

1. はじめに● ランダム書き込みではヘッドがトラックを頻繁に変更するため、効率が大幅に低下します。...

JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...

MySQL 入門 - SQL 実行プロセス

目次1. プロセス2. コアアーキテクチャ2.1 サーバー層の基本コンポーネントの紹介3. ステート...

Selenium+testng を使用して Docker で Web 自動化を実現する方法

序文長い間さまざまな資料を読んで、ついに selenium+testng のパラメータ化の問題を解決...

JS関数の継承について学ぶ記事

目次1. はじめに: 2. プロトタイプチェーン継承: 3. コンストラクタ継承の借用(オブジェクト...