1p

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

大臣でも分かるCSSの[body]タグの書き方

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

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

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

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

HP-25-1

「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> 

豆知識

前へ  目次  次へ

免責事項・著作権表示

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

Copyright (C) SUZ45. All Rights Reserved.