スタイルシートの達人を目指して

CSS

テクニック

Blog デザインを ス マ ー ト にかっとばそう！
第2回

もっと凝ったリンクのデザイン

毎年3月に米国で行われるSXSWby スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

は映画や音楽の祭典ということで多くの観客

主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。
「CSSでもっと楽しいことしてみよう」と集まったメンバーが、初心者から上級者まで
幅 広 い 層 に 向 け て、CSS に関するテクニッ
クやQ&A情報などの記事をサイト上で書いています。そのメンバーが、本誌面でCSSテクニックを解説します。

を動員しますが、インタラクティブ部門の祭典もあります。今回そのパネルディスカ
ッションではCSSが大々的に取り上げられたそうです。CSSは、ブログをはじめ、ウェブデザインでは必須になってきたということなのでしょう。
http://www.sxsw.com/
今回は、前回よりもさらに上級の、もっと突っ込んだリンクのドレスアップテクニッ
クを紹介します。さらに、次回からはスタイルシートスタイルブックのメンバーがどんどん参加してくれる予定です。お楽しみに。

（長谷川恭久）

今月のイケてるCSSデザインサイト

1

画像を加工して統一感

2

Papel Continuo

カッコいいデザインをたくさん見てセンスや技を学ぶのが、デザイン力アップの第一歩！

読者の反応を誘うパーツ配置
notestips.com

http://www.papelcontinuo.net/

http://notestips.com/

WordPressというブログツールを利用したスペイン語のロンドン在住のMike Goldingさんのブログサイト。多くブログサイト。紙切れをイメージしたアナログ風なレイアウのブログサイトではエントリー下のほうに掲載されているコトにまず好印象を持ちます。また、エントリーに使われていメント数やトラックバック数などの情報が、このサイトでは各る画像は、すべてドットを強調したビットマップ風に加工してエントリーの右上に掲載されています。見やすい場所へ置あります。このように画像の雰囲気を統一することによって、くことでエントリーへの反応が容易になる効果があるでしょサイトとしての統一感が保たれて、同時にサイトの個性にもう。また左側のメニューバーを消すことができる『hide nav』なっています。という機能も注目です。

この画面ではわかりにくいのですが、画像には独特の加工がされています。

色や飾りだけでなく、パーツの配置もデザインの重要な要素です。

イケイケデザイン＆テクニック募集中
あなたのイケてるブログサイトやCSSテクニックを募集しています。
「いいデザインができたかも」と思ったら、ガンガン応募してください。イケてるデザインやテクニックは、このコーナーで紹介します。みんなで参考にし合っておもしろいサイト作りましょう！ 応募先：im-ikeike-css@impress.co.jp（スタイルシート・スタイルブックのサイトでも募集しているよ）

120 +++ iNTERNET magazine 2004.06 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

リンクの状態をさらに細かくカスタマイズする
1:hoverや:visitedなどの疑似クラスの細かい指定方法

by 長谷川恭久

Before前回、リンクのカスタマイズの基本形として「:hover」「:visited」のような疑似クラス

Afterについて紹介しました。今回はさらに細かくスタイルを指定するためのテクニックを紹介します。前回紹介したテクニックを使ってリンクにアイコンを付け、マウスオーバーでアイコンを切り替えています。ただし、標準のリンクと訪れたことがあるリンクで、異なったマウスオーバーのアイコンを指定していることに注目してください。まマウスオーバーでアイコンを替えるのに、標準のリンクと訪問済みのリンクで異なるアイコンを表示しています。これを応用して、状態によって異なる情報をフィードバックすれば、読者に優しいサイトにできるでしょう。

CSた、スタイルシートを見やすくするためにグループでスタイルを指定できるやり方をマスターしましょう。

S/* リンクに共通したスタイル設定 */:link, :visited {text-decoration: underline;/* 下線を引く *//* 左側に余白を作る（アイコンの横幅より大きく指定）*/
padding-left: 15px;/* リンク前の文字とアイコンとの感覚を空ける */margin-left: 3px;}/* 標準のリンクの設定 */:link {
color: #399;/* 色の指定 *//* 標準のリンク用のアイコンを指定 */background: transparent url(icon_link.gif)
no-repeat 0% 50%;}/* 標準のリンクのマウスオーバー */:link:hover {color: #963;/* 色の指定 */C S S

テ ク ニ ッ ク

今回のテクニックでは、リンクの疑似クラスの指定方法を工夫することで、第 1 回よりもさらに細かくアイコンを制御しています。
CSSでスタイルを設定していると、複数のセレクターに共通したスタイルを設定したくなるケースは多いでしょう。第1回でも説明したように、
カンマ（,）
で区切って複数のセレクターを指定することで、一括してスタイルを指定できます。
たとえば、次のように指定すると、すべての見出しで太字を設定できます。
h1, h2, h3, h4, h5{font-weight: bold;}の/* アイコンを指定 */background: transparent url(icon_hover.gif)
no-repeat 0% 50%;}/* 訪れたことがあるリンク */:visited {color: #666;/* 色の指定 *//* アイコンを指定 */background: transparent url(icon_visited.gif)
no-repeat 0% 50%;}/* 訪れたことがあるリンクのマウスオーバー */:visited:hover {color: #933;/* 色の指定 *//* マウスオーバーリンク用のアイコンを指定 */background: transparent url(icon_vhover.gif)
no-repeat 0% 50%;}

キ モ

これと同様にして、リンクの状態を示す「疑似クラス」
をカンマで区切って複数指定することもできます。こうすることにより、後で編集するときの作業が楽になります。
:link, :visited { 〜 }さらに今回は、リンクの状態によって、より細かいスタイル指定を実現しています。リンクの上にマウスカーソルが来たときの状態を指定する「:hover」では、標準のリンクも訪れたことのあるリンクも、同じ指定しかできません。しかし今回は、疑似クラスを2 つ続けて指定することで、より細かくスタイルを指定しています。標準のリンクのマウスオーバーは次のように指定します。
:link:hover

訪れたことのあるリンクのマウスオーバーは次のように指定します。
:visited:hover

リンクが行の折り返し部分にあると画像の表示場所がおかしくなるので、気になる場合はCSSに次のように指定しておくといいでしょう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

white-space: nowrap;+++ iNTERNET magazine 2004.06 +++121

画像を使わないボタン型リンクを作る
2

borderとbackground-colorによるボタンとtop／leftによるずらし
Beforeby 長谷川恭久

CSSをうまく使えば、今までにないデザインのリンクが作れます。マウスカーソルがAfter

上に来たときの変化も、JavaScriptを使わなくてもCSSだけで実現できるので、昔に比べればかなり簡単にインタラクティブ性をアップできます。今回は、単に色を変えるだけでなく、もう少し変化に富んだリンクを作ってみましょう。CSSには枠線を作るためのプロパティーが存在しますが、これをうまく使えば、画像を使わなくても画像を使ったリンクボタンを作らなくても、CSSを活用すれることで、画像を使わずにボタン風のリンクを簡単に作れます。アイコンのテクニックと組み合わせればグラフィカルなボタンにもできるでしょう。

CSボタンのようなリンクを作れます。さらにリンクがクリックされるとへこんだ表示にして、あたかもユーザーがボタンを押しているように見えるリンクにしてみましょう。

S/* 標準のリンクの状態 */a{text-decoration: none; /* 下線を削除 */border-top: 1px solid #9cc;
border-left: 1px solid #9cc;
border-bottom: 1px solid #666;
border-right: 1px solid #033;
background-color: #cff; /* 背景色 */color: #333;/* 文字の色 */position: relative;
margin: 0px 2px;
}

C S S

テ ク ニ ッ クの/* クリックされたとき */a:active{
border-top: 1px solid #033;
border-left: 1px solid #033;
border-bottom: 1px solid #9cc;
border-right: 1px solid #9cc
background-color: #BCE4E4; /* 背景色 */color: #000;/* 文字の色 */top: 1px;/* 1ピクセル下に表示 */left: 1px; /* 1ピクセル右に表示 */;}キ モ

リンクをボタンのように見せる前に、まずボタンを立体的に見せるためには、上と左「text-decoration:none」を指定して、リンクにの枠線は明るめの色に、下と右の枠線は暗標準で付いてくる下線を削除しておく必要がめの色に設定します。
あります。これをしておかないとボタンの下側クリックされたときには、へこんで見せるたに線が2つあるように見えてしまいます。
めに、上と左の枠線は明るめに、下と右の枠ボタン風に見せるために枠を付けるのです
線は暗めに色を設定します。また、ボタンがが、「border」プロパティーを使うと上下左右へこんでいるように 見 せるために、背 景 色の 4 方 向 に 同じ 枠 線 が 付 けられ るの で、 （background-color）や文字の色（color）も明「border-top」「border-bottom」「border-left」 暗を付けておくといいでしょう。
「border-right」を使って上下左右それぞれにさらに、クリックされたときにボタンの位置異なった枠線のスタイルを設定します。それぞを若干ずらすと、よりボタンを押しているようれについて、枠線の幅、枠線の種類、枠線のに見えます。クリックされたときのスタイルの色を指定できます。
「top:1px」「left:1px」は、標準のリンク文字が122 +++ iNTERNET magazine 2004.06 +++あるところから1ピクセル右下にずらして表示させるためのものです。ただし、このエフェク
トを使うときは、標準リンクのスタイル設定のほうに「position:relative」を記述しておく必要があるので注意しましょう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

CSSでツールチップを実現する
3

非表示にしたspan要素をマウスオーバーで再表示して位置調整
Beforeby 長谷川恭久

画像のHTMLタグに「alt」というプロパテ
ィーを入れて文章を指定しておけば、マウスオーバーしたときにポップアップ表示さAfterれます。このように補足説明のような文章が表示される小さい四角形のポップアップウィンドウを「ツールチップ」と呼びます。
CSSを使って、ツールチップと同じような効果を画像以外のものにも付けてみましょう。以前からJavaScriptと組み合わせてツールチップを作る方法がありましたが、今回紹介するのは CSS のみで作ります。

本文の要素を補足して説明する文章は、読者が詳しく知りたいときだけ表示できるツールチップにするのが便利です。リンクではない普通の文章にも応用できます。

しかもHTMLのほうに少し手を加えるだけでツールチップが作れるのです。専門用語の説明をしたり、リンク先に何があるのかを伝えたりすることで、サイトの使い勝HTML手を向上させましょう。

<div>『<a href="http://www.lordoftherings.net"
class="tip">ロード・オブ・ザ・リング<span>2004年度のアカデミー賞で作品賞他11冠を手にしました。</span></a>』はJ.R.Rトールキンが書いたファンタジー超大作です。</div>

CSS

a.tip{
position: relative;color: #066;}
a.tip span{
position:absolute;
display: none; /* Tipテキストを非表示 */C S S

テ ク ニ ッ クの}/* ツールチップを表示 */a.tip:hover span{
display:block;/* 表示する */top:1.5em;/* 位置とサイズ */left:1em;
width:15em;
border:1px solid #663; /* 見た目 */background-color:#cfc;
color:#030; /* テキスト */text-align: left;}

キ モHTML では、ツールチップ用の「tip」クラス
容を表示します。表示位置は、「top」と「left」を指定したリンクの a タグの内側に、<span>を使って、リンクの左上隅からどれだけ離すか〜</span>というタグで囲んでツールチップ用を指定します。ただし、このように位置を指定のテキストを書きます。
するためには、リンクの標準設定のスタイル
そして CSS では、標準のリンクの内側にあ指定で「position: relative」を、ツールチップのるspan 要素を「a.tip span」というセレクター
テキストがある<span>タグのスタイル指定でで指定して、ここで「display: none」を指定し 「position:absolute」を記述しておく必要があて非表示にしています。
ります。
そして、
『マウスカーソルが上に来たときの、また、ウィンドウズ版の IE ではバグのためtipクラスのリンクの内側にある<span>要素』 にうまくツールチップが表示されない場合があを示す「a.tip:hover span」というセレクターでります。次のようにして、背景色や表示の重なツールチップの表示を設定しています。ここでり位置関係を指定しておけばうまく表示されるは、まず「display: block」で非表示だった内でしょう。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

a.tip{
position: relative;
color: #066;/* IEのバグ回避 */background-color: transparent;
z-index: 1;}
a.tip:hover{color: #966;/* IEのバグ回避 */background-color: #fff;
z-index: 2;}+++ iNTERNET magazine 2004.06 +++123［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.