-
CSSでポラロイド風画像
Photoshopで簡単ポラロイド風イメージの作り方 を先日ご案内しましたが、
ホームページ上にたくさんの画像を掲載したい場合、
いちいち こんな方法 で画像作成していたら、手間がかかってしまいますよね。
そのような場合は、CSSでコントロールしちゃうのが簡単です。
■元の写真のサイズが横400×縦300ピクセルの場合
緑色の部分が、横400×縦300ピクセルです。
その回りに、枠と影の領域が加わりますので、
画像全体のサイズは、元の写真のサイズより一回り大きい
横410×縦325ピクセルになります。
■CSS (スタイルシート) の書き方
img.shadow {
background: url(bg_photo.gif) no-repeat;
padding: 5px 5px 15px 5px;}
■htmlの書き方
<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
-
Dreamweaverが重い
外注さんに制作してもらったファイルを確認しようと、
Dreamweaverで htmlファイルを開いたのですが、
Dreamweaverが、異常に重い…。
htmlも、CSSも、たいした内容じゃないのに、
ファイルを開く度に「固まった？」と思うほど、いちいち時間がかかります。
私の環境は、Macintosh OSX / Dreamweaver CS3なのですが、
試しに、Windows XP / Dreamweaver2004で開いてみたところ
なーんの不具合もなく、サクサク動きます。
最初は我慢して使っていたのですが、
あんまりのヒドさにストレスがMAXを迎え、原因究明に乗り出したところ、
どうやら、id、class名に「-」（ハイフン）が使われていることが原因のようでした。
スタイルシート上で、idや、class名に「-」（ハイフン）を
利用すること自体は、W3C基準に準拠しているのですが、
「ハイフン」と「マイナス」は、どちらも同じ「-」という記号です。
id、class名に「-」を使うと、それに対して
「これはマイナス要素じゃなかろうか？」という検証を
いちいちDWが行っているせいで
プレビュー画面が極端に遅くなってしまうようです。
試しに、id、class名に使われていた「-（ハイフン）」を
「＿（アンダーバー）」にしてみたところ、
いつものように、軽快にDreamweaverが動きだしたからビックリです。
軽いファイルなのに、Macintosh OSX / Dreamweaver CS3環境で
動作が重くて困っていらっしゃる方がいたら、
スタイルシート内で、id、class名に
「-（ハイフン）」が使われていないかどうか確認してみてくださいね。2008/12/01
