修正箇所が少ないWEBサイト設計

スポンサーリンク

制作日: 2007/03/04
最新更新日: 2007/03/04

数十ページ規模のWEBサイトを制作中に変更作業が発生した場合全HTMLファイルを変更するのは手間がかかる上にミス発生の原因にもつながります。修正作業が発生した際、同一内容の修正であれば一箇所を変更することで全体に反映されるようなWEBサイト設計が重要になります。

ナビゲーション部分などWEBサイト全体に反映するような場合相対パスや絶対パスなどの関係性を理解しておく必要があるため初心者の方には難しくなりますが、マウスが触れると画像が変わるJavaScript(以下、JS)ファイルやCascading Style Sheets(以下、CSS)によるテキスト装飾、WEBサイト全体の背景色の変更などには非常に効果的です。

一箇所で管理するの場合、個々のHTMLファイルにコードを埋め込むのではなく、図のようにCSSファイルやJSファイルを外部化することで可能になります。

  1. Cascading Style Sheetsの設定

    <link rel="stylesheet" href="stylesheet.css" media="screen" type="text/css" />

  2. JavaScriptの設定

    <script type="text/javascript" src="javascript.js"></script>

<head>タグの間に上記のように書くことで、外部ファイルを読み込むことが可能になります。その際各ページからの外部ファイルへの相対パス部分の変更(CSSの場合href部分、JSファイルの場合src部分)を間違わないように注意が必要です。

スポンサーリンク

サイトの作り方に関する参考書籍

  • A Better Design Webページ リ・デザインブック
  • A Better Design Webページ リ・デザインブックII
  • WEB DESIGNERS FILE
  • ウェブ時代をゆく - いかに働き、いかに学ぶか
  • ウェブ進化論 本当の大変化はこれから始まる
  • グーグル - Google 既存のビジネスを破壊する
  • グーグル・アマゾン化する社会
  • 「買いたい!」のスイッチを押す方法 消費者の心と行動を読み解く
  • 色彩の世界地図
  • 仕事に役立つWebデザイン完全ガイド
  • たのしいロゴづくり - 文字の形からの着想と展開
  • ニホンゴロゴ - ひらがなカタカナ漢字による様々な業種のロゴ
  • ネットショップ起業 成功バイブル
  • フリー <無料>からお金を生みだす新戦略
このページのトップに戻る