第5回「パワフルなCSS/JavaScriptテクニック45」
2010年01月25日
翻訳元サイト：Smashing Magazine
http://www.smashingmagazine.com/
原文：45 Powerful CSS/JavaScript-Techniques
http://www.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/
著者：Smashing Editorial
翻訳：中野恵美子
※本記事は「Smashing Magazine」様より許可を得て翻訳、掲載しています
CSSやJavaScriptはデザイナーやディベロッパーにとって、極めてパワフルなツールだ。しかし、使いこなすためのアイデアを得るのはなかなか難しい。ただ、デザイナーやディベロッパーはほとんど毎日、新しく巧妙なテクニックを考えだし、それらを公開している。そこで私たちは定期的に、公開されているテクニックを収集・整理し、Smashing Magazine読者のために用意している。
本記事では、みなさんが抱える問題の解決法となったり、インスピレーションを得る助けになるかもしれない、45の役立つCSS/JavaScriptテクニックを紹介する。興味深いCSSテクニック、ナビゲーションメニュー、CSSを使ったタイポグラフィ・リスト・ボタンをカバーする予定だ。本記事ではおもにCSSを取り上げているが、いくつかは機能強化のためJavaScriptやPHPも使っているので注意してほしい。
また、本記事はCSS/JavaScriptテクニックのまとめ第一弾であることにも注意してほしい。今回取り上げなかったテクニック（CSSテーブル、CSSレイアウト、モバイル用CSSおよびCSSフォーム）については、次回の記事で紹介する予定だ。類似記事や役立つ情報取得のために、Smashing MagazineのRSSフィード登録や、Twitterフォローなどを忘れないようにしていただきたい。
多くの人は、Web上で広く使われている「リスト」にうんざりしているのではないだろうか。しかし、リストを使う必要がある大多数の人には、本記事で紹介するテクニックのいくつかが役立つはずだ。
興味深いCSSテクニック
ビジュアル性の高い注釈
明るさとボーダーの透過という2要素をオーバーレイさせて注釈を実現する。Smashing Magazineでも一連の記事を書いているデザイナー集団・ZURB Design Agencyによる、非常に興味深い、シンプルなテクニックだ。
セクシーなミュージック・アルバムのオーバレイ
この記事はミュージック・ストリームのスタイル作成法を紹介したもので、いくつかのグラフィックが取り上げられている。
CSSとjQueryを使ったカラフルな時計
ここでは、基本的なCSSとJavaScriptを使用して、どのように時計が作成できるかを説明している。
CSS3を使った奥行きのある3Dリボン
さまざまな背景との最適なコントラストを実現するRGBaでドロップシャドウを作成するため、box-shadowを使っている。RGBaはスタンダードなRGBモデル（0,0,0 - 255,255,255）で、オプションとしてopacityを追加している。他のプロパティを使うこともできるし、新しいブラウザでも動く。
PHP、CSSおよびjQueryによる先進的なイベント・タイムライン
このイベント・タイムラインは、PHP、MySQL、CSSおよびjQueryを使っている。イベント部分がクリック可能な、素晴らしいタイムラインだ。新たにイベントを追加したいときも簡単にできる。
CSSによるナビゲーションメニュー
CSS 3D Meninas
古典絵画「Las Meninas」を利用し、CSS疑似3Dエフェクトを作成している。CSSのみでつくられており、JavaScriptやFlashは使われていない。Internet Explorer 8、Firefox 3、Opera 9、Safari 3、Chrome 4およびKonqueror 3.5での動作が確認されている。
エラスティック・サムネイルメニューの作成
新しいメニュー表現として、エラスティック・サムネイルメニューを作成している。マウスカーソルが合うとメニュー項目が拡大し、上方に伸びていく。
定義リストでシンプルかつ効果的なページ内ナビゲーションを作成する方法
シンプルで効果的なページ内ナビゲーションが必要な場合、そのページの内容にジャンプさせるが、ここではdl要素を使っている。子要素であるdtとddを使えば、ページ内リンクが楽にを作成できるのだ。
CSSによるスティッキーな固定サイド・ナビゲーションのレイアウト
ブログやWebサイトに使える固定サイド・ナビゲーションの作成法を学ぼう。コンテンツ量が多く、かなりのスクロールが必要なWebサイトには固定サイド・ナビゲーションがあると便利だ。いちいち上部に戻ってスクロールすることなく、Webサイト内を巡回できるようになる。
控えめなドロップダウン・ページ・チェンジャー
以前ほど一般的ではないが、ナビゲーションを作成するために<select />タグによるドリップダウン・メニューを使われることがある。アクセスしづらい・目障りなナビゲーションになる場合に使うと効果的だ。実際、このテクニックは多くの人が見たことがあるはず。これをJavaScriptの有無に関わらず動作するテクニックを紹介している。
JavaScript、jQuery、画像を必要としないツールチップを使ったフリーCSSナビゲーション/ページネーション
JavaScriptを使用しないCSSベースのナビゲーション/ページネーションバー。「前の」そして「次の」ページの黒丸にマウスカーソルを合わせることで、ナビゲーションを容易にするツールチップだ。
オーバーラップするタブ付きメインメニュー
メインメニューは、サイト全体を見渡せるようにする、Webサイトデザインにおける重要な一部だ。しかし、現在よく使われているナビゲーションメニューは、タブ付きの形式だ。そこでここでは、オーバーラップするタブ付きのメインメニューをつくるテクニックを紹介している。
非常に長いドロップダウンメニュー
とても長いドロップダウンメニューを使った有効テクニックだ。ドロップダウンメニューが長すぎると、ウインドウ外の見えない部分に隠れてしまうことがある。しかしこのテクニックを使えば、マウスカーソルを動かすだけでメニューが隠れることなく自動で上下するのだ。
CSSとjQueryを使ったメガ・ドロップダウンメニュー
メガ・ドロップダウンメニューは、うまく使えば大規模サイトでは極めて効率的だ。このテクニックを複数の実装方法で実験してみよう。Smashing Magazineに定期的に寄稿している、Soh Tanakaによるチュートリアルだ。
CSSタイポグラフィおよび本文
CSSでクールな立体効果を生み出す方法
立体画像は、赤、緑、青のチャンネルのうちふたつを相殺することで生み出されるもので、レンズの左右に異なる色のついた3D眼鏡を使って見る。残念なことに3D眼鏡をなくしてしまったので、このエフェクトがほんとうにうまくいくのか分からないが、いずれにせよ非常にクールなテキスト効果だ。Webデザインをきちんとしたものにするため、セマンティクスを考慮に入れ、マークアップの重複を避けながら、どのように実現したのか見てみよう。
タイポグラフィック・ワーク・プランナー
HTML/CSSによるタイポグラフィック・ワーク・プランナーを使ってみよう。いくつかのセマンティックHTMLと少々のCSSを使うことで、自分およびスタッフのための、美しくかつシンプルなワーク・プランナーが作成できる。
Webkit（Safari）でテキストを細くする
Safariはサブピクセル・レンダリングを使用して、テキストを大きくするというあまり美しくない方法を採用している。Safariの以前のバージョンではtext-shadow宣言でフィックスしていたが、Snow Leopard以降この方法は機能しない。そこでここでは、別の選択肢について紹介している。
疑似ドロップキャップ
ドロップキャップは印刷物や雑誌のほか、最近ではWebサイト上でもよく見かける。デザイナーやディベロッパーは、インライン・スタイルを使ったり、画像の置き換えを活用して実現してきたが、Webサイトをリニューアルする際に、ドロップキャップ画像を使わなくなった場合に、古い記事には壊れた画像が掲載されてしまうおそれがある。そこで活用してほしいのが、この方法だ。これはテキスト・インデントを使っていないと仮定してのことだが、以前作成した一つ一つの記事の冒頭から、壊れた画像が残されることになる。もしインライン・スタイルの方法をとった場合には、非常にひどいことになる。
完璧な<pre />タグを作成する方法
多数のコードサンプルを掲載したWebサイトを管理している人は、<pre />タグで整形するために多くの時間を費やす経験をしたことだろう。うまく整形しないと、Webサイトのレイアウト全体が破壊されてしまう。ブラウザが異なると<pre />タグも異なった扱いを受ける場合があるのも頭の悩ませどころだ。しかしコードサンプルをさまざまななブラウザで同様かつスタイリッシュに見せることは、簡単ではないが実行可能だ。この記事は、適切な<pre />タグを作成するために必要とされることをすべて説明している。
ベースライン・シフトでWebタイポグラフィを改善
ベースラインは、すべての文字が乗る不可視のラインだ。もちろんいくつかの文字（「j」「p」「g」「y」などを含む）は、ベースラインの下にぶら下がるディセンダーを持っているが。ベースライン・シフトは、ベースラインに関してキャラクターを上下に動かすことを含んでおり、うまく使うと文字をプロフェッショナルな見せ方にできる。ベースライン・シフトは以前からInDesignやQuarkXPressのようなアプリケーションで使われてきたものだが、これをCSSで実現する方法がある。
タイポグラフ - スケール＆リズム
このページは記事でありツールでもある。冗談のようだが、これらふたつの絡み合ったコンセプトが、Webサイト上でいかに融合できるかを探ろうと試みているのだ。たとえば色つきのボックスをスケールに沿ってドラッグしてみてほしい。ほとんどの場合、予想通りもしくは予想以上の結果が得られるだろう。
jQuery、AJAXおよびCSSを使った装飾的なクォート
訪問者が気に入ったものを評価できる、装飾的なクォート・レーティング・システムを作成する方法を学ぼう。
シンプルでスタイリッシュかつスワップ可能な画像キャプションの作成
画像キャプションはHTMLを複雑化させるだけでなく、デザインの再構築を難しくさせるものだ。ここでは、これらの問題を解決する方法が紹介されている。
CSSによる写真キャプションのスタイリング
不要な場合もあるが、多くの写真はキャプションをつけた方がよい。これは新聞や雑誌のような従来形のメデイアはもちろん、ブログやWebサイトにもあてはまることだ。ここではCSSで写真キャプションをみばえ良くスタイリングするヒントを紹介している。
Webページでの画像キャプション
この記事では、HTMLでキャプション付き画像を掲載する3つの方法を提案している。CSSでのスタイリングも紹介されている。
目をひく投稿見出しのスタイリング
「私はブログのベース・レイアウトから飛び出した見出しの表示方法を思いついた。自サイトの見出しを新しいスタイルにしたいと考えている人のために、このテクニックを共有したいと思う。デザイン時に心がけたい唯一のポイントは、訪問者の画面サイズに合わせるることだ。このテクニックは、各自のデザイン次第でさまざまに変化する可能性がある。みなさんがこのチュートリアルで主要コンセプトをつかみ、自サイトで適用してほしい。」
HTMLおよびCSSで省略記号を使用する
テキストの幅が広すぎて枠組みに収まりきらない場合、もっと多くの情報があることを示す省略記号を使用するのが良いソリューションだ。現在のところ公式な仕様ではないが、CSSで省略記号を定義することは可能であり、Internet Explorer、Safari、ChromeおよびOperaで動作する。Firefoxでは動作しないが、jQueryを使用した回避策がある。
CSSを使ってスタイリングした5つのメッセージボックス
この記事は、非常にシンプルなテクニックを使ってメッセージボックスをカスタマイズするテクニックを紹介している。
CSSによるリスト表現
Microsoft Wordスタイルのアウトライン
ブラウザはインデントのスタイルを変更しないし、文頭のローマ数字を英字に変更することもない。そこでCSSを活用して、番号付きリストを出力するMicrosoft Wordスタイルのアウトラインを作成しよう。
CSSによるシンプルなタイムライン
「私は自サイトのAboutページに、クリーンかつシンプルなマークアップでCSSタイムラインを作成したいと考えた。できる限り画像の使用を避けたかったので、番号なしのリストを使うソリューションを作成した。その結果がこのタイムラインだ。本記事ではCSSとHTLMでタイムラインを作成するためのテクニックを紹介する。これにより、見ばえの良いシンプルなタイムラインが作成できるだろう」
CSSカウンターによる自動ナンバリング
文書を書く際、目次を用意しておくと何かと便利だ。手動で数えることもできるが、内容が変われば変更される可能性が高く、非効率的である。そこで本記事では、CSS2.1によるCSSカウンターを使って自動ナンバリングする方法を紹介している。
ラジオボタンをカスタマイズしたCSSトリック
CSSによるエラスティック・カレンダーの作成
Web上でのカレンダーは、番号付けされたボックスを並べてつくられることが多い。テーブルで作成しても良いが、整形にかなりの労力が必要となるケースがある。そこでCSSを使ってエラスティックなカレンダーを作成してみよう。アクセシビリティも非常に高まる。
1ピクセル画像を使ってリストをスタイリング
1ピクセルの背景画像は、非常に用途が広い。repeat-xで水平線となるほか、repeat-yで垂直線、repeatで塗りつぶしができる。番号が付かないリスト作成時に、これを使ってみよう。
番号付きリストのスタイリング
ほとんどのブラウザはデフォルトで、番号付きリストのナンバーをテキストと同じフォントで表示する。ここでは、番号付きリスト（ol）とパラグラフ（p）要素を使用して、スタイリッシュな番号付きリストをデザインする方法に関する簡単なチュートリアルを紹介する。
番号なしのリスト付きテーブル
みなさんは「なぜテーブルを使わないのだろう」と思うかもしれない。ソート可能なAjaxのリスト要素が人気になるにつれ、複数カラムのデータテーブルを表示する必要性があるからだ。
CSSでリストを美しくスタイリングする8つの方法
「HTMLでリストを使うことは（番号付きリストは<ol />、番号無しのリストは<ul />）かなり一般的となっている。そこで、CSSを使ったリストを美しくスタイリングする8つの方法を紹介しよう。
リスト・マージンをCSSで単純化するヒント
レイアウトでデフォルト・マージンを設定し、リストに戻ってすべて手作業で調節したことがあるだろうか？ デフォルトでは、リスト・アイテム・マーカーは、リスト・アイテム自体との関係ではマイナスのポジショニングとなっている。これは、マージンからのzero-ingは、リストが別の何かに含まれる場合、自動的にオーバーフローへと導くことを意味している。リスト・アイテム・マーカーは、ほかのエレメントと同じ開始点に置くほうが簡単だ。そこでlist-style-positionプロパティで何が行えるかについて見てみよう。
セクシーなHTMLリストのトリック
遍在するリスト要素<ul />および<ol />に注意しよう。これらふたつのセクシーな要素は、情報をすっきり見せたいときに役立つ。これらのリスト要素はセクシーなだけでなく、とても柔軟性が高く、高度なカスタマイズが可能な、強力なリスト構成の実現を可能にする。
クリッカブルな<li />タグ
テーブルタグで作成すると、クリッカブルにした際に問題が発生する。そこでCSSによるリスト表現を考えてみた。
CSSを使ったボタン
シンプルなボタン v2
つねにコンテンツに合ったサイズのボタンを表示するテクニックだ。非アクティブ、アクティブ、およびホバリングの3状態を用意しておくことがポイントである。このテクニックはすべての主要ブラウザで動作し、JavaScriptは必要としない。
CSSによるセクシーなボタン作成
このチュートリアルでは、CSSを使用して素晴らしい外観のテキスト付きボタンを作成する方法（押された状態も含む）を紹介している。時間がかからず作成できるので、みなさんの役に立つだろう。
リキッドかつカラー調整できるCSSボタン
大規模なWebサイト制作において、すべてのボタンをPhotoshopで作成するのは非常に手間だ。文言や配色の統一にも時間がかかってしまう。リキッドかつカラー調整可能なボタンを使えば、あっと言う間に変更することができるはずだ。
CSS Spriteを使ったホバリングおよびアクティブ状態のボタン作成
多くのデザイナーは、ホバリングおよびアクティブ状態のデザインを無視している。ユーザーがクリックしたボタンにフィードバックを与えることで、ユーザビリティを改善するとともに、デザインに奥行きを与えることもできる。
変形させたボタン
「私は、ボタンを多少変形させるとおもしろいと考え、現状に至るまでに経験してきたイテレーションの一部について紹介する」
丸みのあるフォーム・ボタン
Googleのような画像を使わないボタン
Googleでよく見られる画像を使わないボタンを再現するためのテクニックを紹介する。
今後も注目！
本記事はCSS/JavaScriptテクニックのまとめ第一弾だ。今後も類似した記事や役立つリソースを紹介するので、Smashing MagazineのRSSフィード登録や、Twitterでのフォローなどを忘れないようにしていただきたい。また要望点・改善点などがあればSmashing Magazineまで知らせてほしい！
［INDEX］
>>> 第1回 Twitterの効果的な背景画像：事例と現行のプラクティス
>>> 第2回 Coming Soonページをデザインする
>>> 第3回 Webの文章におけるWebフォントの実情
>>> 第4回 CSS3を使ったより強く、より良い、より手軽なデザイン
>>> 第5回 パワフルなCSS/JavaScriptテクニック45
>>> 第6回 Web制作が楽しくなるCSS3/JavaScriptのテクニック50
>>> 第7回 手軽にWebを彩るCSSコーディングテクニック50
>>> 第8回 最近注目を集めているJavaScript/jQueryのツール・テクニック45
>>> 第9回 2010年上半期Webデザインのトレンドまとめ
