第1弾：デザイン画像を稼働中のWebページに組み入れる方法
仕入れたデザイン画像を稼働中のウェブページに適用するのに苦労することはありませんか？ウェブ開発のすべり出しが順調であるにも関わらず、デザイン設計のある部分でつまづくことは？ wireframes はあなたにとってコーディングによる設計よりも簡単？ローディング速度が遅くメンテの難しいwebの開発に満足できますか？ 多くのデザイナーたちが自分のデザイン画像を稼働中のHTML/CSS web ページに上手く変換できません（ 中にはコーディングすら全くしない人もいます）。大抵の場合、その理由はデザイン設計のアプローチと、1つの命令行を書き込む前のプロセスに対する考え方に問題があるからです。 噂とは裏腹にCSSは難しい言語ではありませんし、web ページやweb サイトの開発も難しくある必要はありません。多くの場合、問題は基礎構造の開発前に細かい部分を気にして混乱してしまうところにあります。またデザインのうち、コードを複雑化するような軽微で些細な部分の処理に捕われてしまうことも問題要因の一つです。 この記事は、http://www.onextrapixel.com/の許可を得て、翻訳しています。一部変更して翻訳している場合もあります。オリジナルの記事はここよりご覧いただけます。 デモにリンク オリジナルの記事 この投稿では、皆様に自由にダウンロードできる試供デザインを閲覧し、そのデザインを稼働中のweb ページに組み入れる方法を見ていただきます。この投稿では私は簡潔なコードを用いますが、デザイン・テンプレートに付いたオリジナルコード同様、ページを立ち上げるために私が使用したコードをダウンロードしていただけます。この投稿自体は、主にデザイン設計のための思考過程に重点をおいて進めていきます。 ダウンロード The Artificial Casting テンプレート 下のデザインをご覧ください。これらはSmashing Magazinesから無料でダウンロードできます（当ページの3つ目のテンプレート）。 テンプレートクリエーターによる設計デモをご覧になり、上にある私のデモと比較していただくことも出来ます。 私がこのテンプレートを選んだのは、見た目がオシャレで私がチェスが好きだという理由もありますが、何より典型的な3カラム・レイアウトで、開発にあたり2つ3つの難関と選択肢が用意されているからです。また最終ページに入れるか否かを決定する詳細な箇所が数個含まれています。 デザインから開発までの過程に対する一般的考え Artificial Casting テンプレートの説明に入る前に、開発にあたってwebサイト全てに共通する2つ3つの事柄を考えてみましょう。 好むと好まざるとに関わらず、web ページは全てボックスを使って開発されます。HTMLの全要素はボックスを持ち、ボックスは CSSボックス・モデルをもとに形づけられます。隣同士や上下に並ぶボックスもあれば、他のボックスに包含されているものもあります。デザインが箱形でなければならないということではなく、開発時に作られるボックスについて考える必要があるということです。 最も上級なレベルでは、2つ3つの大ボックスで大枠のレイアウトが構成されて、デザインの詳細はその大ボックス中の小ボックスに入ります。これらの長方形ボックスを頭で思い描くことは、デザインのどの部分がボックスに上手くフィットして、どの部分をボックスから外すべきかを見定めるのに役立ちます。まずは、これらの大レイアウト・ボックスについて考えましょう。細かい部分を見て内側から外側へコーディングせず、外側からのコーディングを行います。 画像とHTTPリクエストは、webページのローディングを遅くする大きな要因の一つです。デザインを考えるにあたって本当に画像化するべきもの、またコードを用いて簡単に再現できるものは何かについて思案することは賢明です。一つ画像を少なくすることで、ファイルサイズもサーバー上のリクエスト数も縮小するため、 画像を最適化することができます。 私はただの大きな色の集合体に過ぎない、webページ上の画像を見かけることがよくあります。そもそも色の集合体が画像化されなければならない理由はないのです。私たちは画像を眺めて、どうやって必要とする画像全体のファイルサイズを縮めるかについて考えながら、使用する画像の数を減らしています。 レイアウト テンプレートに関してまず考えたいことは、レイアウト全体の概観についてです。デザインを大ブロックに分けようとしていますが、この場合、まず上下方向に行うのが最も簡単でしょう。デザインを見ると3つの帯がページを横切っているのが分かります。この帯がヘッダーやコンテンツ、そしてフッターに当たるものです。 フッター 最下部に3つの情報ボックスとテキストを含んだ分かりやすいフッターがあります。とりあえずフッターの中味は気にせず、先ず上部からフッターを切り離すためにどこで線引きするかを決めます。 この端の部分を画像化しますが、それをフッターもしくは上のボックスのどちらに入れるかを選択できます。どちらでもOKですが、私はイメージをフッターに入れることにしました。 この記事で触れませんが、最終的にはサイトにわたって繰り返されるページのある部分を別のファイルで管理するために、PHPを含有したファイルの類いを使用するのが妥当でしょう。この画像は当サイトの全ページ上に登場するため、私にとっては最終的にfooter.phpファイルになるフッターに置くほうが合理的なのです。 フッター内にある他すべての詳細については、基礎レイアウトの作成中はそれについて考える必要はありません。 コンテンツ 本文を3つのカラムと２つのサイドバー、そしてその間にあるメイン・セクションに分けてフッターの真上に置きます。3つのカラムについては後ほどもう少し詳しく触れます。今は内側を3つのカラムまたは3つの小ボックスに分割される、一つの大コンテンツ・ボックスについて考えるだけで十分です。 フッターの場合と同じく、コンテンツ・ボックスの初めと終わりをどこにするかを決めなければなりません。ここに開発上の問題のタネとなる2つの要素があります。複数のカラムおよびコンテンツ全体をそれぞれまたいでいるログイン・ボックスとチェスの駒の画像はヘッダーに属します。 オリジナルのテンプレート開発にあたって、両者はヘッダーの一部として設定されましたが、私はそれらをコンテンツエリアに置くことにしました。フッターの場合と同じく、この2つがサイトの全ページに登場させるべきかを考えました。確かにテンプレートのデザイン時に設定すればそうなっていたでしょう。しかし、2つがページ毎に変わるような柔軟性を持たせるのも良いだろうと考えました。 おそらく、サイト内の別のセクションでは別のチェス駒画像が登場し、ログイン・ボックスは一部のページあるいはセクションにのみ登場するでしょう。 コンテンツエリアにインクルード・ファイルは使いません。ページ毎に変わるセクションはここだけなので、サイトにわたって変化させたいデザイン素材は、このボックスに入れるのが妥当なのです。しかしここからチェス駒の画像をコンテンツとヘッダーの両方に置くため、どのようにコーディングするかを把握しておく必要があります。 ヘッダー ここではヘッダーについて紹介します。消去法からするとヘッダーにはロゴやナビゲーション・バー、そしてその背後に勾配の背景が入ります。ヘッダーとコンテンツエリアの間を、ページを横切る細いラインで仕切ります。このラインもページ毎に変化しないため私はヘッダーに入れています。ヘッダーは最終的にサイトの全ページに入る header.phpファイルになります。 レイアウトの作成 HTMLを以下のように組み立てることができます。 先述したメインボックスやビルディング・ボックスは、それぞれ セマンティック id を適用した divになります。 コンテンツエリアの中に3つのカラムが入っているのが分かるとおり、コンテンツ div は3つの追加 divsを持っています。一方がより重要であることを反映させるためによくされることですが、２つのサイドバーをそれぞれ「プライマリー」「セカンダリー」と名付けました。 チェス駒とログイン・ボックスの画像をコンテンツ div の中に追加しますが、 ログイン・ボックスをカラム構造の枠から独立させるために、 3つのカラムdivsの外に置くことにします。 ここからはCSSについて。 CSSでサイトのレイアウトを作る際の鍵は、CSSの不要な場合を見定めること、そしてフロートを要する場所がわずかであるという理解です。HTMLでは、コンテンツ div はそのままヘッダー divの真下に置き、 フッター div はそのままコンテンツdiv の下に置きます。これは div のデフォルト動作で、それが起こるために何もする必要はありません。 このデフォルト動作を変えたいので、コンテンツdiv内の各 divs をフロートします。これら3つのdivs がお互いの下に来ないように、お互いを隣り合わせにして配置し各々左方向にフロートするようにします。 デフォルト動作を変更させたら次はフッター divの調整を行います。 コンテンツ div内の内容全てがフロートした状態にあるので、 フッター divは自動的にその下に来ることはありません。 clear: both を追加することで（ここでは clear: leftを使っていますが）フッター div を強制的にコンテンツ div下に持っていきます。 必然的により多くのCSSが最終的には必要となります。上記のコードを試すと、どの divs にも幅や高さ指定、またそれらを設定するコンテンツがないため内容が乏しいのが分かります。そこにはこれから中味を埋めていく空っぽの構造体があるだけです。 フロートされた3つの divs の合計幅がページ全体の幅を越えないようにしなければいけないため、それら3つの幅設定には特に注意する必要があります。レイアウトに際してのもう一つの決定事項である全体の幅について、まだ詳しく述べていないことにお気づきでしょう。 固定もしくはリキッドのレイアウト デザイン・イメージを一見しただけでは、デザインが 固定されているのか流動的なのかが分かりません。事実どちらも可能なのです。テンプレートに付いているコードを見ると、3つの水平の帯（ヘッダー、コンテンツ。フッター）がウィンドウの端まで伸びながら、帯内のコンテンツ全部がページの中央に来るように設計されています。同じように私たちもしてみましょう。 全てを固定して中央に持っていきたい時は、div でその周辺を包んで幅を確保し、その div で包んだ部分を中央に据えます。おそらくCSSでページを中央に置く方法が皆さんには馴染み深いでしょう。 ページ全体を中央に置く方が簡単と言えば簡単なのですが、ここではそれを行いません。3つの水平帯の背景をブラウザの端まで伸ばしながら、帯内の内容全てをウィンドウの中央に置きます。私たちが目指すのは リキッドな背景と固定したコンテンツですが、幸いにもSoh Tanaka氏がすばらしいとても簡単な解決方法を提供してくれました。 ただCSSで一つのクラスを作り、それをHTML構造内にある選択可能なdivsに適用するだけでよいのです。 センタリングに精通している人なら、上のコードが通常 wrapper divに加えるものであることにお気付きになるでしょう。クラスとしてCSSを設定すれば、それが適用される箇所での柔軟さとコントロールが確実になります。新しいHTMLはこのようになります。
