2008年10月アーカイブ

• ブラウザ上で確認
• ダウンロード

--

p.273のタブパネルのサンプルコードですが、先日リリースされたjQuery1.3で動作しないので対応バージョンを公開いたします。

• ブラウザ上で確認(jQuery1.3対応)
• ダウンロード(jQuery1.3対応)

:not(:first)の記述で動作しなくなったので:not(:first-child)に変更しております。 変更後のソースコードはjQuery1.2.6、jQuery1.3共に動作するソースです。

変更前

$(function(){
    $(".tab li:first-child").addClass("selected");
    $(".panel li:not(:first)").css("display","none");
    $(".tab li").click(function(){
        $(".tab li").removeClass("selected");
        $(this).addClass("selected");
        $(".panel li").css("display","none");
        $(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");
    });
});

変更後

$(function(){
    $(".tab li:first-child").addClass("selected");
    $(".panel li:not(:first-child)").css("display","none");
    $(".tab li").click(function(){
        $(".tab li").removeClass("selected");
        $(this).addClass("selected");
        $(".panel li").css("display","none");
        $(".panel li:eq("+$(".tab li").index(this)+")").css("display","block");
    });
});

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認

ブラウザ上で確認

• 互換モード（ダウンロード）
• 標準モード（ダウンロード）

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認
• ダウンロード

• ブラウザ上で確認

• ブラウザ上で確認

出会い

私がWebをそもそも始めたのは1995年の末ごろです。
ちょうどこの頃は、アニメ「新世紀エヴァンゲリオン」が社会現象を起こしていました。ブームの波は学生だったわたしにも押し寄せ、リアルタイムに文字で会話をする「チャット」で多くの人と出会い、同時に「ホームページ（当時はまだそう呼んでいた）」のつくり方をいろんな人から教わったり、書籍で勉強をしたり、Windowsの「メモ帳」で試行錯誤しながら趣味でWebサイトをつくっていたものです。
もちろん、当時はテーブルレイアウトが主流でCSSはあるようでなかった時代です。

ただ私は楽器が弾けなかったコンプレックスの解消に、パソコンに打ち込んだ曲を奏でる「MIDI」を作っては、その発表の場として自分のWebサイトをつくることが楽しかった時期です。
いま思い起こせば、当時では珍しく日に300人が訪れるサイトを運営していましたが、その体験が、今の自分のすべての原点だったかもしれません。
そして次第に曲そのものよりも「いかにリピーターを増やすか」を考えるようになっていきます。
　Webのつくり方を専門的に調べるようになり、ついには「これを仕事にしてみたい」という強い思いを胸に抱くようになり、専門学校の門を叩きました。そしてHTMLやCSSについて深く学んでいきます。

出会い

Webサイト制作を仕事とし、いまこうして書籍の執筆にも関わっているわたしですが、2005年まではWebとまったく関係のない業種で働いていて、そのときまではテーブルでレイアウトされたHTMLを触ったことがある、という程度の経験しかありませんでした。あるとき、なんとか自分のサイトをつくりたいという衝動にかられ、Webで検索し、「Movable Type」というブログツール（シックス・アパート社の製品）をつかうとWebサイトを簡単に構築できるということを知りました。Movable Typeにはまだ英語版しかなく、日本語化パッチをあてていた時代だったと思います。

　Movable Typeとの出会いによってわたしの人生が大きく変わりました。テーブルレイアウトでWebページをつくった経験が少しだけあったからこそ、Movable Typeにはじめて触れたときは何もかもが「目からウロコ」だったのです。Webページの構造はXHTMLで書いて、見た目の部分をCSSが担当する。それまでの時代は、見た目を変更するのにいちいちテーブルのセルを数えてイライラして作業していたのに、なんとCSSを変更するだけで簡単にすべてのページのデザインが変更できてしまうということがあまりにも驚きでした。

出会い

主にシステム開発を行っているので、ほかの執筆者とは少し違うかたちでCSSに関わってきました。2005年ごろ、当時勤めていた会社で利用していたCMSツールが限界にきており、新たなツールを開発する業務にあたっていました。利用する社内のWebデザイナーに、どのようなCMSツールを求めているかアンケートをしたところ、「デザインの制限がない」「簡単に利用できる」という意見が圧倒的に多かったです。

すごく困りました。当時、社内ではHTMLのテーブルでレイアウトしていたため、「デザインの制限がない」ことを実現するには、テンプレートエンジンを開発しなくてはなりません。テンプレートエンジンを利用すると、そのつかい方を覚えなくてはならず、「簡単に利用できる」という要望に応えることができません。

そこで、当時流行の兆しを見せていたブログツールをヒントに、CMSが書き出すHTMLは固定してしまい、CSSでデザインできるツールの開発にこぎ着けたのでした。

出会い

まだ大学生だった1996年にWebと出会い、2年後の1998年あたりから自分でWebサイトをつくりはじめると同時にCSSを触りはじめました。といっても、当時はまだNetscape Navigator 4やInternet Explorer 4が全盛の時代。「CSSをつかう」というよりは、「見た目の指定をHTMLに足すことができる」という程度の認識でした。

いまはいろいろとやり玉にあげられるIEも、当時としてはかなり画期的なブラウザで、特にCSS1のサポートという点ではNN 4以上でした。むしろNN 4のほうがかなり足を引っ張っていたといってよいでしょう。

社会人として働きはじめる2000年まで、あくまで趣味としてですが、かなりの時間を好き好んでWebサイト制作に割きました。その間、CSSの大切さに気づき（というよりも、当時のレベルで普通につくったときのHTMLの汚さに嫌気がさし）、さらに「人間が悪いのではなくソフトウエアが悪いんだ」と思い込み、2000年2月に公表されたW3C勧告「オーサリングツールアクセシビリティガイドライン1.0」（ATTG 1.0）をヒマな時間をつかって翻訳し、その年の7月に公開しました。

出会い

「テーブルレイアウトしかやりませんね。CSSは必要性を感じていないというか......」

以前、仕事でご一緒したフリーランスのWebデザイナーの方がいっていた言葉です。たしか2006年ごろだったと思いますが、CSS大好きであったわたしは少なからず衝撃を受けました。

何か新しいものを学習する動機は、大きくふたつにわけられます。「面白そうなので学習する」と「必要だから学習する」というパターン。わたしはどちらかといえば前者が多いのですが、CSSに関しては「面白そうだ」「フルCSSで制作してみたい」とウズウズしていた期間が長めにあって、実際に手をつけたのが 2004年。XHTML+CSSでの制作が、費用対効果などビジネス的にもオーケーと受け入れられはじめた時期です。つまり、「面白そうだ」に「今後、必要だ」という意識をプラスした最強の状態です。そのころにはCSSの書籍も数冊出ていたので、2冊をチョイスして基礎固めし、わからない部分は検索をするというスタイルで学びました。

冒頭のWebデザイナーさんにとって、CSSはおそらく「面白そう、やりたい」とは思えないもので、さらに「必要性」もまだ感じていなかったのだと思います。その後、一度だけ制作案件でチームを一緒に組み、CSSレイアウトを採用したことがありました。それをきっかけに、必要性や便利さを実感してくれたならイイなとひそかに思っていますが、その後、氏の消息は定かではありません。

のっけから微妙に話がずれているような気もしますが、書籍とネットで学びはじめた2004年が、わたしとCSSの出会いというわけです。

出会い

音楽学校を卒業してからしばらくは音楽制作現場やテレビ局のイベント制作部門などで働いていたわたしが、一念発起してWebデザインのスクールに通うことにしたのが1996年のこと。なんとかスクールは卒業したものの、知識レベルはほとんどシロウトのまま、ある企業の自社サイトを制作・管理するために派遣社員として働きはじめました。

当時はインターネットがあまり普及しておらず、派遣先の大手システム開発会社ですらインターネットにつながるパソコンが各部署に1台しか設置されていないような状態。当然ながら周囲にWebデザインの知識を持った人は皆無で、技術面を誰かにジャッジされることもなく、知識を得る手段すらないまま手探りの毎日でした。正しい知識よりもその場しのぎの迅速な対応を要求される現場で、テーブルレイアウトのノウハウをひたすら積み上げていく日々でもありました。

4年後、Web制作会社に正社員として転職。それまでの「なんでも屋」から「コーダー」へと立場がかわったことではじめて、「HTMLの知識をもっと深く掘り下げたい」という欲求が芽生えました。その会社で唯一のコーダーだったため、ここでも独学で勉強せざるを得なかったのですが、書籍やWebサイトでHTMLやCSSを学んでいくうちに、「HTMLとはレイアウト用の言語である」と信じて疑わなかった自分の勘違いぶりにようやく気づき、愕然としたのを覚えています。

出会い

Webサイト制作に足を踏み入れたのは2004年11月。有限会社アイエイトワンへの入社とともに僕のWeb制作はスタートしました。当時は、インターネットをつかうといろいろな情報を探すことができたり、無料でちょっとしたゲームができるという程度の認識でした。

はじめに教わったのはテーブルレイアウト。1枚のページを四角形で切り貼りしてつくっていく様を知り、「ホームページってExcelみたいにつくっていけばよいんだな」と思ったものです。同時に、文字サイズだけはCSSで管理していました。「.font10」（フォントサイズが10ピクセル）や「.font12」（フォントサイズが12ピクセル）などのクラス名をつかっていたころが、懐かしく思えます。

その後、はじめてWebサイトの新規制作案件を担当しました。右も左もわからずに、ひたすら必死に公開まで駆け抜けたというのが正直なところです。しかし、自分の思いとは裏腹に、公開後、クライアントさんから「サイトが全然検索に引っかからないんだけど」という言葉をもらいました。どうしたら検索に引っかかりやすいサイトにできるのか調べていると、h1要素やh2要素などの見出し要素がすごく重要らしいとのことです。すぐさま試してみましたが、文字サイズが大きくなったり、余白が大きくなってしまったりと問題だらけです。

そんなこんなで、「どうやらCSSは文字サイズの制御だけでなく、余白や背景画像の指定、さらにレイアウトの指定さえもできるみたいだ！」とわかったのがCSSとの出会いです。

『現場のプロから学ぶXHTML+CSS』 （CSS Niteビギナーズ連動書籍）、Amazonでの扱いがスタートしました。

発売日は11月11日の予定です。