GAUZINE

[GAUZINE:005] Jeffrey Veen

================================================== No.005 99/09/01 ===

  W E B  D E S I G N E R S  M A G A Z I N E  G A U Z I N E

     [BACK NUMBER]  http://www.gaucho.com/gauzine/back/ 

======================================================================
                         配信部数:4,199部
『GAUZINE』 No.005 のライナップ
 ┃
 ┣『CSS入門編』「行間を調節してみよう〜line-heightの使用例」
 ┣『WEBデザイナー養成講座』「ホットワイヤードスタイル」
 ┣『GREAT WEB CREATORS』「graphica 6+」Shinzo Fukui
 ┣『BOOKMARKS』 ちょっと注目したい海外デザイン・スタジオ・サイト
 ┗『編集後記』 懐かしのムービー・告知その他

======================================================================
『CSS入門編』
  「行間を調節してみよう〜line-heightの使用例」
======================================================================

CSS(Cascading Style Sheet/カスケーティングスタイルシート)
というと、どうもややこしいイメージがありますが、基本的な記述方法につい
て少し勉強すれば、思ったより簡単に導入できます。問題は、ブラウザによっ
てその挙動が少しづつ変わってしまうということですが、その点についてはい
ろいろなブラウザで表示確認をすることにより、どのブラウザでも共通して機
能するものを選んで使えばいいことがわかります。

CSSの基本的考え方については、WEB上にも関連する情報がたくさんありますの
で、それらを参考にするのもいいかと思いますが、CSS関連書籍も数多くでて
いますので、書店で何か一冊自分の読みやすいものを選んで読んでみられるこ
とをおすすめします。

CSSについては、ちょっと古いですが以前書いたコラムがありますので、ご覧に
なってない方は一度目を通していただければ、基本的なことはだいたいご理解
いただけるかと思います。

◆ CSS関連コラム
・CSS入門 [1] スタイルシートの現状 (98.07.01)
 ┗ http://www.gaucho.com/shortcut/column/0701.html

・CSS入門 [2] スタイルの指定と記述 (98.07.08)
 ┗ http://www.gaucho.com/shortcut/column/0708.html

・CSS入門 [3] CSSでできること (98.07.15)
 ┗ http://www.gaucho.com/shortcut/column/0715.html

・CSS入門 [4] フォントについて (98.07.22)
 ┗ http://www.gaucho.com/shortcut/column/0722.html

・CSS入門 [5] DIVとSPAN (98.07.29)
 ┗ http://www.gaucho.com/shortcut/column/0729.html


今回は「行間調整」のスタイルシート・サンプルを少しご紹介します。

本来だと「LINK」タイプのスタイルシートを使うのがスマートですが、説明
上、HEAD部分に記述する「EMBED」タイプを使って説明することにします。

わたしが、はじめてCSSを知ったとき、いいなと思った機能は「行間を調整で
きること」でした。Macのブラウザの場合、もともと125%の行間がとってある
ので、ある程度読みやすかったのですが、Windowsのブラウザの場合、デフォル
トだとかなり行間がつまって表示されます。CSSにより、この問題が解決できる
ので、さっそく使おうと思ったわけです。ほかにも、いろいろな機能はあるの
ですが、とりあえず「行間が調整できる」だけで、かなり見やすさは変わって
きます。

「css tips 001」でもすでに紹介済みですが、具体的にはこんな記述を使って
います。

<HEAD>
<STYLE TYPE="text/css">
<!--
.h150{line-height:150%}
.h140{line-height:140%}
.h130{line-height:130%}
-->
</STYLE>
</HEAD>

<BODY>
<DIV CLASS="h130">
ここに入る本文の行間が、130%になるわけです。
150%にしたければ、"h130"を"h150"に書き換えるわけです。
指定する単位は、%だけでなく、ptゃpxなどでも指定できます。
ただし、この間に画像がある場合は、ブラウザによっては、文字と画像が重な
ってしまう場合があるので、下のように画像部分だけ指定からはずします。
</DIV>

<IMG SRC="abc.gif" ALT="画像" width=128 height=128 BORDER=0>

<DIV CLASS="h140">
こんな感じで分けて記述するのが無難です。
</DIV>
</BODY>

フォントサイズも指定したい場合は、
<STYLE TYPE="text/css">
<!--
.h150{line-height:150%;font-size:12px}
.h140{line-height:140%;font-size:12px}
.h130{line-height:130%;font-size:10pt}
-->
</STYLE>
などと指定します。

直接、部分的に行間を調整したい場合は、
<DIV STYLE="line-height:150%">
本文1
本文2
</DIV>
のようにインライン指定します。

BODYタグやTDタグに、直接line-heightを指定してしまえば、もっと簡単なよう
な気もしますが、前述の文字と画像重なり問題があるため、現状ではTABLEタグ
で仕切ったプロック内のテキストに指定することが多いかと思います。

指定方法はほかにもいろいろあると思いますが、各ブラウザで実験しながら、
その挙動を確認していくのが、現状では一番無難な方法かと思います。


◆ CSS関連サイト
----------------------------------------------------------------------
「HotWired: Webmonkey: stylesheets collection」
 ┗ http://www.hotwired.co.jp/webmonkey/stylesheets/
----------------------------------------------------------------------
「Super Style Sheets Reference」
 ┗ http://www.zspc.com/stylesheets/
----------------------------------------------------------------------
「見る人に優しいウエブ作成〜スタイルシート入門」
 ┗ http://www03.u-page.so-net.ne.jp/sc4/ken_yuu/www.html
----------------------------------------------------------------------

======================================================================
『WEBデザイナー養成講座/基礎編』
 WEB制作を行なう上での基礎理論〜WEBデザイナーズ・バイブル[5]
 「ホットワイヤードスタイル〜Webデザインを進化させる10の発想」
======================================================================

◆「WEBデザイナーズ・バイブル」
今回ご紹介する書籍は、

 「ホットワイヤードスタイル〜Webデザインを進化させる10の発想」
     Jeffrey Veen 著・Gohsuke Takama 訳 
      (デジタルハリウッド出版局/駿台社/\3,800+税)
        [ http://www.dhw.co.jp/publishing/ ]
        [ http://www.veen.com/style/ ]

です。著者のJeffrey Veen(ジェフリー・ヴィーン)
[ http://www.veen.com/veen/jeff/ ] は、Wired Digital社のディレクターで、
Webmonkey[ http://www.hotwired.com/webmonkey/ ]にてコラムを執筆する一方、
W3CのHTMLとCSSのエディトリアル・レビュー・ボードの役員なども務めている
とのこと。

内容的には、「HotWired」サイトを試行錯誤しながら構築していったプロセス
の紹介から、Web制作全般にわたっての示唆に富んだ考え方など、Webメディア
創世期を歩んできた著者ならではのコメントが随所に繰り広げられています。

自分のつくるサイトが、ライブリラリー型(説明型)なのか、ギャラリー型
(探検型)なのかを明確にした上で、両者の特徴をうまく組み合わせながら、
インターフェイスを設計していくプロセスが詳細に解説されています。

----------------------------------------------------------------------
◆「ホットワイヤードスタイル」書籍紹介
┗ http://www.dhw.co.jp/publishing/
----------------------------------------------------------------------
◆「HotWired」
┗ http://www.hotwired.com/
----------------------------------------------------------------------
◆「HotWired Japan」
┗ http://www.hotwired.co.jp/
----------------------------------------------------------------------
◆「HotWired: Webmonkey」
 ┗ http://www.hotwired.co.jp/webmonkey/
----------------------------------------------------------------------
======================================================================
『GREAT WEB CREATORS』
    「graphica 6+」 http://shinzo.com/  Shinzo Fukui
======================================================================

今回は「graphica 6+」 http://shinzo.com/ をはじめ、数々のWEBサイトのデ
ザインやディレクションを手掛けられている"Shinzo Graphica & Associates"
の福井信蔵氏をご紹介致します。

昨年、開催された「ウェブデザイン・アワード1999」
http://www.webdesign.or.jp/WDA99/award/
でも、見事金賞に輝いた「graphica 6+」ですが、国内のみならず海外でも高
く評価されています。

配色、レイアウト、構成等の完成度はもちろんのこと、「design Lab」におけ
る、TABLE、JavaScript、DynamicFontsを応用したさまざまな実験的表現から
は福井氏のWEBデザインに対する強い探求心が伝わリ、WEB表現の可能性を追求
したサイトともいえます。

・Web Design Laboratory
  http://shinzo.com/6+/laBo/index.shtml
・Tagraphic
  http://shinzo.com/6+/laBo/tagraph/hot_tab.html
・Motion Text
  http://shinzo.com/6+/laBo/motiontext/index.html

企業サイトも数多く手掛けられており、
「Web年鑑1999」 http://www.webdesign.or.jp/WDA99/
の制作者のクレジットを見れば、いたるところに「福井信蔵」氏の名前を見つ
けることができます。

7月に東京に行ったとき、南青山のオフィスに初めてお邪魔させていただきま
した。「Web年鑑1999」制作当時の苦労話など、いろいろ聞かせていただき、
充実した時間を過ごさせていただきました。今後ともご活躍期待しておりま
す。

◆ 福井信蔵氏 インタビュー記事 CNET JAPAN : Newsmakers
┗ http://japan.cnet.com/Newsmakers/Shinzo/

◆ 福井信蔵氏 関連サイト
┣ http://shinzo.com/http://www.viewon.net/http://www.so-net.ne.jp/http://biztech.nikkeibp.co.jp/http://www.felissimo.co.jp/necktie/http://www.coolindex.com/birth/clip/http://www.webdesign.or.jp/WDA99/
┗ その他多数

======================================================================
『BOOKMARKS』
  ちょっと注目したい海外デザイン・スタジオ・サイト
======================================================================
----------------------------------------------------------------------
◆ Process 39 
┗ http://www.process39.com/
----------------------------------------------------------------------
◆ Braincraft 
┗ http://www.braincraft.com/
----------------------------------------------------------------------
◆ Gummo
┗ http://www.gummo.com/
----------------------------------------------------------------------
◆ OOTWORLD
┗ http://www.ootworld.com/
----------------------------------------------------------------------
◆ BRAND A DESIGN
┗ http://www.brand-a.com/
----------------------------------------------------------------------

======================================================================
『編集後記』
  懐かしのムービー・告知その他
======================================================================

最近、gaucho.com の存在を知った方のために、初期の懐かし「Shockwave
ムービー」をひとつご紹介しておきます。まだ、Flashがなかった96年10月ごろ
作ったものです。ガウチョLャラが、ただブーメランをして遊ぶという単純な
一発ギャグものです。見るには、Shockwaveプラグインが必要です。

ガウチョのプーメラン (MIDI付き)
 ┗ http://www.gaucho.com/gallery/shock5.html

『週刊ギャビー』 http://www.gabby.net/ の夏休みも終わり、9月より再開し
てますので、こちらもよろしくです。今週は「雑誌サイト」特集です。
 ┗ http://www.gabby.net/core/review/0901.html


『GAUZINE』に関するご意見、ご感想、メッセージはゲストブックへ
 ┗ http://www.gaucho.com/cgi-bin/gauzine/im_bbs.cgi

次回発行は9月15日(水)の予定です。
最後までご覧になっていただき、誠にありがとうございました。

====== WEB DESIGNERS MAGAZINE 『GAUZINE』 ==========================
 発 行    G A U C H O  [ http://www.gaucho.com/ ]
 編 集    尾崎 英明  [ mailto:gaucho@hal.ne.jp ]
 登録・解除  [ http://www.gaucho.com/gauzine/home.html ]
 メッセージ  [ http://www.gaucho.com/cgi-bin/gauzine/im_bbs.cgi ]
 Copyright(C) 1999. WEB DESIGN STUDIO GAUCHO. All rights reserved.
======================================================================

このメルマガは現在休刊中です

このメルマガは
現在休刊中です

ついでに読みたい

このメルマガは
現在休刊中です

他のメルマガを読む