「デザインの教室」(佐藤好彦)

『線を使ったデザイン』

―デザインの中での線は、「分ける」「揃える」「強調する」「結びつける」という機能を持っている。


試しに、「分ける」「揃える」の機能を持った線を使って描いてみた

透明PNG スターハック

参照「講師日和
参照「CSS工房 きくちゃん」
参照「CSS Hack Lab


例えば「h1」を透過PNG画像にして背景に重ねる場合


お化けみたい・・・笑

《html》

<body>

<div id="container">

<div id="header">

<h1><img src="images/dollcolection_chuush.png" width="100" height="140" ></h1>

</div>

</div>

</body>



CSS

@charset "Shift_JIS";

*{
margin: 0;
padding: 0;
}

#container {
background: url(images/PICT0107-01.jpg) no-repeat;
height:337px;
width:450px;
}

*html h1{
  width: 100px;
  height: 140px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src=images/dollcolection_chuush.png);
}
*html h1 img{
display: none;
}

#header h1 {
margin-left: 160px;
margin-top: 150px;
}

透明PNGの使われ所

(例)メナード

しごとのはなし

今日(注文の多い)お客さんにサイトの作り終わった部分のページを提出したら、


「すごくいいです!前のサイトよりとても見やすくなったし、サイト全体の雰囲気も気に入っています。
完成が楽しみです。こちらも素材の商品撮影を撮っています。引き続き宜しくお願いします。」


と、嬉しい嬉しいメールがきた。



先日、先輩に頼まれたオンラインショップのカンプデザインをなかなか短時間でうまくできた、と思って提出したら、
「はっきりいってクオリティー低すぎ」とたくさん指摘をされて、(普段優しいけど、こうやって厳しく指摘して気付かせてもらい、とてもありがたい)
若干凹んだ後だったので、余計嬉しかった。


いろいろ、お客さんも、こっちも大変だったけど、
完成したサイトを納品して、喜んでもらえることと、作り終わった達成感が
この仕事で一番やりがいを感じられる瞬間だろうなー という気がしてきた今日この頃。