上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

5/6に開催された 世界のクワガタ VS どたばた会議 ~オールスターペパボ感謝祭2010~ [前編][後編] 超大盛り上がりでした。どれくらい大盛り上がりだったかというとPodcastではすべてが伝わらないくらいの大盛況!というのも映像で楽しめた面もあるので、どーしても音だけでは物足りないんですよね… 今、記事を書くためにPodcastを聞きながら当日のことを思い出してるんですけど、今回はいつも以上にリアルタイムで視聴しているからこそ楽しめた場面があったと思います。Ust視聴者限定のプレゼントもありましたしね!

というわけで少しでも楽しさを伝えるためにピンポイントのになりますが画像をば。


まずはイントロ。いい笑顔です。


ペパボ側出演者 全員の集合写真


プレゼントの缶バッチ。欲しい!
ちなみに今回は後ろに映っているパンダのティッシュケースが大活躍してました。


これは公開していいものなのかどうかちょっと悩んだんですがホシさんのお茶目シーン
ちょっと刺激的(?)な画像となっているので気になる人は画像をクリック!

いかがだったでしょうか? 少しでも今日を持った人はどたばた会議をチェック!最近は平日に交代制でニュース的な内容で更新しているので放送がないときも楽しめますよ。twitterをやっているひとは是非とも@dotabataをフォローしましょう。Ustが始める前や記事が追加されたときにつぶやいてくれますし、ブログを持っていない人でもtwitterで応募できたりもしますので!
そういえば、自分も今回のUstをきっかけにhetemlを使い始めました。まだWordpressをインストールしただけでなにもやっていませんが、これから勉強をかねていろいろと使ってみようと思います!



スポンサーサイト

先日のセミナーを受けているときに「自分でもあとで作ろうと思っていたので、ざっくりと作ってみました。jQueryの実装にかかった時間は約30分。

HTML

	<dl id="accordion">
		<dt>サンプル1</dt>
		<dd>サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1サンプル1</dd>
		<dt>サンプル2</dt>
		<dd>サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2サンプル2</dd>
		<dt>サンプル3</dt>
		<dd>サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3サンプル3</dd>
	</dl>

CSS

#accordion{
	width: 400px;
	margin: 20px 0 0 20px;
}
#accordion dt{
	border:solid 1px #999;
	background: #ccc;
}
#accordion dd{
	display: none;
	height: 100px;
	border:solid 1px #999;
	border-top: none;
}
.selected{
	background-color: #f60 !important;
}

jQuery

$(function(){
 $("dl#accordion dt").click(function(){
  $("dl#accordion dt").removeClass("selected");
  $(this).addClass("selected");
  if( $(this).next().css("display") == "none" ){
   $('dl#accordion dd').slideUp('fast');
   $(this).next().slideDown('fast');
  }else{
   $(this).removeClass("selected").next().slideUp("fast");
  }
 });
});

今回はdt要素を隠すために全てCSSでdisplay:none;とやっていますが、これだとJavaScriptを無効にしている人には一切dd要素を表示できない状態になってしまうので、実際に使う場合にはCSSにdisplay:none;と記述するのではなく $("#accordion dd").css("display","none");という形でスクリプト側でCSSを設定したほうがユーザーに優しいUIになると思います。

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。