【HTML】bodyタグの基本を徹底解説!styleで表示を調整しよう
  • facebookページ
  • twitterページ
  • 2020.02.25

    【HTML】bodyタグの基本を徹底解説!styleで表示を調整しよう

    bodyタグとは?

    bodyタグとは、HTML文書のコンテンツ・内容を示す要素のことです。

    ブラウザ画面に表示したい内容は、すべてbodyタグの中に記述・配置します。

    bodyタグに使える属性

    bodyタグに使える属性は次の6つです。

    1. alink属性
    2. background属性
    3. bgcolor属性
    4. link属性
    5. text属性
    6. vlink属性

    ただし、これらの属性はいずれも非推奨とされており、スタイルシート(CSS)での記述が推奨されています。

    簡単に、それぞれの属性について説明します。

    1.alink属性

    alink属性は、ページ内にあるリンクをクリックした際のテキスト色を指定する属性です。

    alink属性と同じ表現をスタイルシートで行う場合は、:active擬似クラスを使います。

    ■記述例

    2.background属性

    background属性は、画面の背景画像を設定する属性です。

    background属性と同じ表現をスタイルシートで行う場合は、background-imageプロパティを使います。

    ■記述例

    3.bgcolor属性

    bgcolor属性は、画面の背景色を指定する属性です。

    bgcolor属性と同じ表現をスタイルシートで行う場合は、background-colorプロパティを使います。

    background-colorプロパティについては、次の記事を参考にしてみてください。

    【関連記事】

    ▶︎【5分でわかる】HTMLでbackground-colorの使い方まとめ

    ■記述例

    4.link属性

    link属性は、ページ内にあるリンクが未訪問の場合のテキスト色を指定する属性です。

    link属性と同じ表現をスタイルシートで行う場合は、:link擬似クラスを使います。

    ■記述例

    5.text属性

    text属性は、ページ内の文字色を指定する属性です。

    text属性と同じ表現をスタイルシートで行う場合は、colorプロパティを使います。

    ■記述例

    6.vlink属性

    vlink属性は、ページ内にあるリンクが訪問済みの場合のテキスト色を指定する属性です。

    vlink属性と同じ表現をスタイルシートで行う場合は、:visited擬似クラスを使います。

    ■記述例

    bodyタグのサンプル

    bodyタグの属性をサンプルを用いて確認してみましょう。

    なお前述した通り、属性の指定はいずれも非推奨とされており、スタイルシート(CSS)での記述が推奨されています。

    ここでは、

    1. bodyのページ全体の文字色と背景色
    2. bodyのリンク色

    に分けて確認してみます。

    1.bodyのページ全体の文字色と背景色

    サンプルのコードで表示を確認してみましょう。

    ■記述例

    ■表示結果

    bodyのページ全体の文字色と背景色

    文字色と背景色が指定した色になっているのがわかります。

    2.bodyのリンク色

    リンク色もサンプルのコードで確認してみましょう。

    クリック前はオレンジ、クリック中は赤、クリック後はピンクになっているのがわかります。

    ■表示結果

    bodyのリンク色

    bodyタグでのonloadの使い方

    ブラウザがWebページを読み込んだ際に、何かしらの処理を実行したい場合はbodyタグの中で「onLoad」を使います。

    ■記述方法

    サンプルコードで動きを確認してみましょう。

    このコードでは、ページが読み込まれた際にwindowが表示されるような仕組みになっています。

    ページを開いてみると、次のような結果になるでしょう。

    ■表示結果

    bodyタグでのonLoadの使い方

    bodyタグは複数使える?

    bodyタグを複数使っても大丈夫でしょうか?

    bodyタグは、html要素の中で1つだけ使用可能です。複数使うのはやめましょう。

    ポテパンダの一言メモ

    headタグとbodyタグは「htmlタグの中で1つだけ」と覚えておきましょう。

    bodyタグでstyle要素を記述可能

    bodyタグでstyle要素を記述することも可能です。

    style要素を追加したい場合は、次のように記述します。

    bodyタグのcolor(背景色)を変更してみる

    サンプルコードで確認してみましょう。

    表示結果は、「1.bodyのページ全体の文字色と背景色」と同じになっているかと思います。

    このstyle要素の記述方法は、bodyタグ以外にも利用可能です。(divタグ、pタグ、aタグなど)

    bodyタグでheightを100%にしても効かない場合の対処法

    heightを100%にしても、画面の高さ100%にならないんです…。

    もしかしたら、htmlタグとbodyタグを100%で指定していないのが原因かもしれません。

    ページ内にある要素を画面の高さ100%で表示させたいのにうまくいかない、と悩む人もいるかもしれません。

    そんな時は、htmlタグとbodyタグのheightを100%で指定してみるとよいです。

    サンプルコードで確認してみましょう。

    次のコードは期待した表示にはならない、正しくないソースコードです。

    ■誤ったソースコード

    ■表示結果

    bodyタグでheightを100%にしても効かない場合の対処法

    max-heightクラスの背景色(青)を画面いっぱいに表示させたいはずが、文字の高さまでにしかなっていません。

    このソースコードの6行目に「html」を追加することで、期待した表示になります。

    ■正しいソースコード

    ■表示結果

    bodyタグでheightを100%にしても効かない場合の対処法

    青の背景色が画面いっぱいに表示されるようになりました!

    heightは%で指定すると、「htmlの親要素のheight」を基準にして値が計算されます。

    今回の場合でいうと、max-heightの親要素がbody、bodyの親要素がhtmlという形です。

    正しくないソースコードの場合は、bodyの親要素であるhtmlの高さが指定されていなかったため、計算がうまくできていなかったということになります。

    heightを%で指定する場合は、親要素まで高さを指定するように気をつけましょう!

    bodyタグで全体を中央(center)寄せにする方法は?

    bodyタグで全体を中央寄せにするには、marginの左右を「auto」で指定します。

    サンプルコードで表示を確認してみましょう。

    ■表示結果

    bodyタグで全体を中央(center)寄せにする方法は?

    bodyタグの中にある要素が中央寄せになっているのがわかります。

    テキストも中央寄せにしたい場合は、textクラスを「text-align: center;」で指定すればOKです。

    align属性について詳しく知りたい場合は、次の記事を参考にしてみるといいかもしれません。

    【関連記事】

    ▶︎【HTML】align属性の使い方まとめ(center/right/left)

    まとめ

    HTMLのbodyタグについて解説しました。

    bodyタグは、HTML文書の内容を示す重要な要素のひとつです。

    属性の指定にはさまざまなやり方・方法がありますが、スタイルシートでの指定が推奨されています。

    背景色やリンク色の変更だけでなく、onLoadで動きや処理を変えることも可能です。

    ぜひ、bodyタグの使い方をこの記事でマスターしてコーディングしてみてください!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE