制作仕様書は「料理のレシピ」 制作仕様書やコーディングチェックシートと言うと、堅苦しく聞こえるかもしれません。ワークフローや細かなサイト設計に基づいた制作の仕様が記載された制作仕様書は、料理の流れや材料、その分量が書いてある「料理のレシピ」に似ています。 そして制作仕様書通りに制作されたものか確かめるコーディングチェックシートは、料理レシピによって作られた「料理の味見」をする様なものと解釈してみてはいかがでしょうか？ ガイドライン化するメリットとデメリット 制作仕様書には、Webサイト全体の設計方針に分かりやすく書いたものにサイトマップなどを拡張した簡易的なものから、ファイル名や文法表記の統一など詳細情報を事細かに冊子のように厚いドキュメントに記載したものまで多く存在します。 ここではその内容や内容量に問わず制作仕様書が制作者へ与えるメリットとデメリットをご紹介します。 ガイドライン化する

私は以前の記事（TechRepublic Programming and Development）で、今では使われなくなった（そして悪名高い）タグの機能をFlashで実現する方法について解説した。その記事において私は、タグの機能をCSSで実現することも可能であるが、ややこしいJavaScriptを数行記述しなければならないとも書いた。 しかし、大量のコンテンツを限られたスペース内に表示する方法はこれだけではない。一定の幅と高さのブロックの中にコンテンツを格納し、スクロールバーを用いてそれをスクロールできるようにするCSSマークアップがあるのだ。これを用いることで、コンテンツをスクロールバーの付いたフレーム（一定枠）内で閲覧できるようにしながら、それをページ内の好きな位置に配置できるようになる。これによって、あなたとあなたのクライアントは、該当ページの見た目をより細かく制御できるようになる。

CSS3では何ができるのか？ CSS+XHTMLでWebページを作っていると、面倒なことがたくさんありますよね。「なんでこんなところで苦労しなければいけないんだ！」ってことが、本当に多くあります。 例えば、「文字に影を付きる」ことも大変なことなのです。実現するためには、Photoshopなどで影付きの文字を作成し、GIFに書き出て、それをHTML内にイメージタグで挿入して、alt指定でイメージの説明を書いて…。たった「影付きの文字」を使うだけで、これだけの作業を強いられるなんて、やっていられないですよね。 このように「デザイン的なことを実現するために強いられている無駄な作業」それを回避できるのがCSS3です。「文字に影を付きる」は、新しく加わったtext-shadowプロパティで簡単に実現できます。「角丸の囲み」を作りたければ、border-radiusプロパティを使えば、これもまた簡単に

Eclipseから始めるあなた 最終回の今回は、オープンソースの統合開発環境「Eclipse」と、Drewmweaverに取って代われる存在ともいえる「Aptana Studio」を紹介しましょう。 筆者がAptana Studioを始めたきっかけは、諸先輩方からのアドバイスです。Webデザインだけでなくプログラミングもこなすような仕事が増えてきたころ、PHPを書く場合に何かいいアプリケーションがないかと探しており、EclipseとプラグインのAptana Studioを勧められたのです。 Eclipseは、プラグインの追加でいろいろな言語を記述することもできるし、何よりオープンソースであるところもいいところだと思います。今回は、まだEclipseを使ったことがない方のために、導入方法から紹介していきましょう。 EclipseではWindows、Linux、Mac OS Xほか多数のプラッ

チームによるWeb制作の現場でのメリット 本連載ではこれまで、複数でHTMLファイルを扱うためのルールの必要性、ルールをドキュメント化したガイドラインの存在、ガイドラインの作り方、チームで作業する上での技術スキルや知識の差を埋める対策としての勉強会や、コミュニケーションについて、提案や事例などを交えて解説してきました。 チームと言っても漠然とした設定でしたが、企業における業種・業態はそれぞれですし、運営する人たちもまた違ってきます。しかし、大事なことは「チームはでまとまってWebサイトを作っている」という意識をお互いに持つことではないでしょうか。 これまでの回で注意するべき点を解説してきましたが、それとは反対にチームでの制作現場だからこそ、そこから得られるメリットもたくさんあります。 多くの人と関わることができる機会は、フリーランスでは得られないメリットの1つです。たくさん人がいるというこ

柔軟性のあるコーディング Webサイトの制作業務を請け負っていると、制作の途中でデザインが変わることは少なくありません。コーディングもいきなり仕様が変わったり、新しい機能やカラムが追加になるといったことがしばしば発生します。 要素を追加するため、ソースコードに無理な変更や複製を行うと、ソースコードはどんどん劣化していきます。最悪の場合は、今後の拡張性を考えると作り直しをした方が作業時間を短縮できるのではないかと思われるものまであります。しかし、納期や予算に余裕があれば作り直しをすることもできますが、大抵の制作現場ではその時間もなく、なかなか理想のコードが作れないことが現状です。 このようなソースコードの劣化や作り直しを防ぐためにも、柔軟性を持ったコーディングをするテクニックが必要です。今回は、ソースコードを劣化させないコーディングのコツを紹介していきましょう。 秘伝の3つのコツ 第1のコツ

複雑化するWebブラウザの検証 WebデザインのHTMLコーディングでは、複数のOSやWebブラウザ、またバージョン別による検証確認は必須です。OSやWebブラウザの種類によって見え方が違っていたり、時にはレイアウトが崩れたりすることもあるからです。 テーブルレイアウトでコーディングしていた時は、OSのフォントサイズの違いによる段落検証が中心でした。しかし、CSSレイアウトへ移行すると、WebブラウザごとにCSSの解釈が変わってくるため、検証がより複雑になってきます。今回はWebブラウザ検証方法と、その対処策をマスターしていきます。 現在、一般的に使用されている主なWebブラウザは、Internet Explorer（通称IE）のバージョン6と7、Firefox、Safari、Operaです。これらのWebブラウザシェアは日々推移していますが、ユーザ環境リサーチを行っているW3Counte

CSS3は今！ 皆さんはCSS3について知っていましたか？ 「まあ、なんとなく知っていたけど、まだ先の話でしょ」という感じではないでしょうか。筆者も「最近ようやくテーブルデザインからCSS+XHTMLでのコーディングスタイルが落ち着いたから、もうちょっとこれでやらして」という感じです。 しかし、CSS3時代の到来はそう先の話ではなさそうです。例えば、SafariやOpera、Firefoxなどの一部のWebブラウザでは、すでにCSS3の仕様が実装されています。また、新しいバージョンが出るたびに、どんどん新しい実装が追加されています。Internet Explorerもバージョン8でWeb標準に向かっています。 このCSS3策定は、Adobe Systems、Apple、Google、HP、IBM、Microsoft、Mozilla、Opera、Sun MicrosystemsなどといったW

Webデザイナは知っていた 第1回：エンジニアだって色にこだわりたい 著者：シンクイット制作部 公開日：2008/02/14（木） 2008年3月の連載ランキング4位（一覧を見る） Webデザイナがよくやる色の決め方 ある日、社内のプログラマの1人から突然こんな質問をされました。 「社内用のWebアプリケーションツールのフォーマットの色を見栄えよく変更したいんだけど、何色がよいか教えてくれない？16進数で」 16進数で！？　色名ではなく具体的な数値で聞いてくるところはさすがエンジニア気質。色という同じ話題なのに職種の違いだけで面白い要求が来るものだと関心してしまいました。 今まで筆者がいた会社にはWebデザイナと営業、プログラムが少し分かる人がいるという程度でした。しかし弊社インプレスITには編集者・ライター・Webデザイナ・エンジニアが社内に揃っていて、それぞれ自分の業務に関してプロなわ

【即実践！HTML+CSS】 チームによるWeb制作の現場 第2回：ガイドライン作成のポイント 著者：イー・アクセス 佐藤 恵 公開日：2008/04/10（木） ガイドライン（ルール）はいつ、誰が決めるの？ 「第1回：ルールを作ろう！」ではルールの必要性について解説しました。Webサイトの持つ影響力を考えれば、その元であるルールの重要性も理解していただけたのではないかと思います。 今回はルールを実際に作ってみよう、改正しよう、と思っている方向けに、ルールの内容についてさらに詳しく紹介していきます。ルールは企業内で規定する場合、?「ガイドライン」と呼ばれるものにあたります。以降では本連載でもガイドラインと表記します。 さて、ガイドラインは「いつ？」「誰が」決定するのでしょうか。まずは「いつ？」について見ていきましょう。 一般的にガイドラインは年に数回ほど変更することがあります。その変更のタ

【即実践！HTML+CSS】 チームによるWeb制作の現場 第3回：コミュニケーションを増やす施策 著者：イー・アクセス 佐藤 恵 公開日：2008/04/17（木） 現場の本当の状況 これまで、複数人で制作、管理、運用をするWebサイトについてスムーズな作業を行うためのポイントや、ガイドラインについてお話ししてきました。今回は、チームやプロジェクト、部門内などで関わっているメンバー間での技術や知識レベルの統一について解説していきます。 具体的には、メンバー個々の技術や、知識レベルの差から発生する問題点をできるだけ統一するための提案など、当事者というよりもディレクタなどのプロジェクト管理者向けの内容となります。 さて、皆さんが働いている現在の職場では、お互いの作業が滞りなくスムーズに進んでおり、一見問題点は見当たらないように見えるかもしれません。 しかし、実際には個人のレベルの差を比べると

ちょっと待った！コーディングを始める前に... 正しく美しいコーディング目指す本連載の第3回では、Webサイトをより使いやすくわかりやすくするための具体的な技術を紹介していきます。 クライアントから請け負ってWebサイト制作をしていると、後から「Webコンテンツをきれいに印刷できるようにしてほしい」「検索エンジンの最適化を考慮してほしい」などの要望を受けることがあります。印刷対応を後から要求されると、対応するWebブラウザの種類とバージョンによっては、ほぼ作り直しが必要だったり、また工数が2倍以上掛かってしまったりすることがあります。 コーディングを始める前に、クライアントの希望やユーザの環境を知っておきましょう。確認すべき事項はたくさんありますが、必ず確認すべきは「印刷対応」「検索エンジン最適化」「アクセシビリティ」「暗号化通信（SSL）（アドレスの確認を含む）」です。もし、仕様書にこれ

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第3回：リストタグを試す！ 著者：米倉 明男 公開日：2008/04/15（火） リストタグの用途 Webサイト内のコンテンツの多くは、「見出し ＋ 本文」の構成から成り立っています。これはユーザエクスペリエンスに基づくもので、ユーザはまずコンテンツの見出し箇所から閲覧し、その中の興味を持った部分の詳細を読みます。「ブラウズ」とは流し読みの意味でもあります。 これをXHTMLの文書構造化に置き換えると情報の区分けや段落の整理が必要となってきます。そしてこの情報の整理に有効的な方法として、リストに整理するという手法があります。 CSSコーディングでWebサイトをレイアウトする場合に欠かせない要素の1つにリストがあります。 XHTMLで使用するリストは3種類あります。「箇条書きリスト」「番号付きリスト」「定義リスト」です。 「箇条

【即実践！HTML+CSS】ポストWebコーディング 第2回：HTML 5の機能を試す！ 著者：吉田 光利 公開日：2008/04/14（月） HTML 5で実現される世界 前回は「HTML 5が結構いけそうで、マイクロソフトも含めたブラウザベンダが足並みをそろえてHTML 5に向かっている」ということをお伝えしました。今回は実際にどのようなことができるのかに焦点を絞って解説していきましょう。実際にサンプルを試せる内容になっていますので、ぜひ体験してみてください。 sample.zip （ZIPファイル/1.26 KB） HTML 5を一言で言うと「WebアプリケーションとセマンティックWebを実現するためのHTML」ということになります。HTML 4が勧告された1999年は、WebアプリケーションやセマンティックWebという存在がありませんでした。それから9年を経た今、ようやくそれらを考

【即実践！HTML+CSS】私流、ツールの選び方 第2回：助けて、CSSエディタ！ 著者：まつむらよしあき 公開日：2008/04/11（金） タダの魅力と実力 フリーウェアやオープンソースのソフトウェアの魅力は、Web制作の勉強を始めたばかりでいろいろ試したい、貧乏学生でお金がない、やる気や情熱はあるけど初期投資は最小限に抑えたいという「コスト重視派」の方から、プログラミングの経験が豊富で自分でカスタマイズできる腕がある「玄人派」の方まで、気軽に触ってみることができることでしょう。 筆者もWebサイト作りははるか昔の大学時代に、遊び感覚でテキストエディタを駆使して作成したのが始まりです。その後本格的に仕事としてWeb制作を始めるにあたって、「Dreamweaver」などの有料アプリケーションを使ってみたら、その便利さから手放せなくなりました。 しかし、有料だからといってすべてのアプリケー

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第1回：XHTMLの文書構造化とボックスモデル 著者：米倉 明男 公開日：2008/04/01（火） テーブルレイアウトとは HTMLコーディングの主流が、旧式のテーブルレイアウトからCSSレイアウトに変わり、大規模Webサイトを中心にXHTMLへの移行がひと段落した感があります。しかし、まだテープルレイアウトを用いたWebサイトが多いのも実情です。 そこで本連載では、慣れ親しんだテーブルレイアウトからなかなか抜け出せない方向けに、CSSレイアウトへスムーズに移行をできるポイントを解説していきます。はじめにCSSレイアウトはHTML 4.01、XHTMLいずれのバージョンでも対応可能ですが、本記事ではXHTML 1.0を対象にCSSコーディングについて解説します。 テーブルレイアウトとは、HTMLタグの1つである表組み<tab

正しいコーディングを身につけよう 2008年4月の特集「即実践！html+CSS」の水曜日では「正しいコーディングルール」について取り上げます。 普段何と無く理解しているつもりのhtml言語ですが、間違ったhtml言語を覚えていませんか。元々html言語はとてもシンプルです。 シンプルなコーディングは正しいコーディングにもつながります。そこにはトリッキーなテクニックはいりません。本連載では、コーディングの位置づけとその 重要性について、また現場でのコーディングルールなども分かりやすく説明していきます。 これまでのコーディングは静的なコーディングが多く、またディレクターが制作において全体を把握し、デザインとプログラミングあるいはデザイナーとコーダーの橋渡しも行っていました。 しかしインターネットの急速な変貌により、Webサイトは見た目も機能性も求められるようになりました。現在では動的なコーデ

【即実践！HTML+CSS】 テーブルレイアウトから脱出せよ！ 第2回：カラムを理解する！ 著者：米倉 明男 公開日：2008/04/08（火） テーブルレイアウトでのカラム作成 Webデザインのレイアウトではカラム（段組）という手法がよく使われています。この語源は「Column」表計算ソフトで使う「列」からきています。 Webサイトでは左側のカラムをナビゲーションにして、右側のカラムをコンテンツエリアとするパターンや、ポータルサイトのように情報量が多いWebサイトでは3段組カラムを使い、左側がナビゲーション、真ん中にメインコンテンツ、右側にバナーや関連へのリンク、という区分けもスタンダードな形式といえるでしょう。 テーブルレイアウトでのコーディングによるカラム作成は、まず全体をテーブル<table>タグで囲み左右にセルを作ります。そして左カラムは左のセルに入れ子のテーブルを新規作成して、

あのタグを使っていませんか 現場でよくある間違ったコーディング例として、非推奨（Deprecated）タグの使用があります。図1（上）に示したタグは非推奨タグや廃止タグと呼ばれるもので、現在はブラウザでサポートされていますが、将来的には使用できなくなる可能性があります。 なぜ、今使えるのに将来的に使えなくなるのでしょうか。 これまで、ブラウザメーカーはHTMLの見栄えをよくするために、無秩序にタグの拡張を行ってきました。結果としてHTMLは、その元であるSGML（Standard Generalized Markup Language）の「文書論理構造を記述する」という目的とは異なる独自の進化を遂げることになりました。 そのような中でHTML 4.0からは、文書論理構造を記述する本来の目的に立ち返ろうという動きがあり、見栄えを設定するタグはHTMLに直接記述せずにCSSなどを使用することを