トップ　>　超初心者でも分かるホームページの作り方　>　超初心者でも分かるCSSの[body]タグの書き方

超初心者でも分かるCSSの[body]タグの書き方

はじめに

初心者向けに、CSSの[body]タグの書き方をレクチャーします。

CSSの[body]タグの書き方のテンプレート

body {
	width: 100%;		/* 横幅を画面いっぱいにする */
	max-width: 1000px;	/* 画面の横幅を決める */
	margin: 0 auto;		/* 余白の指定 */
}

「margin」を、「0　auto;」にすると、中央表示になります。これを「hp01.css」に記載して、保存しましょう。そして、「hp01.html」をダブルクリックすれば、画面全体が、真ん中に集まります。

以下、出力画面です。

「viewport」をHTMLファイルに追加する

「/head」の前に、「<meta name="viewport" content="width=device-width">」を追加すると、スマホでもパソコンでも綺麗に表示されるようになります。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ホームページ作成中</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="hp01.css">
</head>
<body>


</body>
</html>

豆知識

「body」タグすべてに適応されるので、設定は、慎重に行いましょう。
画面の横幅は、パソコンの場合で、スマホなどでは、もっと狭く表示されてしまいます。そこで、色々な工夫が必要になります。「viewport」も、その一つです。

前へ　　目次　　次へ

免責事項・著作権表示

情報が古かったり、間違っていることなどによる損害の責任は負いかねますので、ご了承ください。