* You are viewing the archive for 6月 4th, 2007

スタイルシートを利用して画像に枠をつける小技

こんにちは。渡部です。
今日はスタイルシートを利用してこんな感じの枠をつける小技をご紹介します。

PNG Overlayという技法


 

PNG overlayという技を応用しているのですが、この技法でJPEGやGIFの上にマスクのような感じで透過GIFのフレームを乗せることができます。

まずHTMLこう書きます。

<div class=”frame”>
<img width=”157″ height=”102″ src=”./food_photo.jpg”>
<div class=”photo_frame”> </div>
</div>

次にCSSは以下のように定義します。

.frame {
position:relative;
margin:5px;
}
.photo_frame {
background:url(‘./photo_frame.gif’) no-repeat;
overflow:hidden;
position:absolute;
top:0px;
left:0px;
width:180px;
height:105px;
}

たったこれだけです。

原理としては、positionという要素を上手く使います。まずはrelative属性でブロックを囲い(.frame)表示させたい写真を置きます。フレーム画像は absolute属性を付けることで(.photo_frame)、最初に置いた写真に重ね、枠の付いた写真になるといった具合です。
※枠となるGIFとクラス名は適当に命名してください。

言われてみればなるほどな、という感じ。これならわざわざPhotoshopなどで加工しなくても1度定義してしまえば再利用が可能なので、便利だと思います。

Continue Reading

かしまなだメロン

じゃーん!本日のおやつは、取締役のお母様からの贈り物。
いつもながらのお心づかいありがとうございます!
 RIMG0102.JPG

高級メロンでございます。
ジューシーな感じがこの写真でお伝えできれば!
あまなつには、毎年たくさんの旬の果物が届きます。
全て取締役のお母様からのお気持ちです。。。
この贈り物はとてもおいしいだけでなく、私たちに季節の移り変わりを感じさせてくれます。
皆、昨年メロンを頂いた頃のことを思い出し、語り合いながらおいしく頂くあまなつイベントとなりつつあります。(図々しくてもうしわけありません。。。。)

RIMG0091.JPGRIMG0096.JPG

このメロンさんは「食べ頃」の見極めが肝心らしく、「メロンのおねがい」なるものが同封されいました。
しかし、この内容を読んでみると、、、
あまなつスタッフみんなこれ暗記してる。。。
そして、今回もあのかぐわしい香りはまだか?まだか?
としょっちゅうメロンのおしりのにおいを嗅いでました。。。

久々に丸々洗車したのだが

日曜日はとにかく天気が良くて、何をする予定もないので早起きして洗車をしてました。
手順としては、
内装の整理→マット洗い→水かけ→窓の磨き→洗剤洗い→水洗い→拭き取り→窓のコーティング→最終拭き上げ→掃除機→内装の水拭き→エンジンルームの拭き取り→フィルターの掃除
とやりつつ、気づいた点いくつか…。
・フィルターの交換
・エアコンフィルターの交換
・パワステオイルの交換
・タイヤのローテーション
来月車検なので、ディーラーにお願いしなければ…。
気が向いたので、そのままディーラーに行って車検の見積もり。
とりあえず、コンディションはすごく良いとの事で交換する部品も少なめだったのが幸いだが…。
それでも、20万ちょっと切れるくらい…。
税金高い…。
来月の出費はすごそうだ。