えっと、「ネコる。」っていいます。
簡単に言うと、イベントなんかを行う団体です。
http://www.necor.net

まだまだ、立ち上げたばかりで、何をするか決めてませんが、今から面白いことを始める予定です。
是非是非ご期待下さい！

作ろうとしているのは、テニスサークルのスケジュール管理システムです。
参加者数まで管理できるようにしたいと思っております。
いつになるかは分かりませんが、そのうち完成させますよ☆

floatは要素を回り込ませる。
clearは回り込みを解除させる。

ザックリ言うとそんな感じなのですが、厳密に言うと違っているのです。詳しい説明については、以下のページを参考にして下さい。

• CSS2リファレンス－フロート
• CSS2仕様書－浮動体の位置決め (float特性)
• てんぽ: floatは「回り込み」ではない

上記サイトによると、「floatとは、通常の流れ（normal flow）から取り除き、右または左に寄せる。」となっています。なにやら、難しい表現ですが、こんな書き方しかないので、仕方ないですね(^^ゞ
厳密なデザインをする上では、上記のサイトに掲載されているルールを正確に理解しておかないと、色々とやっかいな問題が起こってきます。 ただし、今回はその辺をはしょって、簡単な説明をしておきますね。

段組レイアウトをする際にはfloatを使って要素を回り込ませます。

<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
</div>

↓上記表示例↓

<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
<div style="width: 400px; background-color: #ff6; text-align: center;">Cpyright © S.T all rights reserved.</div>
</div>

こう書いてみたらどうでしょう。

copyrightまでが右に回り込んじゃってますよね。お使いのブラウザがInternetExplorerの場合は、もしかしたら、回り込まずに下に表示されているかも知れません。ただし、これは言ってみればInternetExplorerのバグなのです。
これも、webに携わる方ならご存じの方が多いと思いますが、あえて書きます。FirefoxやSafari等モダンブラウザと言われているブラウザでは、W3Cに基づくweb標準で解釈しますが、InternetExplorerでは、HTMLやCSSをちょっと違う解釈で読んでしまうことがあります。勿論モダンブラウザでも違う解釈をすることがあるのですが、InternetExplorerは少し特殊と言えるでしょう。
ただ、少し前までは、ユーザーの大半がInternetExplorerだったため、あまり気にする必要はなかったのですが、現在ではモダンブラウザが結構普及してきたために、インターネットの閲覧環境によって見え方が違うという問題が生じてきたのです。

さて、話を本題にもどしまして、では上記の場合どうしたらいいかということを解説します。その時に利用するのが、clearプロパティなのです。clearはfloatによっる回り込みを解除してくれるプロパティです。ですので、floatが設定されている要素の直後の要素に設定することで、回り込みを解除してくれるのです。

<div style="width: 400px;">
<div style="float: left; width: 100px; background-color: #ff9;">左側のボックスです。</div>
<div style="float: right; width: 300px; background-color: #ff3;">右側のボックスです。</div>
<div style="clear: both; width: 400px; background-color: #ff6; text-align: center;">Cpyright © S.T all rights reserved.</div>
</div>

↓上記表示結果↓

これが、要素の回り込みの簡単な説明です。最初にも記述しましたが、正確には、

floatは文字の回り込み
clearはfloatの解除

ではありません。きちんと理解したい方は、最初にあげた3つのサイトをしっかりと読んでみてください。

また、floatを解除する方法にclearfixと呼ばれている方法もあります。
この方法は、floatする要素の親要素にafterの擬似要素を見えないようにブロック要素として入れて、この擬似要素でclearするという方法です。
詳しくはgoogleで調べて下さい。

何やら、人数が多くてにぎわってました(￣▽￣)

どうもストロークにしろボレーにしろ、ペースが落ちると下手に合わせようとしてミスが増えてしまうんだよなぁー(^_^;)
ナダルの真似をしようかと思い、ちょっと真似してみたら…腕が痛い。やっぱり筋トレしないとあんな打ち方できないっすね。

さて、今から、腹筋頑張ろう！

2010Wimbledon Championships Website
http://www.wimbledon.org

昨日は友達の家で男子シングルス決勝を見てました。

Rafael Nadal vs Tomas Berdych

ストロークになるとナダルを崩すところまでは、ベルディッチペースで進んでいくけど、 最後の最後でナダルのカウンターにやられる。。。
さすがNo1のナダル！！

セカンドセット、タイブレークになったら面白かったのに・・・と、個人的に思ってます！
最終的なスコアは、6-3，7-5，6-4とストレートでナダルが優勝を決めたけど、競った試合だったと思います。
このサマリーを見てもあと少し！

Match Statistics > Gentlemen’s Singles – Finals
http://www.wimbledon.org/en_GB/scores/stats/day21/1701ms.html

ジュニア女子の石津幸恵選手も惜しかったです。
セカンドセットをとった時には、いけるんじゃないか・・・と思いました。。。
トータルポイントでも88-82とホントに惜しい！

Match Statistic > Girls’ Singles – Finals
http://www.wimbledon.org/en_GB/scores/stats/day20/7601ms.html

2010Wimbledon Championshipsの結果

Gentlemen’s Singles：Rafael Nadal
Ladie’s Singles：Serena Williams
Gentlemen’s Doubles：Jurgen Melzer， Philipp Petzschner
Ladie’s Doubles：Vania King，Yaroslava Shvedova
Mixed Doubles：Leander Paes，Cara Black
Boy’s Singles：Marton Fucsovics
Girl’s Singles：Kristyna Pliskova
Boy’s Doubles：Liam Broady，Tom Farquharson
Girl’s Doubles：Timea Babos，Sloane Stephens
Gentlemen’s Wheelchair Doubles：Robin Ammerlaan，Stefan Olsson
Ladie’s Wheelchair Doubles：Esther Vergeer，Sharon Walraven

Wimbledon Championships Websiteより

Contact Form 7（日本語特設ページ）
http://contactform7.com/ja/

このプラグイン利用法はとっても簡単です。
まず上記サイトからプラグインをダウンロードし、ご自身のWordPressにインストールします。
そうすると、管理パネルに【お問い合わせ】という項目が追加されます。

【編集】を選択すると、Contact Form 7のカスタマイズ画面に移行します。

必要なカスタマイズを行い、上の方の茶色い背景の行をコピーします。

［contact-form 1 "コンタクトフォーム 1"］

このコードをメールフォームを設置したい場所（投稿やページの必要な場所）のHTMLコードに貼り付けるだけです。

カスタマイズについては、Contact Form 7特設ページの使い方をご覧下さい。
http://contactform7.com/ja/2009/11/02/getting-started-with-contact-form-7-2/

テニス365：フェデラーが準々決勝で敗退◇ウィンブルドン
http://news.tennis365.net/news/today/201007/47255.html

それはそうと、今日は久しぶりにお友達に誘われてテニスをしに行ってきました。
・
・
・

でも、テニスは楽しい♪

本日の課題は、バックのストロークっすね！（ボレーはしばらく見ないふりをしときます(^^ゞ）
バックに良いサーブがくると、どうしてもクロスに返せない。デュースサイドの場合は右ききですので逆クロスですけど、どうしても振り遅れ気味になりサイドアウトしてしまうんです。逆にアドバンテージサイドの場合は、クロスに行くのですが、センターよりに行くのでボレーの餌食に。。。
途中からデュースサイドで、逆クロスに打つのを諦めて全てストレートねらってました(^^;)
もちろん、最初は決まったけど途中からは読まれてきれいにボレー決められてました。
そして、最後のゲームは、アドバンテージサイドだったのだけど、お腹がすいて、水が無くて・・・もうやけくそな感じで全て回り込んでみたら意外と上手くいったんだなぁ(￣皿￣)v

誰か、バックの打ち方を教えて下さい。m(__)m

えっと、余談ですが、Tomas Berdychの日本語名を「トマス・ベルディッチ」と書いてますが、これはNHKの表現ですね。WOWOWは確か「トマス・ベルディヒ」だったと思いますし、tennis365では「トマス・ベルディフ」となっています。まぁ、これは最後の「ch」の発音をどうするかと言う問題だと思いますが、去年の全豪オープン（だったかな？）で、女子シングルスのMelanie OudinをWOWOWは最初は「メラニー・オーディン」と呼んでいて、2回戦か3回戦くらいから「メラニー・ウダン」に変わったんですよね。
このときは、確か、本人が取材の時「個人的にはフランス発音の“ウダン”だ」と言ったのがきっかけだったと思いますが、それを知る前に「なんか違う人がいきなり出てきてる」と思ったんですよ。確かに、発音を日本語化するのは難しいですし、人によって変わってくると思います。
ブログを書きながら、どっちで書いたらいいのだろう・・・なんか良い方法って無いのかな・・・と思ったので書いてみました。(^^ゞ

今日はとりあえず作っただけで、デザインはまだまだ変えていかなくてはいけませんが・・・(^^ゞ

今回はRewishさんのプラグイン「ｊQuery calendar」を利用させていただきました。
http://rewish.org/javascript/jquery_calendar

非常にシンプルに作られていたため、意外と簡単に設置できました。Rewishさんには感謝です。
作成者が日本人なので解説が日本語で大変助かります。英語の解説は・・・頑張って読むけど半分くらいはカンでやってますから・・・。

設置方法などは、私の解説より上記ホームページをご覧頂いた方が完璧に書かれておりますので、今回は割愛します。

まず、旧来の方法でアコーディオンっぽいメニューを作ってみました。
サンプル

サンプルでは、3つページを別々に制作し、リンクでページを遷移してメニューを開閉させています。
これでは、ページを遷移する際に読み込む時間がかかりますし、遷移後にページの先頭に画面が移動するなどの問題もあります。そして何より、制作する立場になった時、ページ量がかなり増えてちょっと何かを書き換えるのにも処理が煩雑になってしまいます。

次にjQueryを使用したアコーディオンメニューを作ってみました。
サンプル

今度は、何かなめらかな動きになりましたよね。
こんなflashライクな動きが簡単につけられるのです。いやぁ、もう少し早く勉強すれば良かった(^^ゞ

それでは、まずはコードを公開してみます。我流で作ってるので、どうなのだろう・・・。

まずは、jQueryを入手します。入手は本家サイトのダウンロードページからどうぞ！

↓HTMLソース（sample.html）↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQueryアコーディオンメニュー</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/accordion.js"></script>
</head>
<body>
<div id="navi">
<h1>ヘッダー1</h1>
<ul>
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
</ul>
<h1>ヘッダー2</h1>
<ul>
<li>2-1</li>
<li>2-2</li>
<li>2-3</li>
<li>2-4</li>
<li>2-5</li>
</ul>
<h1>ヘッダー3</h1>
<ul>
<li>3-1</li>
<li>3-2</li>
<li>3-3</li>
<li>3-4</li>
</ul>
</div>
</body>
</html>

↓ついでに、CSS（main.css）↓

@charset "utf-8";
/* CSS Document */
#navi{
width: 400px;
border: 1pt solid #000;
}

#navi h1{
font-size: 14px;
line-height: 2.0em;
background-color: #666;
color: #FFF;
text-align: center;
padding: 0;
margin: 0;
}

.sub{
list-style-type: none;
background-color: #FF9;
padding: 0 0 0 5px;
margin: 0;
}

↓JavaScriptソース（accordion.js）↓

$(document).ready(function(){
$('#navi > h1:not(:first)').next().slideUp('fast');
  $('#navi > h1').click(function(){
    // 引数には開閉する速度を指定します
    $(this).next().slideToggle('slow');
  });
});

これだけのことで、アコーディオンメニューを実現しています。
HTMLとCSSについては、ふれないことにして、JavaScriptを自分なりに解説してみます。HTMLとCSSが分からない方はgoogle等で調べて下さい(^^ゞ

一行目はサンプルページ（$(document)）を読み込んだ時（.redy(）に、以下の処理をする（function(){）ってことです。
二行目は「navi」をidにもつ要素の（$(‘#navi）子要素（>）のh1で最初以外のもの（:no(:first)’)）の次に来る要素（.next）を閉じる（.SlideUp(‘fast’)）ってことです。つまり一番目以外のメニューのアコーディオンを最初に閉じなさいという処理ですね。
三行目は 「navi」をidにもつ要素の（$(‘#navi）子要素（>）のh1をクリックした時（.click）に、次の処理をする（function(){）ってことです。
四行目はコメントなので飛ばして、五行目ですが、$(this)はこの場合は$(‘#navi > h1′)の事ですので、「navi」をIDにもつ要素の子要素のh1の次に来る要素（.next）を開いたり閉じたりする（.slideToggle(‘slow’);）処理です。

以上がJavaScriptの簡単な解説です。（間違ってたら誰か訂正して下さい(^^ゞ）
いやぁ、こりゃ楽しいですね！いろいろできそう！
今回は、練習のためにシンプルに使ってみましたが、jQueryにはたくさんのプラグインを開発している方がいて、公開されています。そちらもそのうち使ってみようと思います(^-^)

【jQuery日本語リファレンス】
http://semooh.jp/jquery/

【本家サイト：プラグインページ】
http://plugins.jquery.com/

まず、「jQuerytとはなんぞや？」と・・・思ったわけです。
いや、何となくは分かっているのですよ。一応WEBデザインも勉強してるし・・・・使ったことあるし・・・・。
でも、改めて何かと問われるとなんと答えて良いのやら (^^ゞ
ということで、ウィキペディアからの引用です。

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリ。John Resig が2006年1月に開催された BarCamp NYC でリリースした。
MIT License と GNU General Public License のデュアルライセンスであり、フリーかつオープンソースである。

MIT LicenseやGNU General Public Licenseについては今回は触れませんが、つまりは、HTMLとJavaScriptの連携を助けるJavaScriptをたくさん集めた物で、そのようなライセンスの範囲内であれば無料で使えるということです。（こんな説明で良いのか？）

いやいや、なんてすばらしい物でしょう！
昔は、自分がしようとしていることに近いことが出来るJavaScriptのソースをインターネットで探して、自分なりにちょっと改造して・・・なんてしてしていたのですが(^^ゞ

ってことで、次回は下記のサイトを参考にしながら実際にjQueryを使ってみようと思います。
次回がいつになるかは分かりませんが・・・(^^ゞ

【jQuery日本語リファレンス】
http://semooh.jp/jquery/

【JavaScript + Ajax 実践サンプル集】
http://jsajax.com/