SaCSS vol.5を終えて

2009/09/03

カテゴリ：: コーディング勉強会

タグ：: SaCSS; 勉強会; セミナー; 札幌

SaCSS vol.5を終えて

SaCSSも５回目が終了いたしました。今回も参加していただいた皆さん、ありがとうございました。満席で当日を迎えることができました。席が狭くてすみません＞＜今後の様子をみて、会場を広くしていけたらな、なんてことを思っていたりますが、もうしばらくは現状維持が妥当かなーなんて思っていたりもります。

それにしても、今回はアンケートを忘れてしまい、急遽白紙に感想を書いてもらうなんてことで対応いたしました。急なことであったにも関わらず、皆さん書いていただき、ありがとうございます！

セッション１の資料

資料というか、ソースです

■サンプルHTML

<div id="wrap">

<div id="div1">←350px→</div>

<table id="table1">
<tr>
<th>あ</th>
<td>td</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
</table>

<table id="table1">
<tr>
<th>あ</th>
<td>td</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
</table>

<table id="table2" cellspacing="10">
<tr>
<th>あ</th>
<td>td</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
</table>

<table id="table1" class="type2">
<tr>
<th>あ</th>
<td>td</td>
</tr>
<tr>
<th>あああ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
</table>

<table id="table1" class="type2">
<tr>
<th>あ</th>
<td>td</td>
</tr>
<tr>
<th>ああああ</th>
<td>tdttd</td>
</tr>
<tr>
<th>あ</th>
<td>tdttd</td>
</tr>
</table>

<table id="table1" class="type2">
<tr>
<th>あああああああ</th>
<td>td</td>
</tr>
<tr>
<th>ああああ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
<tr>
<th>あ</th>
<td>tdtdtdtdtdtdtd</td>
</tr>
</table>


</div>

■サンプルCSS

/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

#wrap {
	margin: 50px auto;
	width: 500px;
}

#div1 {
	width: 350px;
	height: 20px;
	background: #FCC;
}


table#table1 {
	margin: 10px 0;
	width: 350px;
	border-collapse: separate;
	border-spacing: 0;
	border: solid #CCC;
	border-width: 1px 0 0 1px;
}
table#table1 th,
table#table1 td {
	border: solid #CCC;
	border-width: 0 1px 1px 0;
}
table#table1 th {
	background: #CCC;
}

* html table#table1 {
	border-collapse: collapse;
}
/* IE7 Only */
*:first-child + html #xxxxx {
}


table#table1.type2 th {
	white-space: nowrap;
}

table#table1.type2 td {
	width: 100%;
}


table#table2 {
	position: relative;
	margin: 10px -10px;
	width: 370px;
	border-collapse: separate;
	border-spacing: 10px;
}
table#table2 th,
table#table2 td {
	border: 3px solid #CCC;
}

以上、大杉さんのセッションでした。

これだけを見ると、何をしていたのだろう？という感じですね(汗)今回はtableにCSSをクロスブラウザ対応で設定する方法についてのあれこれでした。

大杉さんへの反省としては、声大きくお願いします(笑)