HITP 広島工業大学専門学校

— ホームページを作ろう —
ホームページ制作演習編
— 個人ホームページの制作を例に —

目 次  

  1. ドキュメントサンプル
    1. 1. サイト構築企画書
    2. 2. コンテンツシート（ラフ）
    3. 3. サイトマップ（ラフ）
    4. 4. 制作ガイドライン
    5. 5. コンテンツデザイン（ラフ）
      1. 5-1. トップページのデザイン（ラフ）
      2. 5-2. 書籍トップページのデザイン（ラフ）
      3. 5-3. 書籍詳細ページのデザイン（ラフ）
    6. 6. サイト階層図
    7. 7. 基本レイアウトデザイン
      1. 7-1. レイアウト図
      2. 7-2. レイアウト階層
      3. 7-3. 基本スタイルシートの制作
        1. 7-3-1. 要素初期設定
        2. 7-3-2. 基本スタイル
        3. 7-3-3. レイアウトスタイル
        4. 7-3-4. スタイル用画像
        5. 7-3-5. スタイルシート
        6. 7-3-6. サンプルXHTML
    8. 8. トップページデザイン
      1. 8-1. レイアウト図
      2. 8-2. 階層図
      3. 8-3. レイアウトスタイル
      4. 8-4. スタイルシート
      5. 8-5. コンテンツ
      6. 8-6. サンプルXHTML
    9. 9. サブトップページデザイン
      1. 9-1. レイアウト図
      2. 9-2. レイアウトスタイル
      3. 9-3. スタイル用画像
      4. 9-4. スタイルシート
      5. 9-5. コンテンツ
      6. 9-6. サンプルXHTML
    10. 10. 詳細ページデザイン
      1. 10-1. レイアウト図
      2. 10-2. レイアウトスタイル
      3. 10-3. スタイルシート
      4. 10-4. コンテンツ用画像
      5. 10-5. コンテンツ（訓読ページ）
      6. 10-6. コンテンツ（拡大ページ）
      7. 10-7. サンプルXHTML（訓読ページ）
      8. 10-8. サンプルXHTML（拡大ページ）
    11. 11. テンプレートデザイン
      1. 11-1. ファイル命名規則
      2. 11-2. CSS規則
      3. 11-3. 画像規則
      4. 11-4. サイト階層
      5. 11-5. 共通CSS
      6. 11-6. サイトトップ
        1. 11-6-1. コンテンツ：ユーザー用
        2. 11-6-2. コンテンツ：制作用
        3. 11-6-3. サイトトップCSS
        4. 11-6-4. サイトトップXHTML
      7. 11-7. 書籍トップ
        1. 11-7-1. コンテンツ：ユーザー用
        2. 11-7-2. コンテンツ：制作用
        3. 11-7-3. 書籍用CSS
        4. 11-7-4. 書籍トップXHTML
      8. 11-8. 詳細（訓読）ページ
        1. 11-8-1. コンテンツ：ユーザー用
        2. 11-8-2. コンテンツ：制作用
        3. 11-8-3. 詳細（訓読）ページXHTML
      9. 11-9. 詳細（拡大）ページ
        1. 11-9-1. コンテンツ：ユーザー用
        2. 11-9-2. コンテンツ：制作用
        3. 11-9-3. 詳細（拡大）ページXHTML

    ドキュメントサンプル

    1. サイト構築企画書

    画像をクリックすると拡大表示されます。PDF版はこちら

    サイト構築企画書サンプル

    2. コンテンツシート（ラフ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    コンテンツシート（ラフ）サンプル

    3. サイトマップ（ラフ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    サイトマップ（ラフ）サンプル

    4. 制作ガイドライン

    画像をクリックすると拡大表示されます。PDF版はこちら

    制作ガイドライン サンプル

    5. コンテンツデザイン（ラフ）

    5-1. トップページのデザイン（ラフ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（ラフ） サンプル

    5-2. 書籍トップページのデザイン（ラフ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    書籍トップページデザイン（ラフ） サンプル

    5-3. 書籍詳細ページのデザイン（ラフ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    書籍詳細ページデザイン（ラフ） サンプル

    6. サイト階層図

    画像をクリックすると拡大表示されます。PDF版はこちら

    サイト階層図 サンプル

    7. 基本レイアウトデザイン

    7-1. レイアウト図

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（レイアウト図） サンプル

    7-2. レイアウト階層

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（レイアウト階層） サンプル

    7-3. 基本スタイルシートの制作

    7-3-1. 要素初期設定

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（要素初期設定） サンプル

    7-3-2. 基本スタイル

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（基本スタイル） サンプル

    7-3-3. レイアウトスタイル

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（レイアウトスタイル） サンプル

    7-3-4. スタイル用画像

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（スタイル用画像） サンプル

    7-3-5. スタイルシート

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（スタイルシート１） サンプル

    基本レイアウトデザイン（スタイルシート２） サンプル

    基本レイアウトデザイン（スタイルシート３） サンプル

    基本レイアウトデザイン（スタイルシート４） サンプル

    基本レイアウトデザイン（スタイルシート５） サンプル

    7-3-6. サンプルXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    基本レイアウトデザイン（サンプルXHTML１） サンプル

    基本レイアウトデザイン（サンプルXHTML２） サンプル

    基本レイアウトデザイン（サンプル画面） サンプル

    8. トップページデザイン

    8-1. レイアウト図

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（レイアウト図） サンプル

    8-2. レイアウト階層図

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（レイアウト階層図） サンプル

    8-3. レイアウトスタイル

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（レイアウトスタイル） サンプル

    8-4. スタイルシート

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（スタイルシート１） サンプル

    トップページデザイン（スタイルシート２） サンプル

    8-5. コンテンツ

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（コンテンツ） サンプル

    8-6. サンプルXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    トップページデザイン（サンプルXHTML１） サンプル

    トップページデザイン（サンプルXHTML２） サンプル

    トップページデザイン（サンプル画面） サンプル

    9. サブトップページデザイン

    9-1. レイアウト図

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（レイアウト図） サンプル

    9-2. レイアウトスタイル

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（レイアウトスタイル） サンプル

    9-3. スタイル用画像

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（画像） -1サンプル

    サブトップページデザイン（画像）-2 サンプル

    サブトップページデザイン（画像）-3 サンプル

    9-4. スタイルシート

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（スタイルシート）-1 サンプル

    サブトップページデザイン（スタイルシート）-2 サンプル

    サブトップページデザイン（スタイルシート）-3 サンプル

    サブトップページデザイン（スタイルシート）-4 サンプル

    9-5. コンテンツ

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（コンテンツ）-1 サンプル

    サブトップページデザイン（コンテンツ）-2 サンプル

    サブトップページデザイン（コンテンツ）-3 サンプル

    9-6. サンプルXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    サブトップページデザイン（サンプルXHTML）-1 サンプル

    サブトップページデザイン（サンプルXHTML）-2 サンプル

    サブトップページデザイン（サンプルXHTML）-3 サンプル

    サブトップページデザイン（サンプル画面） サンプル

    10. 詳細ページデザイン

    10-1. レイアウト図

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細（訓読用）ページデザイン（レイアウト図） サンプル

    詳細（拡大用）ページデザイン（レイアウト図） サンプル

    10-2. レイアウトスタイル

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（レイアウトスタイル） サンプル

    10-3. スタイルシート

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（スタイルシート）-1 サンプル

    詳細ページデザイン（スタイルシート）-2 サンプル

    10-4. コンテンツ用画像

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（コンテンツ：画像）-1 サンプル

    詳細ページデザイン（コンテンツ：画像）-2 サンプル

    10-5. コンテンツ（訓読ページ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（コンテンツ：訓読用）-1 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-2 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-3 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-4 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-5 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-6 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-7 サンプル

    詳細ページデザイン（コンテンツ：訓読用）-8 サンプル

    10-6. コンテンツ（拡大ページ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（コンテンツ：拡大用） サンプル

    10-7. サンプルXHTML（訓読ページ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（XHTML：訓読用）-1 サンプル

    詳細ページデザイン（XHTML：訓読用）-2 サンプル

    詳細ページデザイン（XHTML：訓読用）-3 サンプル

    詳細ページデザイン（XHTML：訓読用）-4 サンプル

    詳細ページデザイン（XHTML：訓読用）-5 サンプル

    詳細ページデザイン（XHTML：訓読用）-6 サンプル

    詳細ページデザイン（サンプル画面：訓読用） サンプル

    10-8. サンプルXHTML（拡大ページ）

    画像をクリックすると拡大表示されます。PDF版はこちら

    詳細ページデザイン（XHTML：拡大用）-1 サンプル

    詳細ページデザイン（XHTML：拡大用）-3 サンプル

    詳細ページデザイン（サンプル画面：拡大用）-4 サンプル

    11. テンプレートデザイン

    11-1. ファイル命名規則

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（ファイル命名規則） サンプル

    11-2. CSS規則

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（CSS規則1） サンプル

    テンプレートデザイン（CSS規則2） サンプル

    11-3. 画像規則

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（画像規則） サンプル

    11-4. サイト階層

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（サイト階層） サンプル

    11-5. 共通CSS

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（共通CSS1） サンプル

    テンプレートデザイン（共通CSS2） サンプル

    テンプレートデザイン（共通CSS3） サンプル

    テンプレートデザイン（共通CSS4） サンプル

    テンプレートデザイン（共通CSS5） サンプル

    テンプレートデザイン（共通CSS6） サンプル

    テンプレートデザイン（共通CSS7） サンプル

    11-6. サイトトップ

    11-6-1. コンテンツ：ユーザー用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：サイトトップ：ユーザー用） サンプル

    11-6-2. コンテンツ：制作用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：サイトトップ：制作用） サンプル

    11-6-3. サイトトップCSS

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（サイトトップCSS1） サンプル

    テンプレートデザイン（サイトトップCSS2） サンプル

    11-6-4. サイトトップXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（サイトトップXHTML1） サンプル

    テンプレートデザイン（サイトトップXHTML2） サンプル

    11-7. 書籍トップ

    11-7-1. コンテンツ：ユーザー用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：書籍トップ：ユーザー用1） サンプル

    テンプレートデザイン（コンテンツ：書籍トップ：ユーザー用2） サンプル

    11-7-2. コンテンツ：制作用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：書籍トップ：制作用1） サンプル

    テンプレートデザイン（コンテンツ：書籍トップ：制作用2） サンプル

    11-7-3. 書籍用CSS

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（書籍用CSS1） サンプル

    テンプレートデザイン（書籍用CSS2） サンプル

    11-7-4. 書籍トップXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（書籍トップXHTML1） サンプル

    テンプレートデザイン（書籍トップXHTML2） サンプル

    テンプレートデザイン（書籍トップXHTML3） サンプル

    11-8. 詳細（訓読）ページ

    11-8-1. コンテンツ：ユーザー用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：詳細（訓読）ユーザ用1） サンプル

    テンプレートデザイン（コンテンツ：詳細（訓読）ユーザ用2） サンプル

    テンプレートデザイン（コンテンツ：詳細（訓読）ユーザ用5） サンプル

    テンプレートデザイン（コンテンツ：詳細（訓読）ユーザ用4） サンプル

    テンプレートデザイン（コンテンツ：詳細（訓読）ユーザ用5） サンプル

    11-8-2. コンテンツ：制作用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：詳細（訓読）制作用） サンプル

    11-8-3. 詳細（訓読）ページXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（詳細（訓読）ページXHTML1） サンプル

    テンプレートデザイン（詳細（訓読）ページXHTML2） サンプル

    テンプレートデザイン（詳細（訓読）ページXHTML3） サンプル

    テンプレートデザイン（詳細（訓読）ページXHTML4） サンプル

    テンプレートデザイン（詳細（訓読）ページXHTML5） サンプル

    テンプレートデザイン（詳細（訓読）ページXHTML6） サンプル

    11-9. 詳細（拡大）ページ

    11-9-1. コンテンツ：ユーザー用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：詳細（拡大）：ユーザー用） サンプル

    11-9-2. コンテンツ：制作用

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（コンテンツ：詳細（拡大）：制作用） サンプル

    11-9-3. 詳細（拡大）ページXHTML

    画像をクリックすると拡大表示されます。PDF版はこちら

    テンプレートデザイン（詳細（拡大）ページXHTML1） サンプル

    テンプレートデザイン（詳細（拡大）ページXHTML2） サンプル

    (C)Copyright 2010 HIROTAKA.YAMASHITA. HITP 広島工業大学専門学校. All Rights Reserved.