静的コンテンツを作成する

本頁では、Webサイトを初めて構築される方が、静的コンテンツの基本構成である HTML5,JQuery(JavaScript),CSS,画像ファイルを作成し、Webサーバに配置して、 Webブラウザに表示することで、静的コンテンツの凡その構成について説明することを目的とします。

静的コンテンツの役割

静的コンテンツのそれぞれの主な役割については、以下となります。

  1. HTMLファイル
    • タイトル、主文
    • WebブラウザのHTMLに対する標準デザインの適用
    • 他Web資産へ紐づけ(リンク、ボタン等)
  2. 画像ファイル(*.png、*.jpg、*.gifなど)
    • 主文に関係する図
    • デザインを豊かにするため
    • 頁の閲覧者の想像力を引き出すため
  3. CSSファイル
    • デザイン(レイアウト、配色など)
  4. JavaScriptファイル
    • Webブラウザのイベントに対応する機能の拡張(Webブラウザ側のプログラミング)
    • 動的なDOM操作
    • Ajax(非同期通信)によるサーバーサイトのデータ取得

その他にマルチメディア(動画、音声など)があります。

静的コンテンツは、全てWebサーバのドキュメントルートに配備にします。

静的コンテンツの大まかな解析の流れ

静的コンテンツ(PC2台)の「HTTPへの理解-アクセスが２回ある」に示した概要図のように Webブラウザが最初に受け取るWebリソースは、HTMLファイルです。HTMLファイルがWebブラウザで解析されたら、 HTMLファイル内に指定した他のWebリソース(CSS,JavaScript,画像など)への指定に応じて、 WebブラウザからWebサーバに対してWebリソース分HTTPリクエストが送信されます。 Webサーバから返されたHTMLファイル以外のWebリソースは、ファイルの種類によってWebブラウザが構文を解析します。

Webブラウザの解析の流れは、JavaScriptやCSSを高度に操作する時に非常に重要になってきます。 JQeuryやJavaScriptの構文が正しいのに実際動かすとエラーが発生するケースはよく起こります。 その原因の多くは、Webブラウザの解析順番を正しく理解していない事が原因で、まだ存在しないDOMに対してJavaScriptなどで操作しています。

貴方がWeb開発でブラウザ側の高度なプログラミングをするようになりましたら、以下の頁を参考にして下さい。
Googleプロジェクト「HTML5 Rock」より「ブラウザの仕組み」

静的コンテンツのディレクトリ階層

まずは、貴方のPCにサンプルを管理するプロジェクトディレクトリを作成します。

本頁では、「websample」をプロジェクトコードとしてディレクトリを作成します。

Web開発を初めて経験される方は、左のサンプルをみるとファイル数やディレクトリ階層が多く感じると思います。 インターネットに公開されている各企業のWebリソースは、この100倍以上の資産をチームで管理しています。

最初の段階から小さな雛形で、ある程度大きなサイトのイメージができれば幸いです。

左のディレクトリ階層のフォルダをクリックするとブラウザ上で展開できます。

ディレクトリとファイルの説明

上記サンプルの階層例をベースに各ディレクトリとファイルの役割について説明します。

websampleは、サイト全てのWebリソーズを管理するルートディレクトリです。 Webサーバのドキュメントルートにwebsample配下のディレクトリとファイルを配備することでWebサーバに公開します。

websample配下のディレクトリは以下のとおりです。

websampleディクトリ配下

ディレクトリ
またはファイル		 説明
index.html WebサイトのTop頁
favicon.ico Webブラウザのタブやお気に入りに表示されるWebサイトのアイコン
common Webサイトの共通のデザイン、スクリプト言語の共通機能、画像などを管理します。
Bootstrap(CSS)やJQuery(JavaScript)などのライブラリを管理します。
sample Webサイトのカテゴリー別のサンプルディレクトリ
category01 Webサイトのカテゴリー別のサンプルディレクトリ
Webサイトを分割する分類(category)です。

websample/commonディクトリ配下

ディレクトリ
またはファイル		 説明
css 全頁に適用するcssファイル又は共通部品として幾つかのサブカテゴリーに適用するcssファイルを管理します。
css/style.css 全頁に適用するcssファイル又は共通部品として幾つかのサブカテゴリーに適用するcssファイル。
ファイル名は共通的なスタイルシートを意味する名前であればどのような名称でも良いです。
例)style.css、main.css、common.css、websample[サイト名略称].cssなど
js 共通部品化されたWebブラウザ側のスクリプト言語ファイルを管理します。
JQueryなどのライブラリなどをライブラリ別ディレクトリに管理します。
js/main.js 共通部品化されたWebブラウザ側のスクリプト言語ファイル
ファイル名称は、ファイルに記載した共通化された機能名を付与します。
js/jquery https://jquery.com/で取得したjquery.jsなどを管理します。
images 全頁に適用する画像ファイルを管理します。
会社、サイトのブランドロゴファイルなど
images/brand-logo.png サイトのブランドロゴファイル

websample/sampleディクトリ配下

ディレクトリ
またはファイル		 説明
css sampleディレクトリ配下に格納されたhtmlに適用するcssファイルを管理します。
js sampleディレクトリ配下に格納されたhtmlに適用するJavaScriptファイルを管理します。
images sampleディレクトリ配下に格納されたhtmlに利用する画像ファイルを管理します。
hoge.html sampleカテゴリーに属するhtmlファイル。
ファイル名は記述した本文の主旨を端的に表した-で連結した英単語にします。 (※.SEO対策の1つですが、禁則文字を利用しない事以外あまりこだわる必要性はありません。)

静的コンテンツのポイント

  • テキストベースのファイルであるhtml,css,jsファイルはutf-8で保存する。
  • Webリソースの資産が小さいうちに整理整頓(共通化、部品化)する
  • Webリソースの資産が小さいうちに基本スタイルの骨格を整える。
  • Webブラウザの検証機能「HTTPへの理解-ブラウザの検証機能」を参照して下さい。
  • 各Webリソースのアクセスは、相対パス、ルート相対パス、絶対パス

    上記サイトは、２次情報をまとめた記事ですが、纏め方が他記事より上手なのでリンクを記載します。
    ルート相対パスの１次情報は、「root relative path」でググって下さい。

    gakumon.techは相対パスで表現しています。絶対パスは、ドメイン名が異なるときや他サイトへのリンクを示す時のみ利用しています。

  • Webサーバに配備して動作確認を行い、ログファイルも確認します。