40歳からのインターネット入門H

わたしの生活工房は、等身大の生活情報ポータルです

スタイルシートとの出会い

ただし、画像は使わなくても多少は画面にメリハリをつけたい。 どこかのクールなサイトからjavascriptをパクってこようか?

いや、Javascriptでは、画像の差し替えやポップアップウィンドウなどの操作はできるが、 あまり奇をてらっても良くないし・・・

・・・そう思ってHTMLやJavascriptの参考書を本屋で眺めていると、 HTML&CSSとか、スタイルシートとかの本が目にとまった。

「スタイルシートステップアップアレンジブック」 という本である。

パラパラめくってみると、まず、ページ更新のメンテナンス性を向上させることができる。 という記述と、XHTMLの規格では、画面制御のタグが排除されつつあるという記述が印象的だった。

ステップアップの題名どおり、順を追って、ページの印象が変わるデザインをカラーで紹介してあり、 わかりやすそうだったので、思わず購入してしまった。

びっくりしたのは、スタイルシートで、メニューバナーに載せるボタンの文字を変えるだけで ボタンを作成する必要がなくなることで手間を省き、ページが軽くなるという一石二鳥の技や マウスオーバーで画像を入れ替えたり画像を透かしてメニューを入れたりというjavascript同等のことができたり スタイルシートでできることを知り、目からウロコだった。(正しくは目からウロコが落ちた。)

そして、この本のソースを真似て、スタイルシートでページを制御することを学んだ。 この本を見ていただくと、わたしのサイトのデザインがこの本のパクリだとわかるだろう。

 

本以外でも、スタイルシートを扱ったサイトは多い。

とても親切でわかりやすいページをいくつかご紹介したい。

 

Cascading Style Sheets Reference

ここはまるでCSSの事典である。文字通り個別の定義の記述がわからなくなったときはここへ入って調べる。

AWCS(Aki's Website Conversion System)

ここは記述例と表示イメージが併記してあるので、「あ、これいいな。使いたい。」という時に即効で利用できる。

いろずかん

ホームページの配色をアドバイスしてくれるサイト。

自慢ではないが、わたしの色使いのセンスの悪さは、 美川憲一や小林幸子の紅白歌合戦の衣装を笑えないくらいひどいと女房から言われている。 ここのサイトは自分のセンスを認識し反省するという意味で、とても参考になる。

真・てすたーの「倉庫」

ここのCSSもすごい。速効で使えるコピーアンドペーストのCSSやjavascriptの小技が満載である。

アサガ印

ここはCSSだけでなく、フリーで使える壁紙やアイコンもあり、とてもセンスがいい。 楽をして軽くてかつ高機能な小技が多く紹介してある。

こうしてホームページの骨格は完成した。

後は、コンテンツの吟味とひたすら内容を記述していくだけだ。 サイトのコンテンツ作成は、2月から4月にかけてコツコツ続けた。

 
おすすめ
スタイルシートステップアップアレンジブックスタイルシートステップアップアレンジブック


Copyright(C) 2004 - Akio Yutobi All rights reserved.