マジ

TIPS＆TRICKSを超えた 本気で使える テクニック

枠線で遊ぶ
CSSの機能には地味なものが多い。CSSを使えば柔軟なデザインが可能になるが、ページの見映えを派手にしたかったら、やはり画像を使うことになるだろう。そんな地味なCSSの中でも、枠線の機能だけは変わり者だ。要素の上下左右に別々の色、太さ、スタイルの線を引けるので、工夫次第では画像なしでも枠線だけでおもしろい効果が出せる。
HTML MANIAXで紹介したテクニックは

文：佐藤和人

http://internet.impress.co.jp/maniax/でソースを公開！

デザインが地味だと思ったら→とりあえず枠線
パターン2

パターン1

CSSには、枠線のプロパティーが20種

上下左右の枠線をまとめて指定

上下左右の枠線を個別に指定íË

類もある。上下左右の太さ、スタイル、色border: 2px solid blue;

borde-left: 2px solid blue;

を別々に指定したり、まとめて指定したり、

borde-bottom 4px dotted red;

プロパティーの組み合わせでさまざまな書き方ができるのでややこしい。
とりあえずは、borderプロパティーで上下左右の枠線を一括指定する方法と、border-top、border-right、border-bottom、border-leftの各プロパティーで上下左右どれかの枠線だけを指定する方法を覚え
さ、スタイル、色の値をスペースで区切って太さ、スタイル、色を個別に指定

border: 2px solid blue;border-width: 2px 4px;

border-left-color: red;border-style: solid dotted;

border-top-style: none;

ればいい。これらのプロパティーには、太パターン4

パターン3
パターン1＋特定の線のデザインを変える

border-color: blue red yellow;

並べる。慣れてきたら、「左の枠線の色だけ変える」のように、細かいパターンを指定する方法を研究してみよう。
なお、枠線を表示させるには、必ずスタイルをsolidのようにnone以外にすること。
色や太さを指定しただけでは表示されない。逆に言えば、スタイルをnoneにすれば枠線を消せるということだ。

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

1［ 枠線で飾りを付ける ］
要素の周囲を単純に囲むだけが枠線の使い方ではない。枠線の太さ、色、スタイルは上下左右で自由に変えられるので、うまい使い方を思い付けば、ページにおもしろいアクセントを付けられる。

見出しの横にマークを付ける
ソース①は、h2要素にborder-leftプロパティーを指定して、見出しの左にだけ枠線を付けたものだ。太さを1em（1 文字分）と極端に太くしているので、見出しに四角いマークが付いているように見える。
見出しの前にいちいち■を書かなくても、CSSを一度書くだけで、ページ中のすべ① tips1-1.htmlての見出しに反映されるのが便利なとこ
h2 { border-left: 1em solid #F88;
background-color: white;
padding-left: 0.4em; font-size: 1.0em; }ろだ。太さや色（#F88）の値を変えて効果の違いを確かめてみよう。

枠線を仕切り線にする
ソース②は、2002年11月号の連載第2回で紹介した、floatプロパティーを使った段組みだ。ID 名が「left」と「right」のdiv要素を左右に並べ、「right」のdiv要素にはborder-leftプロパティーで左に二重線を付けている。まるで段組みの間に上下の仕切り線が引かれているように見える。複雑なテーブルを組んだり、罫線用② tips1-2.htmlの画像を用意したりしなくても、CSSなら

div#main { width: 33em; }div#left { float: left; width: 10em; padding: 1em; }div#right { float: left; width: 18em; padding: 1em;
border-left: 6px double silver; }簡単にこんなデザインができるのだ。な
お、h1要素のマージンを0にしているので（掲載は省略）、二重線が見出しの枠線につながっているように見える。

不思議な形の枠を作る
ソース③のHTMLを表示させてみると、画像を使っているわけでもないのに、見出しに不思議な形の枠が付いて見える。
この形の正体も枠線なのだ。まず、見出し（h1 要素）に黄色い背景色を付ける。
次に、上下の枠線の色をこの背景色と同じにする。さらに、左右の枠線の色をペ③ tips1-3.html

ージの背景色（茶色）と同じにする。あとは、枠線の太さを調整すれば一丁あがり

body { background-color: maroon; color: #FFC; }h1 { background-color: #FFC; color: maroon;text-align: center; font: bold 1.5em Verdana;
border-style: solid; border-color: #FFC maroon;border-width: 8px 16px; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&Dだ。ここでは上下の太さを8ピクセル、左右の太さを16ピクセルとした。枠線の色はborder-color、太さはborder-widthでまとめて指定している。

+++ iNTERNET magazine 2003.03 +++147

2［ 枠線とマウスオーバーの組み合わせ ］
2003年1月号の連載第4回で紹介したマウスオーバーのワザは、もちろん枠線にも使える。
ここでは、hover疑似クラスを利用して、マウスを載せたときに枠線を変化させ、リンクにいろどりを与えるテクニックを紹介しよう。

枠線のトリック1 マウスを乗せると赤い印が付く
ソース①は、第4回の「マウスオーバーで画像を操作」で紹介したのと同じテクニックを使っている。ID名が「link」のp要素の中で、a要素に「display: block」を指定する。すると、リンクがブロック要素のように表示され、幅と高さを揃えて縦に配置できるようになる。ソース①では、さらにa要素にピンクの背景色を塗り、同じピンク色の枠線を左に付けている。そのままでは枠線は背景色と一体化して目に見えない。
第4回と同じく、hover疑似クラスを利① tips2-1.html

用して左の枠線の色を赤にする。リンクにマウスを載せると、左側に赤いマーク
p#links a { display: block; width: 8em;
background-color: #FDD;
margin: 0.2em; padding: 0.2em;
border-left: 8px solid #FDD;
text-decoration: none; font: 1em Verdana; }p#links a:hover { border-left-color: red; }が付くようになる。JavaScriptを使ったテクニックに見えるが、CSSで枠線の色を変化させているだけなのだ。
このページの2つのサンプルがうまく動くのは、ウィンドウズ版IE 5.5以降、ネットスケープ6以降、マッキントッシュ版IE5だ。

枠線のトリック2 スクロールバーのような効果を付ける
ソース②のHTMLを表示させて、リンクの上にマウスを載せて動かすと、赤い四角が二重線の上を滑るように移動する。
まるでスクロールバーのつまみのようだ。
単純に枠線を太くして色を変えるだけでは、マウスを載せるたびに文字がガタガタ動いてしまうし、赤い四角が二重線の中心に載っているようには見えない。そこ
でマージン、枠線、パディングの合計が常に一定になるようにする。枠線の太さに加えて、枠線の外側のマージンと内側の② tips2-2.html

パディングの長さも増減させれば、文字の位置に影響を与えずにスムーズに赤いp#links a { display: block; width: 8em;
margin-left: 4px; padding: 0.2em 8px;
border-left: 4px double #FCC;
text-decoration: none; font: bold 1em Verdana; }p#links a:hover { margin-left: 2px;
border-left: 8px solid red; padding-left: 6px; }148 +++ iNTERNET magazine 2003.03 +++四角が動くようになる。
なお、第4回の「マウスオーバーでポップアップ」と同じく、このテクニックもEricA. Meyer氏のサイトから拝借している。

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

http://meyerweb.com
http://www.meyerweb.com

3［ テーブルの枠線を工夫する ］
テーブルのセルを仕切っている線も、枠線のプロパティーで色、太さ、スタイルを変えられる。ブラウザーは伝統的に、灰色の立体的な線でテーブルの線を表示する習慣があるが、CSSを使えばそんな味気ないデザインも変更できる。

表とセルに枠線を付ける
まずは簡単なサンプルから。ソース①
では、table要素に赤い1ピクセルの枠線を、td要素とth要素に青い1ピクセルの枠線を引いている。table要素の枠線はテーブル全体を囲む線になり、td要素やth 要素の枠線は、各セルを囲む線になる。灰色の立体的な線よりも、CSSでフラットな感じの枠線にするほうが見た目は① tips3-1.html

きれいだ。ソース②は、table要素の枠線
table { border: 1px solid red; }td, th { border: 1px solid blue; width: 5em; }th { background-color: #DDF; }td { background-color: #EFA; }のスタイルをnoneにしてテーブルの周囲の枠線を消し、セルにだけ枠線を付けたもの。ソース①よりもシンプルなデザインになる。
掲載は省略したが、table 要素には属性を付けて「border="1" 」としてある。ネ② tips3-2.html

ットスケープナビゲーター4ではテーブル
table { border-style: none; }td, th { border: 1px solid blue; width: 5em; }th { background-color: #DDF; }td { background-color: #EFA; }セルの枠線をくっつける

関連の要素にCSSで枠線を付けても効果がないが、border属性でふつうの枠線が表示されるようになる。

ブラウザーは伝統的にセルとセルの間にスペースを空けて表示する（分離ボーダー）。ソース③ のように t a b l e 要 素 に「 border-collapse: collapse」を指 定 すると、エクセルの表のようにセルの枠線をくっつけて表示できる（結合ボーダー）。
ただし、border-collapseプロパティーに対応しているのはウィンドウズ版のIEとネ③ tips3-3.html

ットスケープ7だけだ。
結合ボーダーを使えば、テーブルに横table { border-collapse: collapse; border-style: none; }td, th { border: 1px solid red; width: 5em; }th { background-color: #FEE; }td { background-color: #FFC; }方向の線だけを引くデザインもできる。ソース④は、table要素の枠線を消し、td要素の枠線を下だけに付け、th要素の枠線は上下に付けて二重線にしたもの。掲載は省略したが、table要素には属性を付け④ tips3-4.htmlて「rules="rows" 」としている。rules属

table { border-collapse: collapse; border-style: none; }td, th { width: 5em; }td { border: 1px red; border-style: none none solid;
background-color: #FFC; }th { border: 4px red; border-style: double none;background-color: #FEE; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

性がないとネットスケープ7では、縦の線が表示されてしまう。テーブルで線を確実に消すには、スタイルにhiddenを指定すればいいのだが、IEはhiddenという値に対応していない。

+++ iNTERNET magazine 2003.03 +++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.