パソコンQ&A

テーブルレイアウトからスタイルシート(CSS)レイアウトに ソース[STEP21 CSS(base.css)]

>説明のページへ戻る


>前のソース
>HTML文書
>スタイルシートbase_ie5.css

html {
  width: 100%;
}
body {
  background-color: #000;
  margin: 0;
  padding: 0;
  width: 100%;
}

#allcontent {
  width: 760px;
  margin: 0 auto;
}
#head {
  width: 760px;
  margin: 0;
  padding: 0;
}
#contents {
  width: 760px;
  margin: 0;
  padding: 0;
}
#foot {
  width: 760px;
  margin: 0;
  padding: 0;
}

#head ul{
  list-style-type : none;
  margin: 0;
  padding: 0;
}
#head li{
  list-style-type : none;
  margin: 0;
  padding: 0;
  float:left;
  text-indent: -9999px;
  font-size:0;
  line-height: 0;
}

h1#logo_top {
  margin: 0;
  padding: 0;
  float:left;
  text-indent: -9999px;
  font-size:0;
  line-height: 0;
}
h1#logo_top a {
  text-decoration: none;
  display: block;
  width: 135px;
  height: 65px;
  background: transparent url(../img/logo_2.gif) 0 0 no-repeat ;
}

li#menu1 a,li#menu2 a,li#menu3 a,li#menu4 a,li#menu5 a {
  text-decoration: none;
  display: block;
  width: 125px;
  height: 65px;
}

li#menu1 a {
  background: transparent url(../img/menu_1s.gif) 0 0 no-repeat ;
}
li#menu2 a {
  background: transparent url(../img/menu_2s.gif) 0 0 no-repeat ;
}
li#menu3 a {
  background: transparent url(../img/menu_3s.gif) 0 0 no-repeat ;
}
li#menu4 a {
  background: transparent url(../img/menu_4s.gif) 0 0 no-repeat ;
}
li#menu5 a {
  background: transparent url(../img/menu_5s.gif) 0 0 no-repeat ;
}

h1#logo_top a:hover,li#menu1 a:hover,li#menu2 a:hover,li#menu3 a:hover,li#menu4 a:hover,li#menu5 a:hover {
  background-position: 0 -70px;
}

h2#mainimg {
  margin: 0;
  padding: 0;
  text-indent: -9999px;
  font-size:0;
  line-height: 0;

  display: block;
  width: 760px;
  height: 200px;
  background: transparent url(../img/top_img.gif) 0 0 no-repeat ;
}
#info ul{
  list-style-type : none;
  margin: 0;
  padding: 0;
}
#info li{
  list-style-type : none;
  width: 380px;
  margin: 0;
  padding: 0;
  float:left;
  text-indent: -9999px;
  font-size:0;
  line-height: 0;
}

li#corp_outline a {
  text-decoration: none;
  display: block;
  margin-left: auto;
  width: 75px;
  height: 20px;
  background: transparent url(../img/info_1_3.gif) 0 0 no-repeat ;
}
li#inq a {
  text-decoration: none;
  display: block;
  margin-right: auto;
  width: 97px;
  height: 20px;
  background: transparent url(../img/info_2_3.gif) 0 0 no-repeat ;
}

li#corp_outline a:hover,li#inq a:hover {
  background-position: 0 -25px;
}
#copyright {
  clear:both;

  margin: 0;
  padding: 0;
  text-indent: -9999px;
  font-size:0;
  line-height: 0;
}
#copyright a {
  text-decoration: none;
  margin: 0 auto;
  display: block;
  width: 125px;
  height: 20px;
  background: transparent url(../img/copyright_3.gif) 0 0 no-repeat ;
}
#copyright a:hover {
  background-position: 0 -25px;
}

△上に戻る

このページはリンクフリーです。設定などは自己責任で…
Copy Right kikky

kikky.net