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

CSS

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

画像をスマートに使ってデザインしよう

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

CSSのプロパティーをひととおり覚えても、それをどう使ってクリエイティブなレイア

主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。CSSのテクニックだけでなく、CSSにまつわる最新情報も随時更新しています。また、情報交換広場にもたくさんの CSS 関連のサイトのリンク集が用意されているので、ぜひそちらもチェックしてみてください。

ウトを作るのかが、デザインの難しいところです。たとえば画像を加えることによって表現の幅が広がりますが、画像の使い方と言っても、単にbackgroundプロパティーに画像を貼り付ける以外にもさまざまな手法があります。背景として使う場合でも、ちょっと工夫するだけで、おもしろい見た目や意外な効果を生み出せます。また、CSSを使いこなすだけでなく、スタイルを適用するXHTMLもきちんと記述すれば、表現の幅が広がることもあります。今回はそれらの要素を考慮した応用テクニックをいくつか紹介します。

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

1

CSSでオシャレに便利サイト
Lee Jeans2

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

車メーカーも負けていません
Chevrolet
http://www.chevrolet.com/

http://www.onetruefit.com/

ジーンズメーカーのLee。大手企業のサイトも本格的に最近では車メーカーでもCSSを使っているサイトが出てCSSデザインにしている好例だと思います。Flashを使っきましたが、このページは徹底的に構造化されています。左たビジュアルに訴えるプロモーションを前面に押し出しながのナビゲーションはJavaScriptを使ったダイナミックメニュ−

らも、全体のレイアウトやナビゲーションはしっかり構造化になっていますが、HTMLは構造化された定義リストになっされています。製品カタログのページもきれいにまとまってています。他のページもさまざまな工夫がなされており、間います。CSSサイトと言ったらシンプルなのが多い中、Lee違いなく非常に参考になるサイトです。

らしさがレイアウトにも出ているところに好感をもてます。

一 見して 完 全 にCSSでデザインされたサイトには見えませんが、ページデー
タは XHTML で構造化されています。

124 +++ iNTERNET magazine 2005.02 +++クリックすると拡張される動的なメニューですが、スタイルシートをオフにすると普通のリストとして表示されます。

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

レイヤーの重なりとスクロールを組み合わせる
1overflowとz-indexの組み合わせby 真鍋智彦

先月解説した overflowを使用する際に、Before

さらに z-indexを組み合わせると、今までAfterテーブルレイアウトのみでは不可能だったレイアウトも簡単に実現できます。この例
では、z-indexを使用して画像レイヤーを部分的に重ねています。誌面ではわかりにくいのですが、overflowでスクロールさせているテキスト部分が、スクロールさせると画像レイヤーの中へ消えていくデザインになっているのがポイントです。具体的には、見出しの<h3>タグに指定した楓の画像の下に、<div>ブロックのテキストがスクロールするテキストが楓の中へ消えていくように見えます。

HTM流れ込むようになっています。

L<h3>秋の味覚情報</h3><div><p>秋といえばおいし〜ものがいっぱい！！……</p></div>CSh3 {position: absolute;
top: 15px;
left: 46px;
background: url(heading.gif)
no-repeat;
margin: 0px;
padding: 0px;
width: 162px;
height: 55px;

テ ク ニ ッ ク}
div {position: absolute;
top: 50px;
left: 50px;
border-left: solid 1px #CC0000;
border-bottom: solid 1px #CC0000;
margin: 0px;
padding: 15px 5px 15px 10px;
width: 160px;
height: 80px;
overflow:auto;
z-index: 0;}

SC S S

overflow: hidden;
text-indent: -100em;
z-index: 1;の<h3>position: absolute にして お い てとz-index の設定が有効にならないので注意

らはみ出させておいて、はみ出た部分を表示

position、top、leftでウィンドウ内の左上からが必要です。z-index の値は整数で指定しまさせないように「overflow: hidden」を指定しの位置を指定しています。<div>タグのほうにす。0が基準となっていて、値が大きいものほます。

も同様に位置の指定をしてありますが、ここでど上に重なるようになります。今回の場合は<div> のほうは、widthとheight でボックス

先ほどの <h3> タグのボックス範囲と少し重<h3>を上に重ねたいので、<h3>に「z-index:範囲を指定して、「overflow:auto;」を指定するなるように配置するようにしておきます。楓と1」、<div>タグに「z-index: 0」としました。

ことではみ出た部分をスクロールして見られテキストが重なるレイアウトはこうして実現し見出し画像の下にテキストが消えていくようるようにしています。これで、インラインフレーに見せるには、まず<h3>のbackgroundに透ム のような 状 態 が できあがります。後 は、次に、ボックスの重なりの順序を指定する

過処理をした楓の画像を指定します。次に、borderやbackgroundなどを指定してボックスためにz-indexプロパティーを指定します。た<h3> 内のテキストを表示させないように、を装飾するなど、いろんな表現方法を試してだし、ボックスにpositionが指定されていない「text-indent: -100em」でテキストをボックスかみるといいでしょう。ています。

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

フォームを正しく美しくデザインする
2<fieldset>や<legend>などのフォーム用タグの使用

by 長谷川恭久

フォームにはフォームの要素がどのようなBefore

情報を表しているのかを説明するためのAfter

HTML タグがいくつか存在します。それらのタグを正しく記述すれば、アクセシビリティーが向上するだけでなく、<div> のような余計なタグを増やさずに細かくスタイルを継承させられるというメリットがあります。これに加えて画像を使えば表現がさらに広がりますが、今回はフォームに使う基本的なタグを使って CSS の属性だけで見た目をカスタマイズしてみましフォーム要素もCSSできれいにデザインしていますが、余分なクラスやIDの指定はしていません。

HTMょう。

L<form method="post" action="test.cgi" id="contactform"><fieldset><legend>個人情報</legend><label for="pname">名前</label><input type="text" id="pname" name="pname" /><label for="email">メール</label><input type="text" id="email" name="email" /><input type="submit" id="submit" value="送信" /></fieldset></form>CSS

form#contact-form{background: #C5BEC3;
border: 1px solid #776B65;
padding: 0.5em 1em 1em 1em;
width: 17em;
}

C S S

テ ク ニ ッ ク

form#contact-form fieldset{
background: #D0CBD1;}
form#contact-form legend{color: #534B48;}
form#contact-form label{color: #534B48;
display: block;
margin: 1em 0 0 0;}
form#contact-form input#pname,form#contact-form input#email{border: 1px solid #776B65;
width: 13em;}
form#contact-form input#submit{
margin: 1em 0 0 0;
width: 13em;}のHTMLタグの<fieldset>は、フォーム内の入ムを作るときには、<hr> などを使うよりも、こ力フィールドやボタンなどの要素をグループ分のように <fieldset>を使うほうがよりよく構造けするためのものです。同じグループに属す化できます。

かく指定することも可能です。
CSS でレイアウトを作るには <div>を使わないと難しい場合が多いのですが、フォームさらに、フォームもCSSでデザインできるののレイアウトに関しては、今回のようにHTML<fieldset>の中に<legend>要素を置いて、どですが、こちらはシンプルに背景色と文字色をきちんと記述すれば、<div>を一切使わなくういったグループなのかを明記します。この2の指定しかしていません。もう少し凝ったデザても自由にデザインを組めます。入力フィール

つのタグを使えばCSSを使わない状態でもグインは次のページで紹介するテクニックを参ドは標準ではへこんだ状態ですが、この見たループになっている要素の周りに枠線が引か照してください。<fieldset> の外にもう1 つ枠目を変えたいときは border プロパティーを使れて、<legend> に指定したキャプションのテ線を付けるには<form>にスタイルを指定しまうといいでしょう。

キストが<fieldset> で引かれた枠線の左上にす。また、フォームフィールドの説明を記述す重なるような形になって表示されます。フォーる<label>を使って文字の大きさや配置を細る要素を <fieldset> の中にまとめて、その126 +++ iNTERNET magazine 2005.02 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

画像を使ってフォームの要素をデザインする3

backgroundでの画像指定とborderやwidthの設定
Beforeby 長谷川恭久

フォームと言えば、文字を入力する四角い入力フィールドがあって、その横に何を入After

力するのかの説明が書かれているようなものが一般的です。スタイルシートで枠線の色を変えたり背景色を変えたりできますが、それでも今までのフォームの見た目と大きく変わるわけではありません。そこでボタンなどのフォーム要素に注目してみます。ブラウザーやOSに依存した四角いボタンや入力フィールドではなく、画像を使ったオリジナルなフォーム要素にしてみアイコンの付いた角が丸い入力フィールドとグラデーションのかかったボタンのフォームはシンプルですが特徴的になります。

HT

Mましょう。

L<form method="post" action="test.cgi"><input type="text" id="search" name="search"value="" /><br /><input type="submit" id="submit"
value="検索" /></form>CSS

input#search{background: transparent url(search.gif)
no-repeat 0 0;
border: none;
font-size: 12px;
height: 25px;
padding: 5px 15px 0 25px;

C S S

テ ク ニ ッ ク

width: 240px;
w\idth: 200px;}
input#submit{
background: transparent url(submit.gif)
repeat-x;
border: 3px double #999;
border-top-color: #ccc;
border-left-color: #ccc;
color: #333;
font-size: 12px;}
input#submit:active{
background: transparent url(submit-active.gif)
repeat-x;
border: 3px double #ccc;
border-top-color: #999;
border-left-color: #999;
color: #000;}のるので、画像を使うならば枠線が邪魔になります。今回のように<a>以外の要素にも疑似は、画像を入力フィールドの背景として貼り付ます。
「border: none」を指定して枠線を消してクラスを使えますが、IE では適用されないのけます。横幅と高さはスタイルシートでも定義おくといいでしょう。

で注意です。また、SafariやCaminoのような入力フィールドにオリジナルの画像を使うにしてあるので画像の大きさもそれに合わせる

ボタンにもオリジナルの画像を使っていま

CocoaベースのMac用ブラウザーはボタンやといいでしょう。入力フィールドの見た目があすが、枠線を付ける前提の画像にしたため、フィールドの見た目を変えられないので、独自まりにも変わっているとそれがフォームだと気枠線は残してあります。また「:active」疑似クのものを使う場合にはこちらも注意が必要にづかない人も意外と多くなるので注意しておラスを使うことで、ボタンをクリックすると背景なります。

きましょう。今回の例のようにアイコンを追加

色や枠線の見た目が変わるインタラクティブ

しておくと、テキストで説明しなくても入力フィなボタンを実現しています。
「:active」疑似クールドの意味がわかりやすくなります。

ラスはリンクの <a> 要素に使われることが多入力フィールドには標準で枠線が付いていいため、多くのブラウザーでサポートされていインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2005.02 +++127

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