デザイナーの市村さん（@MarlboroLand）による「WebオペレーターのためのWebデザイン勉強会」の後半、実技編です。

＞＞前編の理論編はこちら

市村さんはIrrustratorを使われているので、実際にイラレを操作しながらの説明となりました。
記事中に添付している画像は、私が家で再現したものです。

ボタンのサイズ

最近のボタンは高さがどんどん短くなっている

→グローバルナビの役割が小さくなり、コンテンツを見せることを重視するようになった

配色について

※記事冒頭のスクリーンショットを参照

原色は避けるべき。色選択はRGBよりHSBの方がいい
90%くらいに落とすとちょうどいい

明度と彩度を保ったまま色だけ変えることができる
ただし緑は彩度、黄色は明度が高すぎるので調整が必要

グラデーションの調整

白→黒のグラデーションはまずない
グラデーションのトーンカーブは全体に柔らかく、いちばん下（濃い部分）のカーブを若干きつめに

→横に回転した時の様子をイメージしてみよう

文字の配置

新ゴ／リュウミンを中心に、モリサワフォントを使うのが無難
（ウェイトを細かく指定できる）
モリサワがないときは、Adobe製品なら小塚ゴシック／明朝があるのでそれで代用

文字のウェイトを細めに、文字を大きめにするとすこしおしゃれに見える

英文字が混在する場合

英語のみHelveticaかArialに、文字サイズを若干大きくすると収まりが良くなる

カーニング

古いバージョンのIllustratorは文字間隔が不安定なので
「イ」「ト」などの隙間が広くなってしまうことがある

一文字ずつの微調整が必要　文字を選択した状態でAlt(option)＋左右キー

立体感を出す作り込み

PCの原点は左上／文字は左上から読む
…なので、左上を光源にするとバランスがいい

1. 1px内側に食い込ませるように、上と左に明るい線を引く
2. 1px内側に食い込ませるように、下と右に暗い線を引く（縁ギリギリに引くとはっきりしない）

ボタン上の文字に立体感を出すコツ

飛び出して見えるようにする

透明度を下げたドロップシャドウをかける

凹んで見えるようにする

1. ぼかしを0、色を明るくしたドロップシャドウを右下に向かってかける
2. ぼかしを0、色を暗くしたドロップシャドウを左上に向かってかける

フラットだけど読みやすくする

ボタンの縁に明るい境界線を細く引く or 光沢を出してみる

上から下のグラデーションのTIPS

上：白っぽい色
→　真ん中：基準色
→　下：彩度を少し高く
下から光っている印象になる

定番の矢印などの装飾

○ ＋　− ＋　>
▲を横に倒す

PhotoShopのオートシェイプに太い矢印があるので調整する手も

※今見ているブログの、右のメニューの矢印を見てみてください＾＾；
※矢印のベクターグラフィック素材は、検索をかけるとけっこう手に入ります

グローバルナビゲーションに応用してみる

横並びのパターンがほぼ主流→誘導リンクの集約

1. メイン枠と同じ幅、ボタン高さのグラデーションの棒を作る
2. シェイプをコピーして「段組設定」で均等に分割する
3. 分割点に区切り線を引く／二本引いて、左を少し暗く、右を少し明るく

Σ（°Д°; 段組設定知らなかったーーーーーーーー！！

※CS4以降だと上メニューの「編集」→「パス」の中にあります

市村さんのおすすめの本

WEBデザイン 不朽の表現（MdN刊）

今回の内容がだいたい網羅されている
DTPのデザイン本も買った方がいい。Webデザインの本はサンプルがしょぼい。

レポートは以上です。

「今回はどのくらい来るかわからなかったので初歩的なテーマにしたが、好評ならもう少し突っ込んだ話をするかも」ということでした。

イラレやフォトショの基本的な機能までは専門学校や勤め先で教われるものの、いわゆるTIPSであったり、理論であったりは実務経験を積まないことには身につきません。
私もコーディングのお仕事が多くなり、きれいなデザインカンプに触れることはできるのですが、なかなかそのテクニックを勉強することができない状況です。
デザイナー寄りの勉強会も定着して欲しいと思います。

@MarlboroLand 普通にReplyくれたらいいですよwwwwwwwwwww

Twitterで記事を紹介して下さい（-人-）

デザイナーの市村さん（@MarlboroLand）がWebデザインの勉強会を開かれたので、参加してきました。
市内のレストランの一室にモニターを持ち込んでの、ごく小さな勉強会です。

WebオペレーターのためのWebデザイン勉強会開催 | くずWebデザイナーのなれの果て

”くずWebデザイナー”とか”ネガティブおやじ”とか名乗られてますが、市村さんはプロのWebデザイナーで、SaCSSでも日本のWebデザイントレンドについて、ライトニングトークをされてます。

初回ということで比較的初歩的な話になりましたが、かなり密度の濃い内容だったのでレポートします。
この記事は前半の、理論に関するまとめです。

勉強会の目的

Webデザインがうまく行かない悩みをみんなで考え解決していこう

コーダーに求められるスキルは？

• 専門的な知識が必要
• 最低でもXHTML+CSSが必須
• プログラムは習得に時間がかかる
• サイト構成などの知識も必要

→要求されるレベルが上がり何でもできないといけない

では、デザイナーに求められているスキルは？

• デザインに答えはない／センス（感性）が必要
• DTPスキルが希望されている
• サイト構成からの知識が必要
• アイコンなどの装飾技術

→時代に合わせたデザインを作り出せる感性や発想が必要

デザイン習得のための原則

1. やってみること
2. 感じること
3. 調べてみること
4. 創ること
5. 観ること
6. 続けること

→とにかく思い立ったら行動してください（市村さん談）

制作時必要なソフト

1. Firewoks　スライスの書き出しが早い
2. PhotoShop　画質が高い
3. Illustrator　文字組がきれい

Illustratorでテキスト作り、PhotoShopで調整、Firewoksでスライス…という流れだったが、各ソフトの向上で変わってきている

Webデザインの変遷

※記事冒頭のモニター写真を参照

制作ソフトが普及してなかったり、画像形式テーブルレイアウトなど制限が多かったため、デザインにもその影響が出ていることが分かる

→モニタの肥大化による詳細なデザインの実現
→（ユニクロなど）DTP寄りのデザインが要求されはじめている

見ておいた方がいいサイト

• コリス
• WebDesignDetabase

Webデザインの基本

モニタ横幅＝1024pxが最も多い

コンテンツ幅＝960px
様々な数で割れ、グリッドシステムを組みやすい

メインコンテンツの幅は一行何文字入ればいいのか？

この問題に答えはなくまちまち／幅から算出するしかない

最近のデザインの傾向

• フッターにサイトマップが入っているデザインが非常に多くなっている
• サイトの肥大化に伴いグローバルナビの役割が変わってきている（後述）
• 特に誘導したい、必要とされるリンク／最上層のカテゴリー一覧
  それより下層のサブカテゴリーを全てフッターに掲載する

Webデザインでつまづきやすい場所

装飾の方法

ボタンやバナーなどの作り方を覚えよう

サイトレイアウト

ヘッダやフッタなどの必要なコンテンツの配置方法を覚えよう

レイアウトバランス

配色による影響や見出し、文字の組み方を考えよう

コンテンツの組み立て方

コンテンツ情報をまとめサイトマップを作ってみよう

その他：重要だけど学ぼうとすると時間のかかるもの

文字の形式やウェイト
カラーキーワードや色に関する人への影響
画像の加工方法 etc…

グローバルナビから先の構成の変化

• むかし：　1ページに全て載っている
• 少し前：　最初の1ページが載っている
• 現在：　子ページのインデックスが掲載されている

→キーワード細分化によるSEO的な利点
→腹黒い話見積がちょっと増(ry

市村さんが最近作ったサイト

ブレインワークス
最近のサイトデザインのトレンドを踏襲してみました

• 直線的なデザイン
• 整理されたグローバルナビ
• フッターにサイトマップ

>> 実技編につづく

Twitterで記事を紹介して下さい（-人-）

ついカッとなって、
「日本のコーダーは、CSSのfont-family指定にメイリオとヒラギノ角ゴのどっちを優先しているのか」
という問題を本気で調べることにしました。

主な調査資料は、CSS Nite LP9 連動 第2回コーディングコンテストの応募作品です。
上位入賞者と、参加作品のNo.1〜20、それにCSS NiteLP9 / 9.2の一部出演者のサイトのfont-family指定を抜粋し、私も含めて計45人のコーダーの統計を取りました。

現場でコーディングをしている人ばかりなので、かなり信憑性のあるデータなのではないかと思いますが…
結果は追記以降で。

はい結果どーん。

圧倒的にメイリオが多い |||orz

コンテスト入賞者、出演者のfont-family指定の詳細は、別途まとめています。

資料：日本のコーダーのfont-family指定

※CSSのソースに著作権はないものと考えていますが、問題があればご指摘ください

font-familyを指定しなかった場合、MacOSのSafariは明朝体になってしまいます。
また、もう過去の話になりつつありますが、MacIEでは日本語フォントの指定がないと、input要素などで不具合が起こるバグがあります。
このため、指定なしの人はほとんどいませんでした。

私のように「MacにOfficeを入れた環境だとメイリオになってしまうのが気になる」という人は、ヒラギノ角ゴを優先にしているのかもしれません。
WindowsXPにヒラギノが入っていると、もっと見栄えが悪くなるのですが…

細かい優先度、指定しているフォントに関しては、定石やトレンドと言うものがほぼなく、完全に個々のコーディングポリシーにゆだねられているようです。
英語圏のアクセスを想定してか、Vistaの英字フォントである「Segoe UI」やMac OSの「Lucida Grande」を優先している人も見受けられました。

結局のところ、OfficeがMac OSのフォントに介入してくる現状がある限り、コーダー側としては自己判断するか、JSなどで判定して、OSがMacだったら別途CSSを読ませる…などの対応をするしかないと思われます。

この辺り、各コーダーの皆さんが何故最終的にこの形になったのか、というのをブログや勉強会などで発表しあうと、より良いトレンドができるのではないでしょうか。

「clean」だけ何のフォントなのかわからないのですが…教えて偉い人！

Twitterで記事を紹介して下さい（-人-）

昨日（4/17）は東京で「CSS Nite LP, Disk 9」がありました。
WEBコーダーの最新技術にフォーカスしたイベントで、Web制作・jQuery・CSS3・HTML5とかなり幅広いテーマとなっています。

私も参加したかったのですが都合が付かなかったので、Twitterのハッシュタグ「#cssnitelp9」をお仕事しながらチェックしてました。

その中で、牧野工房の大杉さんと、ドーガの石本さんのコーディングスタイルの違いに関する呟きに興味を持ちました。
少なくとも、CSSの扱いに関しては全然違うようです。

necozeさんも参加されてたんですねー＾＾

牧野工房はサイト内のCSSをコンテンツ毎に分割して、importで一括管理するスタイルなので、石本さんがhttpリクエストを節約する方針で制作しているのであれば、真逆になるはずです。

これはどっちが正しいとかではなく、
「ボリュームのあるサイトを早く正確に作成する」ことを業態としている大杉さんと
「パフォーマンスの高いサイトを作成して長期的効果をアピールする」のを追求している石本さんでは
同じコーダーでも「求められている要素」が違うのだ思います。

私のようなフリーのコーダーになると、協業先の方針や案件の状況によって「今回求められている要素は何か」を判断する必要が出てきます。

制作会社との協業の場合は先述したような、早さか、正確さか、パフォーマンスかという話になってきますが、それとは別に
「Webデザイナーとしての技術的なサポート」を求められることもあります。

依頼先が小規模団体や、DTPデザイナーしかいない制作会社だった場合、カンプの文字サイズ・マージン・パディングなどは適当ですし、Webページに起こすとどうなるかなどはあまり考えられていません。
その辺りの補完を制作側がまかされるわけです。

常に一定のワークフローで進められないのはけっこう大変なのですが、ポリシーがないのもポリシーですよということで、いろいろな協業先の良いところを吸収していきたいと思っています。

そんな私は6/5の「CSS Nite LP, Disk 9.2（reprise）」に参加予定です。
再演版ではCSS3や、HTML5にさらにフォーカスした内容になっているようです。

内地のコーダーの皆様、会場でうぇびんを見かけたときはいじめないでください。
宜しくお願いいたします。

Twitterで記事を紹介して下さい（-人-）

新しい技術を得ることも大切ですが、今の作業、ブラッシュアップできてますか？

iPhoneアプリ「HTML/XHTMLタグ辞典」が人気の、大藤幹先生の新刊「XHTML&CSS超高速コーディング術」の出版記念セミナーが、アップルストア札幌で開かれました。

今回は「コーディング＝カンプを元にHTMLとCSSを作成する業務」を専門に扱う制作会社「牧野工房」の協力を受け、短時間で正確、かつ美しいコーディングを行うための、牧野工房の実践的なノウハウが紹介されています。

コーディング専門の牧野工房
スキルパートナーズ株式会社

本のPRになると思うのでNDAに反しない範囲で書きますと、私はこの牧野工房さんとお仕事をさせていただいたことがあります。

その際にワークフローの一部を拝見することになったのですが、とにかく驚いたのが、書籍の協力者である、大杉さんのコーディング技術と、徹底した作業工程の管理体制でした。
ルールが厳しいのはもちろんですが、それら全てに理由付があり、しかもコーディングスキルの向上につながります。
セミナー内で大杉さん自身が
「牧野工房のルールに従っていれば、IE6でも問題は発生しない」
と断言されていますが、大げさな話ではありませんでした。

そのような経緯で、私自身も牧野工房のコーディングルールの影響を大きく受けています。
今回の書籍が出版となったのも、大藤先生がハンズオンセミナーを通して大杉さんのスキルに感心したからなのだそうです。

セミナーでの紹介によると、テーマは「手戻りをなくすこと」。

1. 基本をしっかり守る
2. 手順に沿って進める
3. 情報をしっかり管理する

という、当たり前のように見えてずさんになりがちな、牧野工房の実践テクニックが公開されています。

牧野工房が使用している工程管理表・テンプレートが同梱されていたり、大杉さん考案の「シャドーコーディング」(いきなり書くのではなく事前に構造をイメージする)についても触れられていますので、WEBデザイナー・コーダーの方は是非ご一読を。

何故私がこんなに薦めているのかというと、良いコーディングルールの普及・共通化は業界全体のワークフローの改善につながっていくからです。

私のようにフリーランスでやっていると、様々な会社のコーディングをお手伝いすることになります。既にコーディングを終えた静的コンテンツのCMS埋め込みなどもすることがあります。
私が全て作業する案件ならいいのですが、普段行っているものと違う（場合によっては効率の悪い）ソースコードに合わせるのはなかなか厳しいものがありますし、工程にもムダが出てしまいます。

HTML5の仕様が発表され、つい新しい技術に目が行ってしまいがちですが、基本をしっかり守り、ブラッシュアップすることを忘れないようにしたいものです。

Twitterで記事を紹介して下さい（-人-）

全然ロックがわからないのに、
ライジングサンロックフェスティバルのチケットを買ってしまいました。

→Pia-no-jaC←とスガシカオのステージが観たいのです。渋さ知らズやスカパラも観たいです。
ひとりで参加するtwitterのfollowerさんにテントサイトを使わせてもらえそうなので、お世話になる予定です。

「ライジングさんおひとり様の集い」を開催することになりました。当日はお気軽に声をかけてください。
http://twitter.g.hatena.ne.jp/webbingstudio/20090725

で、これだとただの日記です。
カテゴリー、「Webdesign」になってますよね？

表題の通り、本題はライジングサン公式サイトの話です。
エリアマップやタイムテーブルを印刷できないのです。

「RISING SUN ROCK FESTIVAL」は日本屈指のライブフェスです。
サイトは皆がワクワクするような、オサレでグルーヴしてるデザインじゃなければいけません。

今年のサイトを担当した制作会社は技術力が高いようで、個性的なデザイン、透過PNG・JavaScriptを駆使した演出、論理的なコーディングと、デスクトップで閲覧する分には充分なサイトです。
参加してみたくなるワクワク感いっぱいです。

なのですが…いざチケットを買って、情報を集めようとすると問題が出てきます。

↓これ、エリアマップです。

グロカワデザインに突っ込みどころ満載ですが、それは置いといてw

エリアマップはFlashで作成されており、IEの仕様に対する対策としてスクリプトで呼び出されています。
なので、スクリーンショットを撮らないと印刷ができません。

また、各スポットに関する説明は「マウスオーバー」に反応するため（昨年のエリアマップもそうです）、例えスクリーンショットを撮っても詳しい情報までは紙に写りません。

↓で、タイムテーブルの方ですが

今年のRSRのタイムテーブルは、2分を1pxに見立てて、div要素に時間分のheightやmarginを指定することで生成しています。デスクトップで見る分にはステージの時間軸が分かりやすいですし、おそらくCMSでの作成・変更がしやすいものと思います。

ですが、ブラウザの印刷ではテーブルが崩れてしまいます。
しかも全部ベタ塗りなので紙はインクでブヨブヨですw

高度なCSSレイアウトを正しく印刷するには、専用のソフトが必要です。
フジロックのタイムテーブル（tableとrowspanを使ったオーソドックスなスタイルです）もやっぱり印刷できないし仕方ないですが、それだったらPDFを用意してもらえると助かるってものです。コンビニやWESで紙のパンフを配ってるので、それを貰ってきた方が良さそうです。

印刷以外でも、違う立場だと感じる不便があったりします。

例えば、先日会った友人は
「アーティスト紹介が暗くなって詳細が出るのだけど、閉じ方がしばらくわからなかった」
と言っていました。

アーティスト紹介のモーダルポップアップにはThickboxが使われていますが、これのインターフェースは一般の人がイメージする「端に×がある」形式ではなく、英文で書かれています。
画面外をクリックしても閉じられるのですが、その説明はありません。
そんなにWEBサービスを利用しない人だと迷ってしまうのです。

私も最近はyuga.jsに含まれているThickboxを使っているのですが、ただ「かっこいい演出」を取りいれるのではなく、実際に使ったときのことを考慮しなくちゃいけないのだなあと、またひとつ勉強になりました。

インパクト重視のサイトデザインは、ライジングサンの伝統のようです。
「History」のページでは過去11回の公式サイトが全てアーカイブされていて、WEBデザインの歴史をリアルに語る貴重な資料となっています。

http://rsr.wess.co.jp/2009/guideline/history/

なかなか面白いので、デザイナーコーダーの方はいちど見てみてください。

Twitterで記事を紹介して下さい（-人-）

Discover Shiretoko – 世界自然遺産「知床」と Web ブラウザ「Firefox」の物語

美しい。
流石はWEB標準の先端をゆくMozilla Firefoxのサイトです。
しかも、コードネームに我らが世界遺産、「Shiretoko」を選んでくれて嬉しいですー。
北海道を愛する方も、フォクすけを愛する方も、俺はOpera一筋だ馬鹿野郎という方も、是非訪問してみてください。

このサイトではWEBデザインの美しいテクニックがあちこちに使われています。
全ては紹介できませんが、取り急ぎ目立つものだけ。

WEBデザインの可能性を広げる、透過PNG

このサイトには「透過設定」を行ったPNG画像が多用され、Flash並のグラフィカルな演出を実現しています。
PNG32形式はファイルサイズが大きくなる欠点がありますが、近年のADSL、光回線の普及で使いやすくなりました。

ですが…
あのクソ忌々しいInternetExplorer6はこれに対応しておらず、足を引っ張り続けています。
このIE6でも透過PNGの表示を可能にするのが、「PNGFix」と呼ばれるJavaScriptライブラリです。
「Discover Shiretoko」はjQueryライブラリを使用しているので、jquery.pngFix.jsを採用しています。

jquery.pngFix.js – PNG-Transparency for Windows IE 5.5 & 6

衝撃のGlider.js

いや、これはびっくりしました。
てっきり知床→Firefox間でページを移動するのだろうと思っていましたから。
このダイナミックな横スライドは、日本人が作成したjQueryライブラリ「Glider.js」を採用しています。

Glider.jsを作ってみた。 – Ho-KAGO After School

Firefoxユーザーのなかには、「No Script」プラグインでJavaScriptをオフにしている方も少なくありませんが、このライブラリはdivでグルーピングされたHTMLに対し演出を加えるものなので、内容が読めなくなることはありません。
でも、できればこのサイトくらいはJavaScriptオンで見てあげてください…

一部が重なっているナビゲーション

本文最後尾のナビゲーションは、矢印の一部が重なっています。
四角ベースのCSSレイアウトでこれを実現するには、各ボタンを透過画像で作成し（ここは透明度はあまり関係ないのでgifです）、さらにフロートで横に整列したボタンに対し「ネガティブマージン」や「position:relative（相対配置）」で矢印の一部が重なるように位置ずらしをすることで実現できます。

説明記事がネット上にいろいろあったのだが見つからない…汗

尚、ボタンの重なっている部分は「HTMLで後に書かれている要素」が優先されます。なので、重なりは最小限に抑える必要があります。

トップ専用CSSによるデザインの上書き

「Discover Shiretoko」はトップ以外のデザインでは、共通の背景画像が使われています。
半島のすみっこにくまさんがいるやつです。
ですが、トップページのみ「top.css」を後から読み込ませることにより、導入部をよりダイナミックな構成に変更しています。
こうすることで、作業量を最小限にしつつ、ページ毎の演出を調整することができます。

これはWEBデザイナーの間では割と常套手段なんですが、CSS勉強中の方も自分のサイトやブログなどでお試しください。楽しいですよ。

他にもレイヤー配置など、たくさんのテクニックが使われていますが、この辺で。ノシ

何故ここまで高度なテクニックを多用したのか。その答えははっきりしています。

「Mozilla Firefox」が最先端のレンダリング、スクリプト処理に対応できるブラウザであることを、自らのサイトで証明するため。

「Discover Shiretoko」は、制作チームの自信の現れなのです。

Twitterで記事を紹介して下さい（-人-）

本サイトをリニューアルしました。

案件がたまっているのに何をやっているんだという感じですが、「4月からチクチク作っていて、サイト自体は今週の頭には完成していたのです！」「トップページにOSCとCSS Niteのバナーを貼ったのでイベントまでにアップしたかったのです！」
と言い訳します。

WEBデザイナーとしてお仕事をはじめてから、4回目のリニュになります。

2006年1月

2006年10月

2008年4月（いっこまえ）

…変なサイトばかりです。

なので、今回は当初、わりとまともなサイトを作ろうとしました。
でも、それはボツになりました。

勝ちを見据えたおとなしいサイトは、私のサイトではないです。

ブログカスタマイズやCMS構築が一般の人にも知られるようになって、
CMSを扱う技術者に、閲覧者が求めているものは
「静的サイトでは実現できない情報配信力」と
「ブログでは実現できないインパクト」だと思ってます。

だから今回はホワイトボードになぐり書き風にして、「WEBデザインのよさげポイント」すらぶち壊しました。

昔のブログを見てみると、私は4年前にも同じことを考えてます。

「柔よく剛を制す」。
これって、WEBにも当てはまるところがあると思うのです。

文書構造は大事です。SEOも考慮しなければお客は来てくれません。
トラックバックやRSSも、交流の幅を広げるのに重要な要素でしょう。その点でブログ形式が有利なことは確かです。

しかし、訪ねて来た閲覧者が見たホームページが無個性で、味も素っ気もないデザインだったら。
記事が全然無くて、それが丸コピー・ペーストしたような文章ばかりだったら。
アフィリエイトであれば、コメントもなくただ写真が貼ってあるだけだったら。
記事を読んだ後は、その閲覧者が二度と来ることはないでしょう。ウェブサイトは他にも何十億とあるのですから。

文章でも、デザインでも、イラストでもいい。何か閲覧者の心に残る「技あり」な部分があれば、もう一度見に来ようと思ってくれるかもしれないし、再びそのサイトを訪れたときに「あっ、ここ前に来たことがある！」と思い出してもらうこともあるでしょう。

閲覧者から華麗に一本を取れ : ウェビンブログ（旧）

一本を取ろうとする柔道は、なかなか勝てません。
お仕事では簡単にできません。

それでも、日々技を磨いて、いつかは華麗に一本を取りたいと思うのです。
自分のサイトはその練習場です。

というわけで、お仕事に戻ります。
しょうもないところで詰まってしまって、まだおわんないです。
自分のサイトを作っててお仕事の方がgdgdになりました、なんてことになったらシャレにならないですからね；；

Twitterで記事を紹介して下さい（-人-）

告知記事
第2回XHTML&CSSコーディング勉強会

その後のまとめ
第2回XHTML&CSSコーディング勉強会

ポピュラーなテーマなだけあって、参加者の皆さんの顔触れも
私のような専業のコーダーから、独学の学生、
制作会社のデザイナー、デザイン面も習熟したいプログラマ、
仕事で自社サイト管理を担当している方など、様々でした。

「職場のコーディングがレガシーなので、スキルを磨いて最新のコーディングにスイッチするよう説得したい」

という切実な方も…＾＾；

詳しい内容・完成データは非公開ですが、今回のお題はこんなサイトでした。

一般企業によく採用される、左右2カラム・横型ナビゲーションです。

うぬうかっこいいぞ。

包括ブロック（外側を囲んでるdivとか）に画像や罫線がないため、CSSレイアウトとしては難易度低めです。
しかし、floatによる段組みが複数個所で使用されているので、「どのようにリスト要素またはdivでマークアップ・idを付与するか」がポイントになります。

描画依存によるCSSコーディングスタイル

私の場合、何度も触れているレイアウトだったので、
「通常と違うCSSコーディングスタイルで記述する」というハンデをかけて挑戦してみました。

一般には「HTMLの文書の要素に直結＝構造依存」のスタイルで書かれるCSSですが、
作業効率や、オブジェクト指向で捉えると、他にもいろいろな記述方式が考えられるそうです。

R流 CSS Coding Styles :: R-STYLES.NET

R-STYLEさんがいろいろ挙げられている中から、構造依存の次に使われることが多いと思われる「描画依存」形式を意識して書いてみました。
（改装中の自分のサイトでも、既に挑戦中です）

/* boxmodel
======================================= */

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#wrapper #header {
	padding: 45px 0 0;
}

#wrapper #header #site-title {
	width: 204px;
	float: left;
	margin: 0 0 10px;
}

・・・中略

/* position, layer
======================================= */

#wrapper #header {
	position: relative;
}

#wrapper #header ul#sub-navi {
	position: absolute;
	top: 75px;
	right: 0;
}

/* background
======================================= */

#wrapper #header ul#sub-navi {
	background-image: url(../images/snavi_line.gif);
	background-repeat: no-repeat;
	background-position: 100% 50%;
}

#wrapper #header ul#sub-navi li {
	background-image: url(../images/snavi_line.gif);
	background-repeat: no-repeat;
	background-position: 0 50%;
}

・・・以下略

実際に書いてみての感想としては、ひとつのCSS定義の単位が短く、かつ描画スタイルごとに段落分けされているので、CSSコードの見通しがききます。
CSSプロパティに習熟したコーダーが、テキストで手入力するには良い方法だなーと思いました。

ですが、Dreamweaverの機能を使って制作している場合は、簡単にいきません。
DreamweaverのCSS編集機能は「構造依存」に対応する形で作られているので、ひとつの要素に多数のCSS定義があると、どこの定義に追加・修正したらいいのかすぐにわからないのです。

実際、自分のサイトの方はそれで難儀してます。
慣れるのにはまだまだ時間がかかりそうです。

トップダウンとボトムアップ

勉強会の中で、h2hamさんがHTMLの記述方式＝「トップダウン方式」「ボトムアップ方式」について説明されていました。

トップダウン方式とは
「包括する要素等を記述してから内部構造を入れ込んでいく」手法で、
ボトムアップ方式とは
「内部構造を入れ込んでから包括要素を記述する」手法だそうです。

トップダウン方式は技量がいりますが、タグの間違いを最小限に抑えて記述でき、全体の構造をつかみやすいです。実際、私もCMS構築等でテキストエディタを多用する場合はこちらの方法で書いています。

ボトムアップ方式は、論理的なマークアップに慣れていない人の、一般的な手順です。
また、私もDreamweaverを使って制作する場合は、こちらを使用します。
Dreamweaverのデザインモードは仕様上、空のdivタグに内部要素を入れ込むのが難しく、
ざっくり書いたp要素を選択してdiv要素で包括したり、リスト化した方が失敗が少ないからです。

トップダウン方式で確実に作業するには、どのようにマークアップするかをあらかじめ理解している必要があります。
h2hamさんも勧めておられましたが、デザインを作る段階で頭にイメージしたり、紙などに構造図をまとめてからはじめると、効率がいいし、習熟も早いと思います。

左右二段組リストのレイアウト

今回の勉強会で、いちばん難しいのではないかと思ったのが、この「TOPICS」部分です。

よく見かけるレイアウト方法なのですが、HTML・CSSともいろいろなマークアップが考えられます。
しかも、floatを使用すると文字増減に対応するのが難しく、使った要素によってはIEでバグが出ます。

こだわりがなければ、テーブルでマークアップしてしまっても全く問題がないと思いますが
リスト要素にした方が、今後の制作での使い回しが効きます。

h2hamさんは、下罫線を確実に表示することを重視されたのか
下のようなul・dlを入れ子にしたマークアップでした。

5/25追記：
h2hamさんから勉強会のフォローアップメールが来ました。
このようにマークアップするとIE6のみ崩れるので、その例示が目的だそうです。

<ul>
  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>

  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>

  <li>
    <dl>
      <dt>2009.05.23</dt>
      <dd>ダミーテキストですダミーテキストです</dd>
    </dl>
  </li>
</ul>

私はというと、dl要素でマークアップして

<dl>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
  <dt>2009.05.23</dt>
  <dd>ダミーテキストですダミーテキストです</dd>
</dl>

dt要素のみに、floatとwidthを指定する方法を取りました。
こうすると、後続するdd要素の外枠だけがdt要素を囲むように伸びきり
中のテキストは右に回り込むことになります。

#wrapper #main #topic dl {
	margin: 0 0 1.5em 12px;
}

#wrapper #main #topic dl dt {
	float: left;
	display: inline;
	width: 5em;
	margin: 0 15px 0.5em 0;
	padding: 0 0 0.3em;
	line-height: 1.3;
}

#wrapper #main #topic dl dd {
	margin: 0 0 0.5em;
	padding: 0 0 0.3em;
	line-height: 1.3;
	border-bottom: 1px dotted #333333;
}

このとき、line-heightとmargin・paddingの値は同一にしないとずれてしまいます。

floatの仕様に沿ったレンダリングがされることが前提のコーディングなので、
IE5.5以前では崩れる可能性があるのが難点です。
また、dd要素が三行を超えるとdt要素の下に流れてしまいます＞＜

他の参加者の皆さんが
この部分をどのようにコーディングしたのか、とても興味があります。

class・idの命名規則

Webデザインをはじめた頃から今も迷っているのが、各パーツのclass・idの命名規則です。
とりあえず、ある程度の法則性を持たせ、HTMLの情報内容が変わっても違和感が出ない命名を心がけているのですが、今回のデザインのように多数のナビゲーションが出てくると迷ってしまいます。

大まかなブロック以外で、今回命名したのはこんな感じです。
私は略記法ではなく、ハイフンでつなぐ方法を使うので、少し冗長です。

ロゴ部分　・・・　#site-title
グローバルナビ　・・・　#global-navi
右上の小さなナビ　・・・　#sub-navi
本文枠TOPICS　・・・　#topic
本文枠ABOUT US　・・・　#about
右バナー群　・・・　#banners　（特に自信がない）
フッターナビ　・・・　#foot-navi
W3Cバナー　・・・　#valid　（特に自信がない）
コピーライト　・・・　#copy

この命名の部分に関しても、他の皆さんがどうしてるのか、是非知りたいところです。

コーディングは独学で身につけた人が多い分、奥が深いジャンルです。
今日も「フッターナビは表と解釈しても問題ないのではないか」
という話でひとしきり盛り上がりました。

こういった、コーディングに関する情報交換に、もっと参加したいものです。
h2hamさん、どうもありがとうございました！

Twitterで記事を紹介して下さい（-人-）

HTMLを衆目に晒すことで、改めてHTML構造の意義を考え直そうという、CSSデザイナーならではイベントなのですが…

このブログ、今HTMLが自前じゃないんですよね＞＜
ほとんど、Sandboxがベースになっています。
本サイトでやったら、CSS Naked Dayを知らないお客様にびっくりされるし…

時間がとれたらコーディングし直そうと思って、はや三ヶ月。
美しい構文を書くことも大事ですが、まめなバージョンアップをすることも大切だと痛感した、今年のCSS Naked Dayでした。

Twitterで記事を紹介して下さい（-人-）