横浜のホームページ制作 スタジオFIXの社長ブログ

CSSでポラロイド風画像

Photoshopで簡単ポラロイド風イメージの作り方 を先日ご案内しましたが、
ホームページ上にたくさんの画像を掲載したい場合、
いちいち こんな方法 で画像作成していたら、手間がかかってしまいますよね。
そのような場合は、CSSでコントロールしちゃうのが簡単です。


■元の写真のサイズが横400×縦300ピクセルの場合

緑色の部分が、横400×縦300ピクセルです。
その回りに、枠と影の領域が加わりますので、
画像全体のサイズは、元の写真のサイズより一回り大きい
横410×縦325ピクセルになります。


■CSS (スタイルシート) の書き方

1. img.shadow {
background: url(bg_photo.gif) no-repeat;
padding: 5px 5px 15px 5px;}

■htmlの書き方

1. <img src="001.jpg" width="400" height="300" class="shadow" />

要するに、元の写真の下に背景画像を敷くことで
ポラロイド風に見えちゃうというわけです。


■元の写真


この写真にCSSで背景画像をくっつけると…



この方法なら、ホームページに大量の写真を配置したい場合でも
imgタグ部分に、class=を指定するだけで済むので簡単ですね。（・∀・）


この方法で使用した背景画像は、以下からご自由にご利用ください。
画像をダウンロード
ホームページ制作時にぜひお試しくださ〜い。(^-^)ノ

2009/08/05

css @import

Web標準に準拠したコーディングを行うと、
必然的にCSSファイルに記述される内容が複雑になります。
1枚のCSSファイルに何千行もの記述があると、
目的の箇所を探すだけでも時間がかかってしまいます。
そんな時は、複数のCSSファイルを使う方法がオススメです。


CSSファイル（スタイルシート）を読み込ませるためには、
htmlファイルの内に
<link href="●●.css" rel="stylesheet" type="text/css" />
という記述をします。


複数のCSSファイルを読み込ませるためには
<link href="●●.css" rel="stylesheet" type="text/css" />
<link href="■■.css" rel="stylesheet" type="text/css" />
<link href="★★.css" rel="stylesheet" type="text/css" />
のように、複数行を内に記載してもよいのですが、
これではあまりスマートではありませんね。


そこで、@import という方法を使って、
複数のCSSファイルを読み込む方法を使います。
まず、「import.css」という名前のCSSファイルを作成します。


# 任意のファイル名でOKです。
# 「import.css」、「main.css」、「style.css」
# などのファイル名が一般的です。


「import.css」内に記述する内容は、以下の通りです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
@import url(●●.css);
@import url(■■.css);
@import url(★★.css);
━━━━━━━━━━━━━━━━━━━━━━━━━━━
この「import.css」を読み込ませれば、「import.css」に書かれた
●●.css
■■.css
★★.css
を読み込む仕掛けになっています。


# この時、読み込みまれる順位は上からとなりますので
# 優先度の高い（重要な要素を記述した）CSSファイル名から順に記載しましょう。


そして、htmlファイルの内に 以下のように1行記述して
「import.css」を読み込みこませます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━
<link href="import.css" rel="stylesheet" type="text/css" />
━━━━━━━━━━━━━━━━━━━━━━━━━━━


CSSファイル（スタイルシート）が複雑になってしまって
お困りの方は、ぜひお試しあれ〜。

2009/01/13

Webデザイン3種の神器

私にとっての3種の神器といえば、絶対コレ！
(1) Adobe Photoshop
(2) Adobe Dreamweaver
(3) モリサワフォント「新ゴファミリー」

Adobe Photoshop

Adobe Dreamweaver

モリサワフォント「新ゴファミリー」

2009/01/08