Web ページの外側の背景色の指定

Web ページの横幅を指定した場合の Web ページの外側の背景色を指定する方法です。簡単そうですが、はまる場合がありますので、あえて説明することにしました。
body は、ブラウザに表示する本文を書くところです。横幅を指定しなければ、ブラウザで表示した全体が body となります。横幅を指定すると、指定した横幅の内側が body となりますが、background-color は指定しても、指定幅に無関係になるようです。 したがって、Web ページの横幅を指定して Web ページの外側の背景色を指定したい場合は、body 内に div 要素指定をし、body の横幅は指定せず、div 要素の横幅を指定します。こうすることによって、Web ページ内の背景色は、div 要素で、Web ページの外側の背景色は、bodyで指定することができます。

Web ページの外側の背景色のサンプル

次に、Webページの外側の背景色を指定するサンプルを示します。body 内の div 要素指定で横幅指定をして body で背景色を指定すれば上手くいきますが、body で横幅を指定した場合は上手くいきません。プルダウンメニューでCSS を切り替えられますので、ご自分のブラウザで確認してみてください。
サンプル: 背景色のサンプル

Web ページの外側の背景色のサンプルのソースコード

今回のサンプルのソースコードは、次の通りです。body.css は、body で横幅を指定指定、body_out.css は div 要素の横幅を指定しています。
ソースコードには、CSS の切り替え部分が多くなってしまいましたが、<body> と <div id="page_color"> 要素のところだけ、注目してくださいね。

背景色を指定するソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta http-equiv="content-style-type" content="text/css">
<link  href="body.css" rel="stylesheet" type="text/css" id="mystyle">
<script type="text/javascript"><!--
   function changesytle(cssfile) {
      document.getElementById('mystyle').href = cssfile;
   }
// --></script>
<title>Webページの外側の背景色</title>
</head>
<body> 
<div id="page_color">
<h1>Web ページの外側の背景色を指定</h1>
<p>Web ページの外側の背景色を指定指定します。body で横幅指定指定した場合は、ページの内側と外側が区別できませので、div で横幅指定します。スタイルの変更で、スタイルシートを切り替えて確認してください。</p>

スタイルの変更:<br>
<select onchange="changesytle(value);">
   <option value="body.css">body で横幅指定</option>
   <option value="body_out.css">div で横幅指定</option>
</select>

</div>
</body>
</html>

body.css のソースコード

@charset "utf-8";
body { width:300px; background-color:yellow;}

body_out.css のソースコード

@charset "utf-8";
body { background-color:blue;}
#page_color { width:300px; background-color:yellow; }

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > CSS > ページの外の色