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

CSSでポラロイド風画像

admin — Wed, 05 Aug 2009 02:10:47 +0000

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

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

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

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

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

■htmlの書き方

shadow" />

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

■元の写真

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

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

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

css @import

admin — Tue, 13 Jan 2009 08:40:49 +0000

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

CSSファイル（スタイルシート）を読み込ませるためには、
htmlファイルの内に

という記述をします。

複数の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」を読み込みこませます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━

━━━━━━━━━━━━━━━━━━━━━━━━━━━

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

Webデザイン3種の神器

admin — Thu, 08 Jan 2009 03:53:28 +0000

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

Adobe Photoshop

世界中のデザイナーが、みんなコレを使っている
世界水準の画像編集ソフトです。
写真を加工するための様々な機能があります。

このアプリは多機能であるがゆえ、ツールパレットがたくさんあり、
小さなモニタでPhotoshopを立ち上げると、
画面のほとんどがツールパレットで埋まってしまいます。
最低でも 1680 x 1050 ピクセル以上のモニタが必要です。

デュアルモニタ（2台構成）にすれば、
1台目のモニタを実際のグラフィックを制作する領域に、
2台目のモニタをパレット群の置き場所にすると、
快適にサクサクとお仕事がはかどります。

Adobe Dreamweaver

値段の安さからでしょうか、素人の方には「ホームページビルダー」が有名ですが、
Web制作のプロは、みんなコレを使ってhtmlを作成しています。

このように画面上部には、ソースコードを
画面下部は、デザインビューを表示させながら作業を行います。
htmlやcssのスキルが無い方でも、Microsoft Wordのような感覚で
htmlを作成することもできます。

よく使うタグを登録できる「スニペット機能」、
サイト全体のファイルの管理できる「サイト管理機能」など、
このアプリの機能を見事に使いこなせれば
htmlコーディングの手間と時間を大幅に軽減できるようになります。

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

素人の方は、あまり重要視してくださいませんが…
フォント（書体）は、デザインに大きな影響を与える重要な要素です。
なかでも、このモリサワフォント「新ゴファミリー」は本当に優れた書体です。

いくらステキなデザインを作ったとしても、
仕上げに載せる文字のフォントがダサかったら、
出来上がりはダサくなってしまうからです。
13万円もするこのフォントですが、

もし私がお金の無い駆け出しのデザイナーだったとしたら
借金してでも、絶対に買いますね。
それでデザインのクオリティが上がるのなら安い投資ですYO!