スポンサーサイト

全体をallで囲む

スタイルシート部分で全体を<div id = "all">で囲みます。全体幅を100%にし、画面一杯に表示させます。また、囲った全体のテキストの左揃えし、背景色を白に指定しています。

HTML部分ではスタイルシート部分で宣言したallを適用させています。

スタイルシート部分

#all {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  background: #ffffff;
}

HTML部分

</head>
<body>
<div id= "all">
</div>
</body>
</html>

スタイルシート・セレクタ別解説

width: 100%

幅を指定。ここでは100%にしています。

margin: 0 auto

マージンは、ボックス領域外側と他の領域との間隔を指定します。ここではウィンドウ領域との間隔の事を指し、0とする事で画面一杯に使用します。autoは状態に応じて自動的に設定されるもので、左右にautoを指定すると中央揃えになります。

text-align: left

テキストを全体的に左揃えにします。各部分で個別に指定されている場合はそちらが適用されます。

background: #ffffff

全体の背景色を指定します。ここでは白にしています。各部分で指定するとその部分だけ背景色が変わります。

ゼロから創るテンプレートトップ

  1. bodyタグ
  2. 全体のリンク色
  3. 全体のレイアウト
  4. 全体をallで囲む
  5. h1-ブログタイトル部分
  6. intro-ブログ紹介文部分
  7. body~introソース

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。