HTML設計

コンテンツを入れる為のテンプレートページを作成する際、どのような形でデザイナーからあがったデザインをHTMLへ適用させるかをまとめてあります。

考え方

デザイナーが作った部品を実際にHTMLへ配置しします。その際HTML内をIDより分ける(例<div id=hoge></div>)とスタイルシートを使ったページデザインや行いやすくなります。また、テーブルによるレイアウトを廃止する場合はこの領域分けが必須になります。ここではレイアウトの為にテーブルを使わない前提での制作を想定にまとめてあります。

トップページのHTML

共通ヘッダ、フッタの他にトップページならではの特徴を出すところです。ナビゲーションにもよりますが、基本的にデザイナーが作成したデザインを分解して当て込む作業になります。

コンテンツページのHTML

コンテンツページはヘッダ、フッタ、トピックパス、メニュー、コンテンツの領域に分かれます。各領域内のコンテンツを修飾する場合はスタイルシートを使い、他の領域でそのスタイルを使っても無効になるような修飾をします。<div>や<span>でそのコンテンツ毎に修飾するのではなく、HTMLタグのにスタイルを再定義する形をとるとその後のリニューアルにおいてもコンテンツを活用しやすくなります。

例:メニュー領域にある箇条書き箇所にスタイルを指定する場合

悪い例
<div id=MENU>
<ul>
<li><div class=link>ほげ</div></li>
</ul>
</div>
スタイルシートで .link{修飾}

推奨する例
<div id=MENU>
<ul>
<li>ほげ</li>
</ul>
</div>
スタイルシートで #MENU li{修飾}

チェック&レビュー

暫定ページのHTML化完了後 Lintなどで推奨されないHTMLの使われ方がされていないか確認しましょう。

個別ページの作成

メニューを適用  見出しを適用  ナビゲーションを適用

成果物・制作資料・レポート・ドキュメント

  • HTMLファイル
  • CSSファイル
専門家によるホームページデザインで、御社のホームページを「顧客に魅せる」ページに!

ENaturalのホームページへ