yukiの走り書き

まず最初に「対決」ということで、商人と職人に分けて説明。
商人･･･経営者、プロデューサー、ディレクター、コンサル/プランナー、ライター
職人･･･デザイナー、コーダー、プログラマー、Flashデペロッパー、マルチメディアクリエイター
このように分け、それぞれの価値観だとかの違いを説明。
「うんうん。」と聞きながら私は自分の技術を押し付ける仕事はしないようにとか注意して仕事をしてきたので分かる部分も多々ありました。
私は、職人サイドの人間だけれど仕事をする上では商人サイドの考えも持たなければいけないと思っているので。
でも、商人サイドの価値観とかまだまだ分かっていない部分があるのでこれからはそこら辺を身につけたいと思っています。
特に、利益を考えたり結果を考えたりってまだまだ未熟なんですね。

マネジメントvsギークのお話も自分の身の回りに起きてる話なので分かります。
本来、HTMLではこう書くべきなのは分かっていても、お客さんからの要望を優先にしちゃうので、ギークな人にはたまに注意を受けることがあるんですね。
そこのライン引きって結構難しいんですが、もちろん技術を追うことも今後のために必要ですし、まだそれについて来れないお客さんもいるのでその時は少しレベルを下げてあげても良いと思います。

ちなみにギークとは･･･
>> はてな-geekとは -

デザインvsマークアップ
私は、元々両方行っている人間ですので正しいマークアップによってデザインが制約されるという考えはありませんでした。
まぁ、細かいところではどうしても無理だなぁって言うところも中にはあるけれど回避策はありましたしね。
いろんな人の話を聞いていると、「正しいマークアップによってデザインが制約される」と思う方がいるのも確か。
MdNの月刊誌「web creators」のCSS関連の連載だったと思うけれど「(X)HTML+CSSのレイアウトにすることによって自由なデザインができるようになる」と書かれていたことがありました。
確かにそうなんですよね。
プロパティのpositionを使えば自由にパーツは置けますから。
でも、ブラウザの対応とかで悩む部分があるのも確か！
だから、ハックなんていうものがあるわけですしね。

デザインは「画像の作りこみ」「色使い」「間」というキーワードが出てきましたが、「そうだなぁ」って改めて思いました。
特に、素人だったころに「間」なんて考えがなくて、感覚で作ってたんですが
仕事でやるようになって、上司や先輩に「間」というものを教わってから
「間」は大切だな！って思いました。それは今でも同じです。
当たり前なんでしょうが、やっぱりこの業界に入ってすぐに教わったことって常に「気をつけなきゃ」って思うので、特に字間とか行間は注意して見やすくを考えています。

構文適合性vs目的適合性
ほんとここ10ヶ月くらい前からです。
こういうのを気にして作り始めたのって。
会社員の頃は、そこまで厳しくなくて「デザインと同じように見えれば良いから」的な感じだったので文章の構造化とかタグの本来の意味だとか、いわゆるWEB標準って気にしていなかったんですよね。
雑誌やウェブサイトでももっと前からWEB標準のお話をしてるのは知っていたけれどそれについていこうとしなかったんです。
結局、会社の甘い水を吸って生きてた感じですね＾＾；
そういう意味では、フリーランスになってよかったと思います。

ワイヤーフレームからvsテキストから
私が(X) HTML+CSSの組み方を教えてもらった時
「テーブルレイアウトの概念をまず捨てましょう」ということからでした。
まぁ、数年やってたことをポイッとすぐには捨てられないのですが(笑)
それから、テキストを打って、タグを割り当てて、CSSを当てる。
そんな風に習いました。
教えてくださった方がそのような手順で作業してるからというのも影響が大きいのですが、おかげで私は「テキストから」組む人になりました。
確かに、テーブルレイアウトをやってた方にはワイヤーフレームから組む方が考え方が似ていますよね！

リッチブラウザvsプアブラウザ
こちらも、(X) HTML+CSSの組み方を教えて下さった方のおかげで同じように作業していました。
IEで先にチェックをして、FireFoxなどで崩れるというお話も良く聞きますが、FireFoxで崩れないコーディングをしてIEで崩れる部分を検証。どうしてもIEの仕様上で崩れるならハックを使うという考え方の方が良いかなと個人的に思っています。

ちなみに、ハックもいろいろありますが私は「if」でIE専用のCSSファイルを作ってしまう方法が良いですね。
理由は、IEの仕様が変わった時にレイアウトが崩れる場合見れば良いのはIE専用のCSSファイルだしいじりやすいかと思うんです。

web vs. DTP
あっ！これどこかで聞いたことあるなぁ！
うん、私が会社員だった頃に社長に言われたことがありました(笑)
いや、自社サービスだったんで学習兼ねてALLCSSなんていうものを素人ながら組んでたんですよ。
もちろん、今思うと見栄え的には良いんだけど(ブラウザの対応もそれなりにやってたし)、ひどいコーディングでした(笑)
「プリントしても同じデザインで印刷できるようにしたいんだけど」って･･･
その頃、印刷用のCSSも知らないような素人だったのでもちろん対応はできなかったんです。
それで社長は「わざわざCSSなんてものを使わなくても今までどおりに作ればいいのに」って言われました＾＾；
その頃の私は、未熟すぎてCSSのメリットも話せなかったんですよね。
だから、社長には理解してもらえなかったんだと思います。

でも、webで見えるものをそのままプリントさせるのってやったことがないのでできる自信はありません。
私は、印刷する人のコストなど考えて、印刷用のCSSではテキスト中心のものでプリントされるように作ってしまうので2カラムとか3カラムとかやったことないんですよね。

実際、webで見えるものをそのままプリントできるように作った(X)HTML+CSSのサイトってあるんでしょうか？
今度探してみようと思います。

ガイドラインを作らNite

※「CSSNite」にちなんで「作らNite」なんてボキャブラリがいい！(笑)

最近、あるところでこのガイドラインだとか仕様書だとか見せていただける機会がありました。
「あっ！こういう作りかたしたらいいのか!」って驚くばかりでした。
知り合いなんかでも、大手さんの制作現場に入ってる人たちから話を聞くとどこもこのようなやり方をしているそうです。
まぁ、最初の作る段階が大変なんですけれどね。
作ってしまえばすごく楽だと思います。
私もオリジナルを作ろう作ろうと思いつつやってません＾＾；

でも、少し時間をかけてでも作った方が良いのでちょこちょこはじめようかと思います。複数人で制作する場合はガイドラインがあると統一性を持って制作できるので楽なのは分かりますが、一人で制作する時でもこのガイドラインがあると仕事が速く進むんじゃないかって思ってます。

(X)HTML+CSSガイドラインの中身
ソースを書くときの、字下げの方法などあまり気にしていなかったけれどここもお客さんと決めちゃった方が良いというお話がありました。

なるほど！
人の書くソースは見づらいものです。
人によっては改行もしないって人もいます。
インデントもつけない人もいます。
でも、ソースとしては正しいので表示されるのは同じです。

私は改行をインデントを使う派なので、インデントのないソースとか結構つらいんですよね。
多分、私の書くソースはインデントしない人たちにとっては見づらいんだと思います。

細かいことだけれど、そういう双方の違いも統一しちゃった方が確かに楽ですね！

外部CSSの構成例も参考になりました。
ただ、ソースを書くだけだとどういうもので使ってるCSSなのか分からなくなることありました。

こちらも今後参考にしたいと思います。

それから、まだ把握し切れていない個別性のお話。
「WEB標準の教科書」でも読んだけれどこの点数の考え方がまだ理解できません＾＾；
とりあえず個別性の点数が高いほど優先されるとだけ･･･
この点数って何を基準で付けられているんだろう？と思うわけです。
考えすぎですかね?＾＾；
あと、CSS1.0とCSS2.0ではこの点数の考え方がまた違うんですね！

子孫セレクタの入れすぎのお話も「あぁ、私だ(笑)」みたいな(笑)
ワイヤーフレーム上の各部位から書き始める方法を取らせていただきます。
その方が確かに見やすいもんねって思うので(笑)

プロパティの指定順序も悩むところでした。
でも、Dreamweaverを使用してるのでそこまでやるなら手で修正する必要がありますね！

CSSハックの構文的な正しさの表はとても見やすかったです。
ハックでも構文が正しくないものもあるんだなぁって今更ながら知りました。
普段、あまりハックを使わないほうなので知らなかったです。

最後に･･･
今回は、自分のやり方を照らし合わせながら確認するような感じも合って素直に「うんうん」と聞いていました。
後半は、参考になることも多かったのでこれからの作業に使わせていただきたいと思っています。

Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
	益子 貴寛 おすすめ平均 Web制作本の最高峰 タグに関する情報は詳細だけど・・・ WEBサイト構築を生業としている人は必読 Web関連技術者、デザイナー共に必須の教科書 すごく詳しい。かゆいところに手が届いてる。 Amazonで詳しく見る by G-Tools

伝わるWeb文章デザイン100の鉄則
	益子 貴寛 おすすめ平均 「文章」周辺に存在する膨大なトピックを集成 良いです 「文章」の周辺に存在する膨大なトピックを集成 仕事でも趣味でも役に立つ1冊 素晴らしい！！ Amazonで詳しく見る by G-Tools