サイトの作り方

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

2007/03/04 2022/04/08

数十ページ規模の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部分)を間違わないように注意が必要です。

アバター画像
Crownfrog

2024年で、Webサイトの制作に従事して20年になる「インターネット老人会」の会員です。NIFTY-Serve、ISDNはじめちゃん、個人サイト、ウェブリング、前略プロフィール、mixiは一通り経験しております。

  • Kaiser(カイザー) ビリヤード セット
  • 無職転生 〜ロキシーだって本気です〜1

最新ランキング