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

テクニック

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

写真の貼り方に工夫をする

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

ブログと言えば文字ベースのものが多いと思いますが、モブログをはじめとした写主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。通常のサイトとは別に『情報交換広場』というページも増設されました。Wiki で作られていて誰でも気軽に情報を書き足すことができます。あなたの CSS 情報もぜひ書き込んでみてください。

真ベースのブログサイトも最近は増えてきています。中には自作のイラストを毎日掲載している『イラログ』なんていうのも出てきたようです。ブログに掲載する画像も、他のHTML要素と同様に、CSSを使って見た目を変えることができます。そこで今回は画像の表示を工夫するCSSテクニックを紹介します。CSSでちょっとした細工をすることで、画像をより引き立てることもできます。CSSだけでできるちょっとしたものから、額縁風の画像を組み合わせるものまでいろいろ用意したので、あなたのサイトに合うテクニックを試してみてください。

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

1

目に優しいデザインを考える

2

northoftheborder

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

PNGがあなたを揺るがす
essse est percipi

http://www.bradleyboy.com/blog/

http://www.qxm.de/

白背景に黒文字のサイトは多く、一番見やすい配色のよ今回の講座にも登場するPNGはフルカラーの自然画にうに感じます。しかし、白色の部分が多いとモニターからの透明度も加えることができるフォーマットで、うまく使うとこ発光が強く目が疲れやすいという人もいます。このサイトは、のサイトのようにヘッダーと文章を重ね合わせて奥行きの目が疲れにくくて意外に読みやすい、グレーに白字というあるデザインを作れます。残念ながらウィンドウズ版のIEは配色になっています。白のラインが効果的に使われていて透明度をサポートしていないので、スクリーンショットのよう非常に使いやすくなっています。最小限のアプローチが最にはいきませんが、レイアウトを崩さないで回避する方法が大限の効果をもたらす好例ですね。

あるので実装は可能かもしれません。

意外と目に優しい色のバランスとシンプルなデザインがポイント。

PNG の透明度をうまく使ったサイトデザインになっている。

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

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

普通の画像を写真のように見せる1

borderとpaddingを使った写真風の縁取り

by 長谷川恭久

CSSの魅力はなんと言っても、CSSファ

Beforeイルに加えた編集がサイト全体にすぐ反映されるところでしょう。たとえば、すでにAfter

ブログサイトに掲載している画像の見た目を、CSSを使えば一度にすべて変更できるのです。
昔は銀塩カメラで撮影したフィルムを現像してプリントしてもらうと、白い縁の入った写真ができあがったものでした。これと同じ効果をCSSで作ってみましょう。このテクニックは、特別なHTMLコードを追加しなくてもすぐに実装できます。

ただの画像が縁取りの付いた写真風に表示されるようになった。

HTM

LCSS

.entry img{

<div class="entry">

background: #fff;<img src="photo.jpg" alt="photo.jpg"

border-top: 1px solid #ccc;

width="300" height="200" /><p>さすが世界中を旅行し

border-right: 1px solid #666;ているだけあってクリスは世界中の女性とデートしている。「アborder-bottom: 1px solid #666;

メリカにいるキューバ人は金がかかりすぎ」とか「韓国人は今はborder-left: 1px solid #ccc;

愛してくれていても明日になれば殺しにやってくる」とかいろん

float: left;

な格言を僕に炸裂させたのであった。</p>margin: 0 1em 1em 0;</div>

padding: 10px;
}

C S S

テ ク ニ ッ クのキ モ

今回のポイントは、paddingプロパティーでので、必ず何か色を指定しておきましょう。指ですが、この方法を使えば柔軟に写真風の見す。paddingプロパティーは、コンテンツエリ定しないとサイトの背景色と同色になってしまた目にできます。今回、entryクラスの中にあア（今回の場合では画像部分）と、コンテンツいます。

る画像すべてに対して見た目を変えるという方法をとりましたが、細かく設定したい場合はを囲む枠線の間にすき間を作ります。これを写真風の縁取りとは直接は関係ありません

使って写真の縁取りのように見せているのでが、今回の例では写真の右側に文章が表示

画像に「class="frame"」のようにクラスを指定す。また、border プロパティーで上左と下右されるように「float: left」を設定しています。まして、そのクラスに対して上記の CSS 設定をに別々の枠線の色を設定することにより、立た、写真と文章の間に少し間隔を空けておくするのがいいでしょう。

体的に見せるように工夫しています。

ためにmarginプロパティーも指定しています。

なおこの方法はウィンドウズ版の IE 5.0とmarginを入れておかないと、写真と文字がくIE 5.5 では白い間隔がなく枠線だけになってっついて読みにくくなってしまいます。

しまいますが、レイアウトに支障が出ることは

ただし、忘れてはならないのがbackgroundプ ロ パ ティー で の 背 景 色 の 指 定 で す。
paddingで空けたすき間の色は背景色になる

写真と言っても毎回大きさがさまざまのはずありません。

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

画像に影を付けて立体感を出す
2

backgroundによる影とposition: relative、left、topによるずらし技
Beforeby 長谷川恭久

125ページでは画像に縁を付けて写真風に表示しましたが、今度はさらにそこからAfter応用して、写真に影を付けてみましょう。
影を付けることによって画像がより引き立
ち、サイトデザインの良いアクセントになります。
このテクニックも、画像自体は編集することなく、画像の大きさにも依存しないCSSのテクニックとして実現しています。ただし、今回のテクニックは、HTMLにコードを記述してからの作業になります。

写真風にするだけでなく、影が付いている。いちいち画像ファイルを加工するのは大変だが、これもCSSで実現しているテクニックだ。

HTML<div class="img-frame"><img src="photo.jpg"
alt="写真"width="300" height="200" /></div><p>この会社の名物といえばHappy Hourという時間で……</p>CS.img-frame img{
background: #fff;border: 1px solid #999;
padding: 5px;
position: relative;
left: -7px;
top: -7px;}

S.img-frame {margin: 0 1em 1em 0;
background: url(shadow.gif) bottom
right;
float: left;
width:auto;
}

C S S

テ ク ニ ッ ク

ポイントは、写真となる画像をブロックレの

html>body .img-frame {background: url(shadow.png) bottom
right;}

キ モを指定しています。具体的には、最初にすべベル要素内（今回は<div>ですが<p>でも可）てのブラウザーが理解できる GIF の影を設に配置して、そのブロックレベル要素の背景定しておいて、次に「>」（「結合子」と呼ばれとして、影の画像をCSSで設定する点です。ています）を使ってPNGの影を指定していまなければ柔軟に対応できるようにしています。
また、影を画像の右下に配置するための「bottom right」の指定も大切です。
さらに、そのままだと写真の画像と影が完影となる背景画像として、GIFと PNG の 2す。ウィンドウズ版の IE は「>」を使ったスタ

全に重なってしまうので、画像のCSS設定で種類のフォーマットのファイルを指定していイルを読み込めないので、GIFだけを読み込「left: -7px」「top: -7px」を指定して画像を左ます。PNG は半透明にできるので影のようみ、結合子による指定を理解できるブラウザ上へ少しずらします。そのときに、親要素にな微妙な色合いの画像を作るには最適です

ーは後から指定された PNG を読み込むといあたる「.img-frame」のボックスから相対的にが、ウィンドウズ版のIEではPNGがまだ完全うテクニックです。

ずらすために「position: relative」も記述してにはサポートされていません。そこで、ウィン影の画像は、あらかじめ非常に大きなサイおきましょう。左上にずらす値は影の大きさ

ドウズ版 IE をだます形で PNGと GIF の両方ズで作っておくことで、極端に大きな画像でによって異なるので各自で調整してください。

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

写真にゴージャスなフレームを付ける
3

空の<span></span>要素を使った「覆い被さる」画像の配置
Beforeby 長谷川恭久

すでに紹介した 2 つのテクニックは異なる大きさの写真にも柔軟に対応できるものでしたが、こちらはあらかじめ固定したAfter大きさの場合にのみ有効です。とは言うものの、モブログの写真など常に一定の大きさのものを掲載するときに今回のような方法は非常に使えるはずです。今回は2つの画像を重ね合わせることによってあたかも画像をオリジナルの額縁に取り付けたように見せる方法です。
額縁となる画像はCSSで管理するので気分によってどんどん額を替えることも可能です。
白い飾り模様のフレームが付いた。

HTML<div class="photo"><span></span><img
src="confucian.jpg" width="320" height="240"
alt=巨像の前にて待ち合わせ" /></div>

CSS.photo {height: 240px;
position: relative;
width: 320px;}

C S S.photo span{background: transparenturl(frame.gif)
no-repeat 0 0;
height: 100%;
position: absolute;width: 100%;}html>body .photo span{background: url(frame.png)
no-repeat 0 0;}

テ ク ニ ッ クのキ モ

まずは画像の大きさを決めるボックス要素にあたる「photo」クラスの大きさに対してここでも前回のテクニックと同じようにGIFをHTMLで配置します。widthとheightを設定100%を意味しています。これで <span> が画とPNG のフォーマットをそれぞれ用意して対しておくのを忘れてはいけません。その中に像の大きさとまったく同じ大きさで上に覆い被応しています。今回の例のように何か装飾を<span>、次いで画像という順に記述していまさるように配置されるわけです。

入れてもいいですし、PNGの特徴である半透すが、今回のテクニックのポイントは、この背景画像の設定も「transparent」にするの明や影をうまく組み合わせれば、さらにおもし<span></span>の部分です。タグ以外には何と、左上から配置するように「0 0」と記述するろい効果が得られるかもしれません。このテも記述されていないので意味がないと思うかのも忘れずに。

クニックは IE 5.0 のような比較的古いブラウもしれませんが、実はここのCSS設定に額縁となる画像が隠れているのです。
まず <span> に対して CSS で縦横を100%に指定しています。これは <span> の親要素<span> が画像より先に記述されているのザーでも問題なく表示できるのでおすすめなも、『画像の上に被さる』ように見せるためでのですが、「<span></span>」のように空タグす。画像の後に <span>を記述するとこの効を使うので、構造デザインにこだわるのであ果が得られないので注意しましょう。

れば控えたほうがいいかもしれません。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.08 +++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.