初心者向けHTML入門の決定版:タグHTML

装飾する(body全体部分)

Facebook にシェア
このエントリーをはてなブックマークに追加
Tweet

全体調整を行う

全体を左右中央表示にする

現在の表示を確認すると、文書全体の上と左に余白が確認できます。また、全体がブラウザの左側に寄って表示されています。これを、全体の余白なし、ブラウザの左右中央に表示される用に変更します。

body {
	margin: 0; /* 外側余白なし */
	padding: 0; /* 内側余白なし */
}
wrapper {
	width: 800px;
	margin: 0 auto; /* 左右中央表示 */
}

wrapperが左右中央表示になることで、wrapperブロックに包括されるheader、main、footerも結果として左右中央に表示されることになります。

デフォルトスタイルシートについて

自分で何もスタイルシートの設定をしていないのに、何かしらの装飾が行われているケースがあります。例えば、h1要素を使用したとき、自分でスタイルを設定しなくても太字、かつ大きめのフォントサイズになるはずです。ユーザエージェント(ブラウザなど)は、最初から標準でスタイルシートを設定しています。このブラウザが標準で設定しているスタイルシートのことを「デフォルトスタイルシート」と呼び、値はCSS仕様書に明記されています。

  • ブラウザが標準で持っているスタイル設定について

背景の設定

body要素に背景色を設定します。今回は落ち着いた色合いの #F7F8F2 を採用しました。

background-color: #f7f8f2;

今までわかりやすさのためだけにつけていたheader、main、footerの装飾(borderとbackground-color)を削除して、ここまでの様子を見てみましょう。

全体に装飾を行ったサンプル文書

今回はCSSに数行修正を加えただけで、HTMLファイルに修正を行ってはいません。


< 構造化を進めよう装飾する(header ロゴ部分) >

実践講座

  • 実際に作ってみよう 準備編
  • 簡単なルールを決めておこう
  • コーディング前に構想を練る
  • コーディング開始
  • head要素内を記述する
  • body要素内を記述する
  • 構造化を進めよう
  • 装飾する(body全体部分)
  • 装飾する(header ロゴ部分)
  • 装飾する(header メニュー部分)
  • メインビジュアルの設定
  • 装飾する(main部分 サービス)
  • 装飾する(main部分 リンク、お知らせ)
  • 装飾する(footer部分)

HTML要素(タグ)一覧

a  abbr  acronym  address  applet  area  b  base  basefont  bdo  big  blockquote  body  br  button  caption  center  cite  code  col  colgroup  dd  del  dfn  dir  div  dl  dt  em  fieldset  font  form  frame  frameset  h1 - h6  head  hr  html  i  iframe  img  input  ins  isindex  kbd  label  legend  li  link  map  menu  meta  noframes  noscript  object  ol  optgroup  option  p  param  pre  q  s  samp  script  select  small  span  strike  strong  style  sub  sup  table  tbody  td  textarea  tfoot  th  thead  title  tr  tt  u  ul  var  <!-- --> 

ブロックレベル要素一覧

p  h1-h6  ul  ol  dir  menu  pre  dl  div  center  noscript  noframes  blockquote  form  isindex  hr  table  fieldset  address 

インライン(テキストレベル)要素一覧

フォントスタイルに関するもの
tt  i  b  big  small
フレーズ・句に関するもの
em  strong  dfn  code  samp  kbd  var  cite  abbr  acronym
特別なもの
a  img  object  br  script  map  q  sub  sup  span  bdo
フォームに関するもの
input  select  textarea  label  button 

  • sitemap
  • 運営者情報
  • 免責事項
designed by ホームページ制作のササエル
Copyright © tagHTML All Rights Reserved.