Doge log

Abby CTO 雑賀力王のオフィシャルサイトです

CSS 目覚めの一歩　その2

技術

全部tableでガチガチなんて＞＜
CSS次第ではlistを縦にも横にも配置できるのに。
その例。

list.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Untitled Document</title>
        <!-- 縦レイアウト用CSS-->
        <style type="text/css">@import url('./base.css');</style>
	</head>
	<body>
	  <div id="list">
	    <ul>
	      <li><a href="#">ほげほげ１</a> </li>
	      <li><a href="#">ほげほげ２</a> </li>
	      <li><a href="#">ほげほげ３</a> </li>
             </ul>
	   </div>
	</body>
</html>

まずは縦

base.css

#list{
  width:120px;
}

#list ul{
  list-style:none;  
  margin: 0;
  padding: 0;
  border-top:1px solid #CCCCCC;
  background:#CC0000 left center no-repeat;
}

#list li{
  margin:0;
  padding:0;
  border-bottom:1px solid #CCCCCC;
  background:#CC0000 left center no-repeat;  
}

#list a{
  padding:4px 0 4px 10px;
  background:#FFFFFF left center no-repeat;  
  display:block;
  width:120px;
  color:#333333;
  text-decoration:none;
}

#list a:hover{
  color:#FFFFFF;
  background-color:transparent;
}

次に横（htmlでcssを切り替えて表示してみてください）

base2.css

#list{
  width:300px;
}

#list ul{
  list-style:none;  
  height:24px;
  margin: 0;
  padding: 0;
  border-top:1px solid #CCCCCC;
  background:#CC0000 left center no-repeat;
}

#list li{
  float:left;
  width:100px; 
  margin:0;
  padding:0;
  border-bottom:1px solid #CCCCCC;
  background:#CC0000 left center no-repeat;  
}

#list a{
  padding:6px 0 6px 0;
  background:#FFFFFF left center no-repeat;  
  display:block;
  width:100px;
  color:#333333;
  text-decoration:none;
  text-align:center;
}

#list a:hover{
  color:#FFFFFF;
  background-color:transparent;
}

擬似クラスは使わなくてもいいけど使ってみた。
ハックも使ってないのでIEが古いとびみょーかな？
これで言えることはtableを使わなきゃ縦、横自由に配置できるって事だ。
（せめてdiv、spanで出力すべきだろね。）
tableを決して使ってはいけないって事じゃなくてtable使わなくてもいいところに使うなって事だなあ。
もっというとXHTMLのタグをちゃんと適切に使えと！
（div厨になられるのも辛い＞＜）
でCSS 目覚めの一歩　その2

DRY(何度もタグのstyleに同じ事を書かない。selectorで子要素にも適用させる）
div、spanでtableっぽく振る舞わせる
リストはul、liを使う
display:blockで範囲を広げる
CSSを外した場合でもある程度わかるように正しくHTMLのタグを使う

これで君もデザイナになれる！
うくく。