HTML/CSS

HTMLのbody要素とは?【メイン部分を実装していこう】

2021年1月13日

HTMLのbody要素とは?【メイン部分を実装していこう】と書かれた画像

 

あなた
HTMLのheader要素の意味はわかりました。次はbodyを知りたいです。

 

これまではプログラミング未経験者の方に向けてHTMLとCSSの意味やWEBページの基本を解説してきました。

前回はHTMLのheader要素について解説しましたね。

 

今回からはついにHTMLのメインであるbody要素について解説していきます。

 

ちなみにこの記事は連載記事の1つです。こちらから学習を進めておいてください。

>>HTMLとCSSの学習ステップ一覧はコチラ

 

【この記事でわかること】

HTMLのbodyの書き方

 

【この記事の信頼性】

この記事を書いている僕は現役のWEBエンジニアです。

普段からHTMLとCSSを使ってWEBページを制作しています。

 

ではさっそく見ていきましょう。

 

HTMLのBody要素とは

 

あなた
HTMLのBody要素って何ですか?

 

Body要素とはHTMLファイルで<body></body>に囲まれた部分のことです。

ここではBody要素の基本について解説します。

 

 

【この章でわかること】

✔ Body要素について

 

Body要素はページの全体の見た目部分

 

HTMLのBody要素とは簡単に言えばページの全体を表すものです。

>>HTMLとCSSとWEBページの関係性【理解できます】

上記記事で使ったコードをそのまま使います。

 

HTMLのBody部分によって表示されるのは赤線で囲まれた部分です。

 

デモサイトのbody要素部分

 

試しにtest.htmlというHTMLファイルを作成してみましょう。

コードは以下です。

 

test.html

<!doctype html>
<html>

<head>
<title>テストサイト</title>
<metacharset="utf-8">
<linkhref="style.css"type="text/css"media="all">
</head>

<body>
</body>

</html>

 

ファイルをクリックして表示させてみてください。

するとBodey要素が空なので真っ白な画面が表示されるはずです。

 

あなた
間違えたかと思いました。
正常です。
てんし君

 

ではBody要素に1つ付け足してみましょう。

 

test.html

<!doctype html>
<html>

<head>
<title>テストサイト</title>
<metacharset="utf-8">
<linkhref="style.css"type="text/css"media="all">
</head>

<body>
<p>Hello</p>
</body>

</html>

 

画面に「Hello」という文字が表示されたはずです。

このようにすべてのWEBページの見た目はBody要素の中に書かれたコードからできあがっています。

 

・Body要素はページの全体の見た目

 

HTMLのBody要素を実装してみよう

 

index.htmlというファイルを作ってBody要素を追加しましょう。

cssというフォルダを作って中にstyle.cssというcssファイルを作っておいてください。

ファイルの中身は空でOKです。

css/style.css

(中身は空)

 

やり方がわからない方はこちらを参考にしてください。

>>HTMLでCSSを読み込む方法

 

<!doctype html>
<html>

    <head>
        <title>テストサイト</title>
        <metacharset="utf-8">
            <linkhref="css /style.css"rel="stylesheet" type="text/css" media="all">
    </head>

    <body>
        <divid="container">
            <header>
                <divid="Logo_area">
                    <h1>
                        <ahref="#">デモサイト1</a>
                            <h1>
                                </div>
                                <divid="Navi_area">
                                    <ul>
                                        <li>
                                            <ahref="#">DEMO1</a>
                                        </li>
                                        <li>
                                            <ahref="#">DEMO2</a>
                                        </li>
                                        <li>
                                            <ahref="#">DEMO3</a>
                                        </li>
                                        <li>
                                            <ahref="#">DEMO4</a>
                                        </li>
                                    </ul>
                                    </div>
            </header>
            <main>
                <imgsrc="images /MainImage.png"alt="メイン画像">
                    <divid="Side_navi">
                        <ul>
                            <liid="navi01">
                                <h2>
                                    <ahref="#">トップ</a>
                                </h2>
                                </li>
                                <liid="navi02">
                                    <h2>
                                        <ahref="#">デモサイト集</a>
                                    </h2>
                                    </li>
                                    <liid="navi03">
                                        <h2>
                                            <ahref="#">学習</a>
                                        </h2>
                                        </li>
                                        <liid="navi04">
                                            <h2>
                                                <ahref="#">制作実績</a>
                                            </h2>
                                            </li>
                                            <liid="navi05">
                                                <h2>
                                                    <ahref="#">お問合わせ</a>
                                                </h2>
                                                </li>
                        </ul>
                        </div>
                        <divid="Main_box">
                            <divclass="MainBox_item">
                                <divclass="MainTitle">
                                    <h2>注目記事</h2>
                                    </div>
                                    <divclass="MainBox_news">
                                        <p>2020年8月12日 <ahref=""#>サイトを解説しました</a></p>

                                        <p>デモサイトを公開しました。</p>
                                        </div>
                                        </div>

                                        <divclass="MainBox_item">
                                            <divclass="MainTitle">
                                                <h2>新着情報  [NEWS]</h2>
                                                </div>

                                                <divclass="MainBox_news">
                                                    <p>2020年8月13日 <ahref=""#>1記事目</a></p>

                                                    <p>自己紹介です。</p>
                                                    </div>

                                                    <divclass="MainBox_news">
                                                        <p>2020年8月14日 <ahref=""#>2記事目</a></p>

                                                        <p>デモサイト1を公開しました。</p>
                                                        </div>

                                                        <divclass="MainBox_news">
                                                            <p>2020年8月15日 <ahref=""#>2記事目</a></p>

                                                            <p>デモサイト2を公開しました。</p>
                                                            </div>

                                                            <divclass="MainBox_news">
                                                                <p>2020年8月16日 <ahref=""#>2記事目</a></p>

                                                                <p>デモサイト3を公開しました。</p>
                                                                </div>

                                                                <divclass="MainBox_news">
                                                                    <p>2020年8月17日 <ahref=""#>2記事目</a></p>

                                                                    <p>デモサイト4を公開しました。</p>
                                                                    </div>
                                                                    </div>

                                                                    <divclass="MainBox_item">
                                                                        <divclass="MainTitle">
                                                                            <h2>最新のブログ記事 [BLOG]</h2>
                                                                            </div>

                                                                            <divclass="MainBox_news">
                                                                                <p>WEBサイト案件で稼げるようになりました。</p>
                                                                                </div>
                                                                                </div>
                                                                                </div>
                                                                                <divid="Banner_box">
                                                                                    <ahref="#">
                                                                                        <imgsrc="images
                                                                                            /test1.jpg"class="side_image"
                                                                                            alt="1"></a>
                                                                                            <ahref="#">
                                                                                                <imgsrc="images
                                                                                                    /test2.jpg"class="side_image"
                                                                                                    alt="2"></a>
                                                                                                    </div>
            </main>
            <footer> © 2016 Tenshikun All rights reserved.</footer>
            </div>
    </body>

</html>

 

この<body>から</body>に囲まれているのがbody要素です。

 

ファイルを表示させてみましょう。

 

htmlだけで表示された画像

 

たくさんの見た目部分が表示されましたね。

ただしcssで何も装飾していないのでデザインは何もできていません。

指定している画像も準備していないので表示されていません。

 

次回からはそれぞれの部分をcssでデザインしてだんだんWEBページっぽい見た目にしていきます。

 

今回はここまでです。

ありがとうございました。

 

HTMLとCSSの教材をまだ準備していない方は準備しましょう。

>>HTMLとCSSのオススメ教材を紹介【失敗しない】

 

学習ステップの全体はコチラ

>>HTMLとCSSの学習ステップ一覧

 

プログラミングスクールに関する情報

2021年最新プログラミングスクール おすすめランキング 【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきまし ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。 1位:テックキャンプ  【転職成功率 ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   エンジニアを目指すにあたってまず最初に自社開発企業への転職を希望する方がほとんどです。 ...

続きを見る

プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】と書かれた画像
プログラミンングスクールに無料で通うならココ【現役エンジニアおすすめ】

  あなたプログラミングスクールに通いたいけどどのスクールも何十万もして通えません。コスパよくエンジニアになれるスクールはありますか?   今回はコスパが良いどころか完全に無料でプ ...

続きを見る

-HTML/CSS

© 2021 エンジニアてんし君ブログ