CSSフレームワーク

MDNの最新号に、CSSフレームワークという記事が書いてあった。

私自身、最近Webサイトを作る機会が多く、
HTMLとCSSのテンプレートを作ろうと思っていたのですが、それそのままといった感じですね。

フレームワークというとすごくプログラミングな感じがします。
CSSテンプレート、という言い方のほうが砕けた感じで好きなのですが、
語弊があるといけないのでCSSフレームワークという言葉を使いたいと思います。

このCSSフレームワークの役割としては、レイアウト別にCSSがいくつか用意してあって、
そのCSSをHTMLに組み込み、idを指定するだけでサイトの大まかな段組が完成する、
という仕組みです。

自分でCSSが書ける身としては、ブラウザ同士の互換性チェックが
悩みの種であると同時に楽しみでもあるのですが、
楽しんでる暇がないときも大いにあります。

そんなときにこれを利用して作ったら楽なのではないかと思います。

自分でもテンプレート作りをしてみたいと思います。

DOMScriptingについての本

以前から、HTML（XHTML）やCSS以外の
WebデザインやJavaScriptやFlashについても学ぼうと考え、
ちょこちょこと制作を続けてきましたが、
最近DOMScriptingについて学ぼうかと考えています。

理由は、HTML・CSS担当の私にとって、
FlashやActionScriptよりも、Javascriptを使ったDOMの方が、
領域的には近いかもしれない、と考えたからです。

しかし、
今だFlashサイトも完成させたことがなく、
Webデザインについてもハンパな状態。
卒業研究もまだまだ牛歩牛歩。

あんまり移り気なのもよくないな、と思い、
とりあえずDOMScriptingの書籍だけリスト化することにしました。

１．DOM Scripting 標準ガイドブック ~やさしく学ぶ、JavaScriptとDOMによるWebデザイン~

毎日コミュニケーションズ率いるWebDesigningから出た雑誌のよう。
値段は3000円で分厚いのですが、基礎の基礎から書いてあって、
本屋さんでぱらぱら見た感じ、一番わかりやすかった。

２．WebクリエイティブのためのDOM Scripting （Web Designing Books）

これも毎日コミュニケーションズから。
厚さはわりと薄め。

本屋さんで探しているときは気付かなかったんですが、両方ともマイコミ本でした。

あとは、両方の書籍の著書である、中村さんのマークアップエンジニアのためのDOM Scripting + jQuery
という資料が興味深い。

３．Web標準テキスト(1) DOM Scripting

技術評論社から出ている書籍。
私の悪いクセなのですが、こういった書籍をわりと第一印象で選んでしまうことが多いです。
なんとなく、技術者向けの近寄りがたい印象のある表紙なのですが、
今度見つけたらめくってみます。

とりあえず今日の目標は、今後の予定を明確にすること。

卒業研究に取り組む時間、
バイトの日程、色々と明確にして、
DOMやFlashやデザインの勉強をする時間があるかどうか、
それをはっきりさせてから本を選んで買おうと思います。

ヘッダとフッタがある２カラムのサイトでheightを100%にする

コンテンツの量が少ないサイトでも、メインカラムをブラウザウィンドウ最大に表示する方法
（技術的に言うと、ボックスのheightを常に100%表示にする方法）
は色々と紹介されていたのですが、
私のPCではなかなかうまくいかなかったので、色々と考えました。

結果、以下のような方法にたどり着いたのでご紹介。

対応ブラウザ

• IE5、6、7
• Firefox
• Opera
• Safari
• Netscape(9.0)
• Google Chrome

様々なブラウザで検証してみたのですが、
IE8のベータ版だけうまくいきませんでした。（あきらめました。）

IEは互換モード・標準モード問わずきちんと表示されます。

実装例はこちら。

それでは詳しい解説は以下でどうぞ。

Helvetica展に行ってきた

昨日、研究室の友人と共に
ヘルベチカ展
「A tribute to Typography 〜ヘルベチカの過去・現在・未来」
に行ってまいりました。

会場内では、Helveticaフォントの成り立ちや他のフォントの比較、
Helveticaを使った作品などが展示されておりました。

また、場内ではHelveticaムービーが上映されていたのですが、
かなり感銘を受けました。

印象に残った言葉。

「音楽が、音符間の間隔の違いで構成されているように、
タイポグラフィも文字間の間隔が大切だ」

ということ。

ロゴを作るときも、
どういうフォントを用いるのかも大事だけれど、
もっと大事なのは文字の間隔だということです。

どちらかというと、
「音楽は、音符と音符の間の何もない空間に意味があるんだ！」
みたいな事を以前聞いたことがあり、それを思い出して、
いいたとえだなぁと納得した、と言ったほうが正しいかもしれません。

最近は、文章にあわせて文字を変えたりします。でも、Helveticaはそうではなくて。
Helveticaのフォントのままで、コミカルな文章にも、シリアスな文章にもなりうる。
ということが言われれていました。

今まで、フォントなんてセリフかサンセリフかくらいしか考えたことがなかったのですが、
今回の展覧会でフォント自体に対する興味がものすごく湧きました。
前回内定先の体験入社でもフォントに関する課題に取り組みましたが、
私は「文章にあわせてフォントを変える」ことしか考えていなかったので。

会場の外には、
「ちまたにあふれるHelvetica」的な感じで、
大学生の方々が看板や広告を撮影したものが
壁に百枚弱貼り出されてありました。

周りのフォントなんか気にせずに過ごしていましたが、
写真を撮って何のフォントなんだろう？って調べることで、
フォントに対する愛着もわくし、
せっかく持ってるデジカメも浮かばれる気がします。

しばらく挑戦してみようかなと思いました。

Javascriptで見せる画像ギャラリー

Javascriptを使った、画像表示方法についての記事。

それほど新しい記事ではありませんが、
友人からAppleのTimeMachineのインタフェースを見せられ、
似たようなインタフェースを思い出したので、メモ。

SpaceGallery

AppleのTimeMachineのインタフェース？画面効果がこんな感じのようです。
アルバイト先にTimeMachineと表示されるサーバはあるのですが、このインタフェースは見たことがなかったです。

せっかくなので同じページにあったものをいくつか紹介。