PHP、アート、カフェ、ヒーリング、音楽などなど様々なジャンルのコラムを配信中!
- HOME
- コラム
- (X)HTML+CSS
- WEBクリエーターが教える・・HTMLタグ10個覚えりゃ一人前 其の六 画像切抜編
WEBクリエーターが教える・・HTMLタグ10個覚えりゃ一人前 其の六 画像切抜編2007-06-13 (Wed)
-
ということで序章でHTMLマークアップを完成させたと仮定。
今度は序章の切り抜き用画像を実際切り抜いていきます。
今回、画像の切り抜きはCSSのマル秘テクニックを覚えるため画像のような感じで切り抜きます。
画像の切抜きはこのように出来るだけ小さく容量を抑えて切り抜きましょう。
とその前にディレクトリ構造をまず構築しましょう。
最近では整理のためCSSディレクトリ内にimgディレクトリを入れ、CSSで読み込む画像はそこに置いてます。 -
■ディレクトリ構造
┣ index.html (HTML)
┣ img/ (HTML読み出し様画像フォルダ)
┗ CSS/
┣ img/ (CSS読出し用画像フォルダ)
┗ style.css (CSS)
CSSコーディングはフルブラウザ対応で進めていきます。
切り抜いた画像は下記よりDLください。
切抜画像のダウンロード
