最終研修会

昨日、内定者ワークショップの最終回が開かれました。

あまり自覚はしていなかったのですが、あと1ヶ月あまりで、もう社会に出て働くことになるのですね。
ワークショップも今回で最後となり、次出社するときはいよいよ入社式となります。

今回のワークショップは、

• Webサイトのトップページを作ろう
• カラーリングセミナー

の2本立てでした。

両方とも、どちらかというとデザイン領域のお話でした。

最近は、コーディングだけでなくて、デザインの面でも少しずつ学習をしていこうと思っていて。

今の会社では、コーディングをしているだけで働いていくことができます。
（あとは英語力ですね。）
コーディングの面だけでも、たくさんの発見があると思います。

ですが、やっぱりWeb制作者としての自分の可能性を考えたときに、
コーディングだけでは、応用が利かない人間になるような気がしていて。

コーダーのことを考えてWebをデザインしろとはよく言いますが、
コーダーだって、デザイナーやディレクタのことを考えて、よく知って
制作していくことが必要だと考えています。

会社の中にいるだけでも、その会社の色に染まってしまったり、
本当は疑問を持つべきところが当たり前になってしまうことがあったり。

多角的な視点を持つことを忘れずに、制作をしていきたいと思います。

DTPとWebのソフトウェア依存度

最近、ある会社のWeb制作に携わらせていただいて、
自分のソフトウェア使いこなし能力が未熟だなと反省しました。

基本的にWebサイトのコーディングをするときはDreamWeaverを使っているのですが、
私が使ってる機能というのが、「タグ予測変換機能」くらいなんです。
タグを自動的に予測してくれて、候補を出してくれる。簡単にタグを閉じてくれる。
それも、タグ打ちをしているから便利になる機能なのであって、

つまり、DreamWeaverでも単にテキストエディタと同様にタグ打ち作業していることに他ならず、
プレビュー機能だとか、クリックドラッグするとボックスが生成できるだとか、
そういった機能を一切使ってきませんでした。
（でも実際、予測変換機能だけでも本当に作業スピードが3、4倍になります）

で、話がずれました。

最近AdobeのDesign Premiumを買いまして、その中に人生初のInDesignが入っていたので使い方を勉強しようと思っていたんですが、
「雑誌を作るのに、ソフトウェアの使い方を勉強する」って、なんだか違うなと思って。
雑誌を作るなら、カラーリングとか、レイアウトの知識などが必要ですが、それなのにソフトウェアの使い方を学ぶって何なんだろうと思っていて。でも、ソフトウェアの使い方を知らないと、どういったことをどのように実現するのかが分からなくて。

そこで思ったのが、DTP系のものごとって、ソフトウェアの習熟度に依存してるんじゃないかということ。
手書きのポスターとか、版画とかは別ですが、現在、大量印刷されるほとんどの紙媒体は、デジタルデータで作られていますよね。
ポスターを描いていても、「もうちょっとここの曲線をなめらかにしたいのに」とか、「ここの色味が」とか、色々な修正点が出てきても、ソフトウェアに慣れていないと難しい部分なのかなぁ、と思います。

これはコーディングだけの話になってしまいますが、Webでコーディングする場合は、DreamWeaverがあれば便利ですが、別になくても制作できます。色を変えたいなら、ソフトウェアに変えてもらうこともできますが、自分でタグをいじればすぐに変えられます。

これって、Webサイトはバックグラウンド（ソースコード）が見えるようになっていて、
印刷物のデジタルデータはバックグラウンドが見えていない、という違いなんでしょうか。

ソフトウェアの習熟度の違いで、作業効率が変わってしまうのは仕方のないことですが、
デザイン自体の出来栄えも変わってしまうのは少し納得がいかないなと思っていて。

InDesign関連の書籍を見て、最近思ったことでした。

JavaScriptを投入したSonyのサイト

以前、SEOや情報の構造化といった観点から、WebサイトのアイキャッチにFlashではなく静止画像を埋め込むサイトが多くなっているということを聞いたのですが、
今回は、SonyグループポータルサイトでアイキャッチがJavaScriptで実現されていたのでメモ。
http://www.sony.co.jp/

実装にはjQueryライブラリを使用している模様。
イメージ画像の入れ替えや、メニュー部分をマウスオーバーするとなめらかに出てくる画像など、Flash風の挙動をしていますが、JavaScriptで作られています。

私はこのサイトのように、アイキャッチ部分をJavaScriptで上手に実装している例は見たことがなかったのですが、
もしかして最近は増えてきているのでしょうか？

さらに、JavaScriptがOFFの環境でもレイアウトが崩れず、
リンクもしっかり機能するという点がすばらしい。

近年、技術がどんどん進歩して、境界がどんどん曖昧になっているような気がします。
Flashでも、検索エンジンに引っかかるようになったり、情報を埋め込めるようになっていたり。
JavaScriptでも、Flashのモーショントゥイーンのようななめらかな動きが可能になったり。

可能性が広がれば広がるほど、ときに使い方を誤ってしまいがちです。
HTMLの二の舞にならないように、それぞれの長所を生かして使用していきたいですね。

CSSにできること―ポジションレイアウト編

CSSにできること第八弾。
今回は、画面に対し、相対的、絶対的にコンテンツを配置していく、ポジションレイアウト（positionプロパティを使うので勝手に名付けました。正式名称ではありません）について書いていきます。
前作：CSSにできること―フロートレイアウト編

前回のフロートレイアウトは、右に回りこみ、左に回りこみ、という方向性の指定ですが、
positionプロパティを使うと、画面に対して固定の配置ができるようになります。

こちらの配置に関しても、floatと同様、widthとheightを指定する必要があります。
さらに、positionプロパティを指定したボックスには、「重なり」という概念が出てきます。
z-indexというプロパティによって、そのコンテンツが前景になるのか、背景になるのかを指定する必要があります。

１．相対配置

positionに対してrelativeという値を指定します。
画面に対し、相対的に配置する方法です。

この後で述べる絶対配置、固定配置をする際に、配置の基準となるボックスが必要になります。そこで、relativeという値を指定することによって、基準であるということを示すことができます。
（これ以外で私はrelativeを使ったことがありません・・・）

２．絶対配置

positionに対してabsoluteという値を指定します。
画面に対し、絶対的に配置する方法です。

上から何px、右から何px、という風に指定します。
この、上から、右から、という基準は、absoluteが指定されている部分を囲んでいるボックス、またはposition: relative;が指定されているボックスを指します。
top: 10px; left: 20px;だと、上から10px、右から20pxの部分に配置をする、という指定になります。
topとbottomからひとつ、leftとrightからひとつ選んで指定します。

３．固定配置

positionに対してfixedという値を指定します。
画面に対し、固定配置する方法です。

場所の指定方法は絶対配置と同じですが、fixedでは、画面に対して固定されます。
スクロールしても位置がかわらないので、サイドのメニュー部分の表示に使われることが多いです。
ただし、IE6以下には対応していませんので、現時点ではあまり実用的ではありません。

positionプロパティを使う際に共通に言えることですが、
positionにabsolute、fixedを使用したボックスは、他の要素とは別の次元といいますか、別のレイヤーに配置されます。（この、レイヤーというのがz-indexで指定する値です。）

高さを指定していない通常のボックスでは、文章量が多くなった場合、自動的にボックスが長くなり、その下のボックスも自動的に下に下がります。
しかし、absolute、fixedを使用したボックスは、文章量が多くなった場合、その下のボックスの上に重なるようにして表示されます。

文章ではすごく説明しづらいのですが、言いたいことは、
ボックスの中身が固定でない場合には、ポジションレイアウトをしないほうがいいということです。

CSSにできること―フロートレイアウト編

CSSにできること第七弾。
今回は、floatプロパティを用いて、回り込みによってWebのレイアウトを調整する方法を書いていきます。
前作：CSSにできること―レイアウト概念編

HTMLには、imgタグの属性としてalignという値がありました。これは、画像に文章を回り込ませたいときに指定するものです。
CSSでは、float（フロート）というプロパティを使って、画像だけでなく、文章やdivボックスにも回り込みを指定することができます。

floatというプロパティは、その回り込みを指定するプロパティです。
floatのプロパティにleftを使うと、指定したボックスが左に行き、次の要素が右側に配置されます。
floatのプロパティにrightを使うと、指定したボックスが右に行き、次の要素が左側に配置されます。
そして、floatを解除したいときはclearプロパティにleftやrightなど、解除したい方向を指定します。

ややこしくて私もときどき間違えますが、慣れです。

１．文章内の回りこみ

雑誌のように、画像と文章をうまく回り込ませてレイアウトをしたい場合も、このfloatプロパティを用います。
たいていはimgタグ（画像）の方にfloatを用いることが多いです。

画像と文章の回りこみについてはあまり注意点はないのですが、問題はサイトのレイアウトに使う場合です。

２．段組レイアウト

floatを使えば、このサイトのような横に3列並ぶようなサイトも作ることができます。
（厳密に言うと、このブログはこの手法では作られていないのですが。）

ボックス1
float: left; を指定しています。

ボックス2
float: right; を指定しています。

ボックス3
float: right; を指定しています。

ボックス4
clear: both（floatのleftもrightも両方解除）; を指定しています。

まず、ボックス1はleftの指定があるので、左側に行きます。
次に、ボックス2はボックス1の右側に回りこみ、さらにrightの指定がしてあるので、一番右に行きます。
そして、ボックス3はボックス2の左側に行き、rightが指定してあるのでボックス2の右に行きます。

floatプロパティを使う際の注意としては、
まず、幅を指定すること。floatを指定したときは、必ずwidthも指定してください。

また、floatを指定していても、横に並べるボックスの幅の合計が、その外側のボックスの幅よりも大きいと、横に並ばずに下に押し出されてしまいます。
このため、前々回、widthとpaddingの微妙な関係について書きましたが、
floatを使うコンテンツにもpaddingを指定しないほうが無難です。

この他にも、ブラウザ間の表示の違いが多々あるのがフロートによるレイアウトで、
これがテーブルレイアウトを普及させてしまった要因なんだろうなといつも納得します。
（もともとサイトの段組レイアウトに使われる要素ではなかった、とも考えられますが。）

この点の微調整が、floatの難しいところです。

以上、フロートレイアウト編でした。
次回は、ポジションレイアウト編です。