THE HAM MEDIA BLOG

SaCSS vol.5を終えて

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
コーディング勉強会
タグ:
SaCSS
勉強会
セミナー
札幌

SaCSS vol.5を終えて

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

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

セッション1の資料

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

■サンプル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をクロスブラウザ対応で設定する方法についてのあれこれでした。

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

セッション2の資料

セッション2はjQueryについて

これから使ってみよう!とかまだあまりよくわからない、プラグインしか使ったことがない。。。という人向け。

スライド中に使ったデモ

アンケートの感想は

今回、前述していましたとおり、いつものアンケート用紙をすり忘れてしまい、白紙に感想を書いてもらうという、簡素な形をとらせていただきました。

しかし皆さん、しっかり書いてくださって、本当に感謝するばかりです!

中には運営についてなどのアドバイスもあり、自分では気づかないようなことも教えていただいたりして、助かります。次回以降に反映していけるよう、意識したり改善したりしていこうと思います!

jQueryについても質問がでていて、まだメール返せていません><申し訳ございませんがもうしばらくお待ちください。

次回はWordpress第2弾!

次回の内容はWordpressの第2弾を行います!カスタマイズ方法を勉強されたい方はぜひご参加ください。

なお、10月分も決まっておりまして、10月24日(土)に、今度はMovableTypeについての勉強会開催です!MTについては、本の協賛とかないかなーとか密かに願っていたり(えっw)本当にお願いしてみようかしら。。。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。