待望の新連載！ スタイルシートの達人を目指して

CSS

テクニック

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

ブログの要、リンクを飾る

by スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

ブログにはコメント、トラックバック、RSSなどおもしろい機能がいろいろあります
が、ブログの基本はやはりリンクではないでしょうか。
「このニュースがおもしろい！」と、リンクを貼った記事を書くことも多いでしょう。ウェブをベースとしている以上、現状のブログはリンクが網羅された集合体といっても、ある意味ではおおげさではないかもしれません。しかし、標準のリンクは青文字に下線で、なんとなく寂しいような気がします。せっかくなのでCSSを使っていろいろ工夫してみようじゃないですか。まずはリンクの装いを新たにして自己主張してみましょう！

書籍『スタイルシート・スタイルブック』
を 3 名にプレゼント！

64

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

1

上級者は着せ替えブログ

2

DESIGNDOJO

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

ページ

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

縦横の垂直レイアウトに飽きたら
Bot A Blog

http://www.kanzaki.com/docs/htminfo.html

http://botablog.com/blog.php

カナダ在住のデザイナーSam Royamaさんのブログサ

普通のデザインでは、縦軸と横軸が垂直になっているボイト。右側にある「STYLIN'」
をクリックすると、瞬時に違うックス形式のデザインが多いですが、このサイトではデザイスタイルに切り替わります。今は冬風デザインが選べます。

ンの基本が斜めになっています。単に斜めにずらした画像

サイトを訪れた人が好きなデザインを選べる仕組みは最近を上下に貼り付けてあるだけなのですが、ちょっとした工夫の流行ですね。このサイトではJavaScriptを使って実現しが個性的なサイトに早変わりするいい例ではないでしょうています。

か。

デザイナーらしいタイトなグラフィックとメリハリの効いた色使いが目をひきます。

ブログの更新を告知してくれるメールサービスのサイトのブログページです。

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

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

リンクの基本スタイルをマスター
1

a:link、a:hover、a:visited、a:active疑似クラス

by 長谷川恭久

Beforeリンクで思い浮かぶイメージといえば、普通は青色で下線が引いてある文字だと思Afterいます。HTMLの<font>タグや<body>タグ内にリンクの色を設定できますが、できることが限られています。
CSSを使えば、リンクの種類によって異なる色を指定したり、マウスカーソルがリンクの上に来たとき、リンクがクリックされたときなど状況に応じてリンクの表示を変えたりなど、さまざまな効果を実現できます。

すっきりとしたリンクになり、マウスカーソルが上に来ると表示が変わるようになった。

HTM

まずここでは、CSSでできる基本的なリンクスタイルのテクニックをマスターしてみましょう。

L<div class="link1"><p><a href="#">このサイト</a>で紹介されているニュースがおもしろい！</p></div><div class="link2"><p>やっぱり<a href="#">この店の牛丼</a>食べておけばよかった。</p></div><div class="link3"><p>あの本が<a href="#">結構売れている</a>みたいで驚いています。</p></div>

CS.link2 a:hover {background-color: #cff;}

S/* 標準のリンク */.link1 a:link, .link2 a:link, .link3 a:link{text-decoration: none;/* 下線をなくす */color: #000;/* 色を変える */border-bottom: 1px solid #f60;/* 罫線を引く */}C S S/* マウスが上に乗った状態のリンク */.link1 a:hover{color: #3c0;
font-style: italic;}

テ ク ニ ッ ク

例では、標準の状態とマウスカーソルが上に来たときのCSSしか設定していませんが、リンクのスタイルは大きく4つのグループに分けて設定できます。それぞれの状態についてCSSを記述すれば、場合ごとに違う設定にできます。
・a:link――標準の状態のリンク
・a:hover――マウスオーバー（マウスが上に来たとき）の状態
・a:visited――過去に訪れたことがあるリンク
・a:active――リンクがクリックされたときの/* 色を変える *//* 斜体にする *//* 背景色を付ける*/.link3 a:hover {text-decoration: none;/* 下線をなくす */color: #000;/* 色を変える */border-bottom: 1px dashed #3c0;/* 罫線を引く */}キ モ

すべての状態のリンクをまとめて指定したい
場合は、ただの「a」に対してCSSを設定すればOKです。
a{ font-weight: bold; } /* 太字にする */2つや3つの状態のリンクに共通するCSSを指定する場合は、次のようにします。
a:link, a:visited, a:active{/* 下線をなくす */text-decoration: none;/* 罫線を引く */border-bottom: 1px solid #f60;}

文字の色を変えるだけでなく、背景色、フォントの書体、文字の大きさ、文字の位置まで変化させることが可能です。
標準の状態でリンクに付く下線は太い実線ですが、CSSの指定でこれを消してborderbottom（下罫線）を付ければ、さまざまな種類の線を利用できます。
このように、要素名に「:」を付けて細かい指定をするセレクターの作り方は、「疑似クラス」と呼ばれます。疑似クラスは、リンク以外では「:first-child」（最初に現れる子要素）などがあります。

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

リンクの種類によって異なるアイコンを付けよう
2

クラス指定とa[href*="http://"]による条件指定
Beforeby 長谷川恭久

リンクと一言で言っても種類はいろいろ。
ウェブサイトへのリンクもあればPDFなどAfterのメディアファイルへのリンクもあります。
リンク先の種類によってリンクの違うアイコンを付けたり、色を変えたりして違いを付けておくと、何のリンクなのかわかりやすくなります。アイコンは文章を読んでいて邪魔にならないくらいの大きさを用意す

リンクの 後ろに付いたアイコンで何 のリンクか 一目でわかるようになった。

るといいでしょう。
イチオシは、外部へのリンクにアイコンを付ける方法です。
「target="̲blank"」で強制的に新しいウィンドウを開くのを嫌う人もいるので、外部へのリンクだとわかるアHTM

L

イコンを付けて、targetの指定をなくしてし<p>何か質問／感想がある方は<a href="mailto:iminfo@impress.co.jp" class="mail">メール</a>でお願いします。</p><p>資料申し込み用紙は<a href="ikeike-css.pdf"
class="pdf">こちら</a>からダウンロード。</p><p><a href="http://www.impress.co.jp"
target="_blank" class="url">このリンク</a>は新規ウィンドウで開きます。</p>CSS/* メールリンクのスタイル */a.mail {color: #F60;
background:transparent url(icon_mail.gif)
no-repeat 100% 50%;
padding-right: 12px;}

C S S

テ ク ニ ッ ク

HTMLでは、種類ごとに<a>タグにクラスを指定して、各クラスのセレクターに対して違うスタイルをCSSで指定します。
アイコンは、backgroundプロパティーに「url(ファイルの場所)」を指定して背景画像として配置します。
「100% 50%」は、アイコンを配置する場所の指定で、リンクの右端（100%）に、上端から50%、つまり文字の真横に表示されます。画像が繰り返して置かれないように、no-repeat値の設定も必須です。背景色にはtransparentを指定して透明にしておきましょう。
そしてpadding-rightプロパティーで右にア

148 +++ iNTERNET magazine 2004.05 +++のまうのもいいかもしれません。

/* PDF文書へのリンクのスタイル */a.pdf {
color: #F30;
background:transparent url(icon_pdf.gif)
no-repeat 100% 50%;
padding-right: 12px;}/* 外部リンクのスタイル */a.url {
color: #F63;
background:transparent url(icon_pop.gif)
no-repeat 100% 50%;
padding-right: 12px;}

キ モ

イコンを表示させるだけの隙間を用意します。
これがないとアイコンと文字が重なってしまいます。
リンクの左側にアイコンを表示させたいときはpadding-leftで隙間を作ります。
リンクごとにHTMLにクラスを追加するのが面倒な場合は、次のようにCSSでセレクタ
ーに条件の指定を書けば、リンクの種類に応じて適用するスタイルをブラウザーが選んでくれます。この場合、HTMLの<a>タグにはクラス指定は必要ありません。
a[href*="http://"] {/* 外部リンクのCSS設定 *}a[href*="mailto:"] {/* メールリンクのCSS設定 */}a[href*=".pdf"]}

ただし、この方法はMozillaやSafariでは有効ですが、IEではまだ使えません。IEが対応するまでは使えないテクニックだと考えたほうがよさそうです。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D{/* PDFへのリンクのCSS設定 */リンク用の下線を手書き風にしよう
3

0% 100%の魔法とrepeat-x＋padding-bottom、white-space
Beforeby 長谷川恭久

前のテクニックではリンクにカスタムアイコンを付けましたが、そのテクニックを応用することで、リンクの下線として画像をAfter

使って、自分だけのカスタム下線を付けられます。無機質な下線に飽きたら、鉛筆で書いたような手書き風の下線や、スタイルシートの枠線プロパティーでは表現できないようなユニークな線を作ってリンクにひと味違った趣向を凝らすことができます。

手書き風のアンダーラインやマーカーペンのような、オリジナルの下線になった。

あまり奇抜なカスタム下線だと、ユーザーがそれをリンクだと理解してくれない可能性もあるので、線に見える画像をいろいろ作ってチャレンジしてみましょう。

HTML<div class="entry1"><p>昨日ニュースを見ていたら<ahref="#">この話題</a>がすごく気になりました。
</p></div><div class="entry2"><p>今度は<a href="#">親子丼が食べられない</a>ことになるなんてありませんよねぇ。
</p></div>

CSS.link1 a {text-decoration: none;background:transparent url(underline1.gif)
repeat-x 0% 100%;
padding-bottom: 2px;
white-space: nowrap;
color: #f60;
}

C S S

テ ク ニ ッ ク

まず、text-decoration: noneを指定して、標準の下線を消してから、リンクアイコンのときと同様に、backgroundプロパティーに下線用の画像ファイルを指定します。さらに、画像の位置指定を「0% 100%」とすることで、リンクの左下から背景をスタートするようにします。
あらかじめカスタム下線は横長の画像を用意しておきますが、非常に長いリンクになる可能性があるので、「repeat-x」を指定して横軸に繰り返し背景が配置されるようにしておくといいでしょう。
文字と下線の画像の間にどれぐらいのすき間を空けるかは、padding-bottomプロパティの.link2 a {text-decoration: none;background:transparent url(underline2.gif)
repeat-x 0% 100%;
padding-bottom: 3px;
white-space: nowrap;
color: #33F;}.link2 a:hover{/* Éマウスオーバー */background:transparent url(underline2-2.gif)
repeat-x 0% 100%;color: #69C;}

キ モーで指定します。下線が文字にぴったり付いていても問題なければ、この値は「0」にしておいてもいいでしょう。
さらに、リンクが画面の端で折り返されて2行に渡ると、うまくカスタム下線を表示できなくなってしまうので、<br>で意図的に改行を入れなければリンクの部分が折り返されないように、white-space: nowrapを指定しておく必要もあります。
行間が狭くて下線が文字と重なってしまう
場合には、手書き風下線を付ける可能性のある段落の<p>や<div>で、次のようにして、行間を通常よりも広くしておくといいでしょう。

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

p { line-height: 150%; }前ページのテクニックで紹介した、リンクの種類や状態ごとにスタイルを設定するテクニックを合わせれば、異なった状態に対してさまざまな下線を追加することも可能です。さらに発展させれば、次のサイトで紹介されているように、アニメーションGIFを使ったユニークな下線も可能です。
http://www.alistapart.com/articles/customunderlines/+++ iNTERNET magazine 2004.05 +++149

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.