ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れたユーザーに伝えたい事業の魅力やサービス内容は、すべてこのbodyタグの内側に記述します。
ウェブ標準の進化に伴い、bodyタグ自体の仕様や役割も大きく変化してきました。かつての古いHTML規格では、bodyタグに対して背景色や文字色、リンクの色を直接指定するための属性が多数用意されていました。しかし現在のHTML Living Standardにおいては、これらの見た目を制御する属性はすべて廃止されています。現代のホームページ（ウェブサイト）制作では、HTMLは文書の構造と意味を定義するもの、CSSはデザインやレイアウトを制御するものとして、役割が明確に分離されています。そのため、bodyタグは純粋に「文書の本体」であることを示す意味論的な枠組みとして機能します。
また、SEO（検索エンジン最適化）の観点からもbodyタグの扱いは重要です。検索エンジンのクローラーは、headタグ内でページの設定やメタデータを読み取った後、bodyタグ内のコンテンツを解析して検索順位を決定するための評価を行います。この際、bodyタグの直下にどのような構造で情報が配置されているか、あるいはJavaScriptの読み込みによってページの表示速度が遅延していないかといった要素が、サイト全体の評価に直結します。
本ページでは、bodyタグの最新の標準仕様に基づき、過去の認識からアップデートすべきポイントの指摘とリライト、そしてページ表示速度の最適化や構造化に向けた、集客に強い事業用ホームページ（ウェブサイト）を構築する上で知っておくべき正確な仕様と運用方法について解説します。
body（ボディ）
<body></body>
ホームページ制作（ウェブサイト制作）の際に使用する<body>タグについてのご説明です。
ホームページ制作において<body>（ボディ）タグはウェブサイト・ホームページを構成するHTML文書の本体部分であることを指定します。
<body>タグで囲まれた部分が、サイトアクセス時にブラウザに表示される部分になります。ホームページ制作では欠かすことのできない必須タグです。
<body> HTML文書の本体
<body>タグは、ブラウザに表示されるHTML文書の本体を記述します。ホームページ制作においては、ページの本文を記述する部分を定義するため、必ず設置する必要のある重要なタグです。
ホームページ（ウェブサイト）を構成するHTML文書はHTMLであることの宣言や文書付加情報であるメタ情報、そして、文書の本体などで構成されています。
ホームページ制作での<body>タグの使われ方
この<body>タグは、HTML文書の本体部分を指定します。ホームページ制作での<body>タグの使われ方として、ホームページの表示領域を指定するHTMLタグであるため、必須記述項目です。
なお、<html>はhtml文書であることを示し全体の最初と最後に記述します。
また、<head>はブラウザ上（本文）には表示されないメタ情報を記述します。
HTML文書の記述の順序は次のようになります。
<html>
<head></head>
<body></body>
</html>
ホームページ（ウェブサイト）の画面上に表示されるすべてのコンテンツを包み込むbodyタグについて解説します。過去のHTMLでは、このタグに文字色や背景画像などを直接指定する多くの属性が存在しました。しかし、現代のWeb標準仕様において、見た目に関わる属性はすべて廃止されています。検索エンジンからの評価を高め、ユーザーの利便性を向上させるための、最新の仕様に基づいたbodyタグの適切な扱い方について確認していきます。
現代のHTML仕様で廃止されたデザイン属性
かつてはbodyタグの中に直接記述してページ全体のデザインを制御していましたが、現在のホームページ（ウェブサイト）制作においては仕様変更により完全に非推奨または廃止となっています。以下の属性で指定していた内容は、すべて外部のCSS（カスケーディングスタイルシート）へ移行します。
文字色とリンク色を指定する属性群
文書全体の文字色を指定するtext属性や、リンクの色を状態に合わせて指定する各種属性（未読ページのlink属性、既読ページのvlink属性、クリック時のalink属性）は、すべて廃止されています。現在、テキストの色はCSSのcolorプロパティを使用して指定し、リンクの状態に合わせた色の変化はCSSの疑似クラス（:link、:visited、:hover、:active）を用いて細かく制御します。
背景色と背景画像を指定する属性
ページ全体の背景色を指定するbgcolor属性や、背景画像を指定するbackground属性も、現代の仕様では使用しません。背景のデザインは、CSSのbackground-colorやbackground-imageプロパティで指定します。事業のブランドイメージに合わせた配色や複雑な背景画像の処理は、すべてスタイルシート内で構築します。
構造と装飾を分離するCSS移行の重要性
なぜHTMLタグに直接デザインを指定する属性が廃止されたのかを理解することは、現代のSEO対策やサイト運用において非常に重要です。HTMLとCSSの役割を明確に分けることには、大きなメリットがあります。
検索エンジンに対する構造の明示
HTMLは文書の構造や意味を検索エンジン（クローラー）に正しく伝えるための言語です。より専門的には、HTMLのコード内からデザインに関する記述を排除することで、文書の構造がよりシンプルで明確になり、検索エンジンがコンテンツの内容を正確に理解しやすくなります。これがサイト全体のSEO評価の向上につながります。
メンテナンス性と表示速度の向上
デザインの設定を外部のCSSファイルに集約することで、ホームページ（ウェブサイト）全体の色やレイアウトを一括で管理できるようになります。事業展開に合わせてデザインを一新する際も、CSSファイルを編集するだけで全ページに反映されるため、運用効率が飛躍的に向上します。また、HTMLファイルのデータ容量が軽くなるため、ページの表示速度の改善にも貢献します。
bodyタグで活用されるグローバル属性
デザインに関する属性は消滅しましたが、現在のホームページ（ウェブサイト）制作において、ページ全体を制御する目的でbodyタグに付与される属性が存在します。これらは主にCSSやJavaScriptと連携するために使用します。
class属性とid属性
ページごとに固有のデザインを適用したり、特定のページのレイアウトだけを少し変更したりする場合に、bodyタグに個別のclass属性やid属性を付与します。例えば、トップページのbodyタグに専用のclass名をつけておくことで、CSS側でそのページだけに適用されるスタイルを安全かつ確実に記述することができます。
カスタムデータ属性（data-）
JavaScriptなどのプログラムと連携し、ページごとに異なる設定値や情報を渡すために、data-から始まるカスタムデータ属性をbodyタグに記述することがあります。高度なアニメーションの制御や、ユーザーの操作に合わせた動的な表示切り替えなどを行う際に、安全にデータを扱うための手法として広く利用されています。
SEOとページの表示速度最適化におけるbodyタグの役割
bodyタグそのものに検索順位を直接上げるような魔法の属性はありませんが、bodyタグ内での要素の配置やリソースの読み込み順序は、検索エンジンの評価やユーザー体験に大きな影響を与えます。
レンダリングブロックを回避するスクリプトの配置
事業用のホームページ（ウェブサイト）において、アクセス解析ツールや動的なアニメーションを実装するためにJavaScriptファイルを利用することは多々あります。
これらのscriptタグをbodyタグの先頭や途中に配置すると、ブラウザはスクリプトの読み込みと実行を優先するため、画面の描画（レンダリング）が一時的に停止してしまいます。これを防ぐために、scriptタグはbodyタグの閉じタグの直前に配置するか、headタグ内でdefer属性やasync属性を付与して非同期で読み込ませる手法が主流です。これにより、ページの表示速度が改善し、ユーザーの離脱を防ぐ効果が期待できます。
セマンティックなタグによる文書の構造化
検索エンジンにコンテンツの意味を正確に伝えるためには、bodyタグの直下を単なるdivタグの羅列にするのではなく、header、main、footerといったセクショニング・コンテンツやランドマーク要素で適切に分割します。
特にmainタグは、そのページにおける最も重要なコンテンツ領域を示すため、bodyタグ内に1つだけ配置することが推奨されます。これにより、クローラーはページのどこに主題があるのかをスムーズに把握できるようになり、質の高いコンテンツとして評価されるための土台が整います。
WordPressなどのCMSにおけるbodyタグの実践的な活用
特定の属性が廃止された一方で、すべてのHTML要素に共通して使用できるグローバル属性をbodyタグに付与することで、サイト全体のデザインや動作を効率的に管理する手法が定着しています。
class属性やid属性によるページごとのデザイン制御
WordPressなどのCMS（コンテンツ管理システム）を用いて事業用のホームページ（ウェブサイト）を構築する際、bodyタグに対して動的にclass属性を出力する手法が広く用いられています。たとえば、トップページには「home」、お問い合わせページには「page-contact」といった固有のclass名を自動的に付与します。
これにより、同じCSSファイルを読み込んでいても、bodyタグのclass名を基準にしてページごとに異なる背景画像を設定したり、レイアウトを微調整したりすることが可能になります。効率的で一貫性のあるデザイン管理を実現するために非常に有効なテクニックです。
カスタムデータ属性を用いたJavaScriptとの連携
より専門的には、bodyタグに対して独自のカスタムデータ属性（data-属性）を付与することで、ページ固有の設定値や状態をJavaScriptへ安全に渡すことができます。
たとえば、現在ログインしているユーザーの権限レベルや、ページの種類を示すフラグをbodyタグに持たせておくことで、スクリプト側で条件分岐を容易に行うことができます。HTMLの仕様に違反することなく独自のデータを持たせることができるため、高度な機能を持つホームページ（ウェブサイト）の開発において非常に重宝します。
<body></body>
セマンティックHTML Webページの論理構造の明確化で「意味」を構築
ホームページ制作・SEOの1ポイント
この<body>は、ホームページ制作で「ブラウザ表示で見える部分」を設定します。正確に記述しないとSEO以前の問題として、ホームページが正確に表示されません。
スタイルやスクリプトの呼び出しなど、<body>内でも<head>内でも、どちらに記述しても有効なタグがありますが、ページの本文として表示しない項目は<head>内に記述したほうが良いでしょう。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作・SEO・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいておりますので、HTMLの修正をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（
-
ホームページ（ウェブサイト）制作において、ユーザーが実際に画面で見るテキストや画像などのコンテンツとは別に、ブラウザや検索エンジンに対してページの情報を裏側から伝える設定が存在します。この「裏側の情報」をまとめるための領域を作るのがHTMLの「head」タグであり、その中で外部のファイルとページを繋ぐ役割を持つのが「link」タグです。 「head」タグは、
-
ホームページ（ウェブサイト）制作において、ページに動きをつけたり、ユーザーの行動を分析したりするために、JavaScriptをはじめとするプログラムは非常に重要な役割を果たしています。このプログラムをホームページ（ウェブサイト）内に組み込むために使用されるのが、HTMLの「script」タグです。また、これと対になって使用されることが多い「noscript」
-
ホームページ（ウェブサイト）制作において、ページ内の各コンテンツが「どのような意味や役割を持っているのか」を検索エンジンやブラウザに正しく伝えることは非常に重要です。かつてのHTMLでは、ページのヘッダー部分やフッター部分、あるいは記事のまとまりなどをすべて「div」タグで囲み、CSSのクラス名で役割を区別していました。しかし、HTML5の規格からは、文書の
-
現在のホームページ（ウェブサイト）制作において、ユーザーに提供する情報量は年々増加しています。しかし、1つのページに膨大なテキストをそのまま掲載すると、スマートフォンなどの画面が小さなデバイスでは非常に読みにくくなり、ユーザーの離脱を招く原因となります。このような課題を解決し、利便性と情報量の両立を図るために活用されるのが、HTMLの「summary」タグと
