HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLブロックとインライン要素


すべてのHTML要素には、要素のタイプに応じて、デフォルトの表示値があります。

ブロックとインラインの2つの表示値があります。


ブロックレベルの要素

ブロックレベルの要素は常に新しい行から始まります。

ブロックレベルの要素は、常に使用可能な全幅を占めます(可能な限り左右に伸びます)。

ブロックレベルの要素には上マージンと下マージンがありますが、インライン要素にはありません。

<div>要素はブロックレベルの要素です。

<div>Hello World</div>

HTMLのブロックレベルの要素は次のとおりです。


インライン要素

インライン要素は新しい行から始まりません。

インライン要素は、必要なだけの幅を取ります。

これは、段落内の<span>要素です。

<span>Hello World</span>

HTMLのインライン要素は次のとおりです。

注:インライン要素にブロックレベルの要素を含めることはできません。


<div>要素

この<div>要素は、他のHTML要素のコンテナとしてよく使用されます。

要素には必須の<div>属性はありませんが、、styleおよびclassid一般的です。

CSSと一緒に使用すると、<div>要素を使用してコンテンツのブロックのスタイルを設定できます。

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<span>要素

この<span>要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナです。

要素には必須の<span>属性はありませんが、、styleおよびclassid一般的です。

CSSと一緒に使用すると、<span>要素を使用してテキストの一部のスタイルを設定できます。

<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

章のまとめ

  • ブロックとインラインの2つの表示値があります
  • ブロックレベルの要素は常に新しい行から始まり、使用可能な全幅を占めます
  • インライン要素は新しい行で開始せず、必要なだけの幅を使用します
  • この<div>要素はブロックレベルであり、他のHTML要素のコンテナとしてよく使用されます。
  • この<span>要素は、テキストの一部またはドキュメントの一部をマークアップするために使用されるインラインコンテナです。

HTMLタグ

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)

使用可能なすべてのHTMLタグの完全なリストについては、HTMLタグリファレンスにアクセスしてください。