bodyタグとは
bodyタグは実際にWebページに表示される内容を書く部分です。
見出しやテキスト、画像、リンクなどユーザーから見える部分はすべてbodyタグ内に記載します。
bodyタグはWebページ上で1ページにつき1つしか使用することができません。
HTMLの構造は以下のようになっています。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>ここには文章を入れる</p>
</body>
</html>また、実際にホームページを作る際には、bodyタグの中にheader、main、footerを入れることになります。
上記の画像のように画面上部のメニューがヘッダー、下部がフッター、ヘッダーとフッターの間にあるコンテンツがメインの部分になります。
Webページに表示するためにこれらはすべてbodyタグの中に書きます。
bodyタグの属性
この章では、bodyタグに使える属性を紹介します。
しかしスタイルを属性で設定することは非推奨ですので、CSSを使うようにしましょう。
使うことはないかもしれませんが、簡単に紹介しておきます。
background
backgroundは背景画像を指定する属性です。
background.jpgという画像を用意し、背景に設定する場合は以下のように記載します。
<body background="background.jpg">bgcolor
bgcolorは背景色を指定する属性です。
例えば、背景色を白にする場合は以下のように記載します。
<body bgcolor="#ffffff">text
textはテキストの色を指定する属性です。
文字を黒にしたい場合は以下のように記載します。
<body text="#000000">link
linkは未訪問のリンクの色を指定する属性です。
リンクの文字色を青にしたい場合は以下のように記載します。
<body link="#0000ff">alink
alinkは選択された直後のリンクの色を指定する属性です。
リンクの文字色を赤にしたい場合は以下のように記載します。
<body alink="#ff0000">vlink
訪問済みのリンクの色を指定する属性です。
リンクの文字色を紫にしたい場合は以下のように記載します。
<body vlink="#800080">onload
ページが読み込まれたときに実行する関数を指定する属性です。
例えばWebページを開いたときに「Hello World」というメッセージを表示させたい場合、以下のように記載します。
<body onload="windowopen()">
<script>
function windowopen(){
alert("Hello World");
}
</script>
</body>
bodyタグをCSSで装飾する
上記で紹介した属性やさまざまな装飾をCSSで設定してみましょう。
フォントを設定する
ここではbodyタグでページ全体のフォントを設定する方法を紹介します。
フォントと聞くとどんなものをイメージしますか。
よく見るものだと、ゴシック体や明朝体でしょうか。
CSSでフォントを設定するには、もちろん「ＭＳ 明朝」や「ＭＳ ゴシック」を使うことも可能ですが、スマートフォンなどデバイスによって対応していないこともあるため、「sans-serif」や「serif」を使うのが主流です。
書き方は以下の通りです。
▼CSS
/*ゴシック体系の場合*/
body{
font-family: sans-serif;
}
/*明朝体系の場合*/
body{
font-family: serif;
}色を付けてみる
今度はbodyタグで、ページ全体の文字や背景に色を付けてみましょう。
CSSでは、文字色は「color」、背景色は「background-color」を使います。
以下は文字色が濃い緑、背景色が淡いオレンジの例です。
▼CSS
body{
color: #47885e;
background-color: #ffe5cc;
}背景画像を設定する
CSSで背景画像を設定することもできます。
書き方は以下の通りです。
▼CSS
background: url(ここに画像のURLを入れる);例えばimagesフォルダにback.jpgという画像がある場合には「images/back.jpg」と書きます。
リンクの設定方法は以下の記事で紹介していますので、参考にしてみてください。
HTMLの「a href」の使い方は？オシャレなリンク作成法あり
しかし、このままだとスクロールすると同時に画像が繰り返し表示されてしまいます。
画像のサイズによっては縦にも横にも画像がたくさん表示されます。
繰り返して表示したい場合はこのままでいいのですが、画面幅に合わせて固定したい場合はさらに設定しましょう。
追加するのは以下の2行です。
▼CSS
body{
background: url(images/back.jpg);
/*▼以下の2行*/
background-attachment: fixed; /*画像を固定する*/
background-size: cover; /*画像を画面いっぱいに表示する*/
}
bodyタグで中央揃えする方法
bodyタグでいろいろな装飾ができるようになりましたね。
しかし、bodyの中には文字や画像、リンクなどさまざまなコンテンツがありますよね。
この章では、コンテンツを中央揃えする方法を紹介します。
body内の要素を中央寄せする方法は以下の通りです。
▼CSS
body{
text-align: center;
}これで中央寄せにはできますが、以下の図のようにボックスは中央寄せしたいけど、文章は左寄せにしたい！というときもありますよね。
「text-align: center;」だけを指定した場合、結果は以下の図のようになります。
中央寄せにしたいボックスは左のままで、左寄せにしたい中の文章が中央になっています。
こちらのHTMLとCSSを見てみましょう。
CSSではコンテナの部分に幅を500px、高さは文章の高さに自動で合わせる、背景色を付けるという設定をしています。
▼HTML
/*HTMLやbodyなどは省略しています*/
<div class="container">
<p>左寄せの文章</p>
</div>▼CSS
body{
text-align: center;
}
.container{
width: 500px;
height: auto;
background-color: #ffe5cc;
}ここからコンテナを中央寄せ、文章を左寄せにするためCSSを追加します。
コンテナ自体を中央寄せにするには「margin-left: auto;」と「margin-right: auto;」を使います。
これを追加することで、コンテナ外の左右の余白が均等になります。
また、文字を左寄せにしたいので、bodyで指定した「text-align」をコンテナの部分だけ「left」にしてみましょう。
追加したCSSは以下の通りです。
▼CSS
.container{
width: 500px;
height: auto;
background-color: #ffe5cc;
/*▼以下追加部分です*/
margin-left: auto;
margin-right: auto;
text-align: left;
}これでボックスは中央寄せ、文章は左寄せになったはずです。
まとめ
bodyタグの使い方や装飾方法は学べたでしょうか。
Webページを作る際に、必ず使うbodyタグだからこそ、基本をしっかりおさえておいてほしいと思います。
また、中央寄せにする方法はたくさんのWebページを作る中で、つまづきやすいポイントです。
迷ったら、どの要素を中央に寄せたいのか、この記事を参考に考えていただけると嬉しいです。
勉強中のみなさまのヒントになることを願っております。
コメント