WSJ21[GHP] - 良いホームページの作り方講座 - 目次

■Content■グッドホームページ作成講座(Creating Good Homepage)

■当コンテンツに関して

昔の物で古いです。参考程度に止めておいて下さい。 新コンテンツは、WSJ21.NETにて公開しています。

このコンテンツは、出来の悪さに放置しています。更新の予定はありません。 多少の間違いも有りますので、それを踏まえた上で、参考程度にして下さい。 本気で、正しい分法を身につけたい場合は、「W3C(英語サイト)」をオススメ致します。

■更新履歴(毎週1回以上更新します!)

【3/21】見やすいホームページとは?
【3/16】GHP講座G4 「GIFアニメーションの作り方」
【3/09】IEでの文字拡大に対応<「表示→文字のサイズ」で選択
【3/09】OP(オペラ)のナビゲーションバーに対応
【3/08】GHP講座G3 「バナーを作ろう - 良いバナーの作り方」
【3/01】GHP講座G2 「圧縮(JPG)と減色(PNG)のサイズと画質の違いを見比べよう!」
【2/21】GHP講座G1 「各画像形式(jpg, gif, png)の特徴を理解しよう」

▼まえがき − 主張(コンセプト)

2003年の主力更新項目のよいホームページ普及講座です。 今日(こんにち)ではインターネットが普及し、 誰しもが手軽に簡単にホームページを作ることができます。 しかしその反面、粗悪なホームページを作る人が多くいます。 そのような中、良質な良いホームページは「ステータスになる」とは思いませんか? 上記の理由から、当コンテンツ「GHP」を開講しました。

同じホームページを作るなら「悪いホームページ」より「良いホームページ」を持ちたいですからね。 当サイト「WSJ21」の管理人「PONTA」と一緒に「良いホームページ」を作りましょう♪

尚、解説で理解しにくい箇所がありましたら気軽に言って下さいね♪ 読んで分からないから諦めるより、聞いてみて分かると気持ちいいからね☆ 私の方としましても、より分かりやすい内容を目指していますので(^o^)

▼はじめに − 良いホームページとは!?

まず初めに良いホームページとはどのようなホームページを指すのでしょうか? 先を読み進まずに一度頭に思い浮かべて、紙に列挙してみて下さい。 思い浮かんだ言葉が「あなたが理想とする良いホームページ」です。

当方が提示する良いホームページの基準は次に挙げる様な言葉です。
【見た目】「クールさ」「かわいらしさ」「見やすさ」「分かり易さ」「軽さ」「統一性」...
【内容面】「明確なコンセプト」「内容の充実」「更新の頻度」...
利便上、上記の幾つかの条件を網羅したサイトを『良いホームページ』と呼ぶことにします。 相反する言葉があるので、全ての条件を網羅することは不可能ですからね☆

自分に合った「良いホームページ」を作っていくことが、この講義の目指すところ「目標」です。 皆さんは訪問者の立場に立ったホームページを作ることを目標として下さい。 しかし、自分自身では主観的になりがちなので、客観的な評価を得る為に、 より多くの人に見てもらい、様々な意見をもらうのが最善の方法です。

尚、良いホームページの作り方の基礎はこちら側から伝授しますので御安心下さい。

▼対象者・注意事項

●対象者
  良いホームページ制作入門者
  良いホームページ制作初心者

●注意事項
当講座では将来性を考慮して「XHTML1.1」の規格に基づいて記述、解説しています。 現在最も普及している「HTML」規格との互換は極力保った形で進行していきます。 また、デザイン面では極力CSS(スタイルシート)を使用するものとします。 若干違いがでてくるため、HTML言語を覚えている方は御注意下さい。


▼GHP講座1 − ホームページをつくるまえにやること

  1. ホームページ作成の下準備 1/04-16
    • まず、考えること
    • ホームページを作る為に必要な物
    • ホームページを作る前に
    • ナビゲーションを考える?
    • 制作時の注意事項
    • 画面構成を考える

▼GHP講座2 − XHTMLタグを覚える

  1. 1/04 タグって何?自分だけの雛形を作ろう!
  2. 1/04 2種類のタグ、タグの要素一覧
  3. 1/05-16 br hr h1 h2 h3 h4 h5 h6 p em strong i b blockquote q cite
  4. 1/05 big small ins del u s strike sup sub dfn tt bar code kbd samp pre
  5. 1/06 img a
  6. 1/07 [list] ol li, ul li, dl dt dd
  7. 1/07 [table] table caption tr th td (colgropup col thead tbody tfoot)
  8. 1/08 [ruby] ruby rb rt rp (rbc rtc) [text] address div span [base] base
  9. 1/08 [frame] frameset frame noframes (iframe) 「a要素target属性」

▼GHP講座3 − CSS、スタイルシートを覚える

  1. 1/10 CSSスタイルシートって何?書き方は3通り!
  2. 1/11 講義の進め方、講座2の再確認
  3. 1/11 [font] font-style font-weight font-size font-family font
  4. 1/11 [color] color [BackGround] background
  5. 1/12 [text] text-align, vertical-align, text-decoration, text-indent line-height, letter-spacing
  6. 1/12 [box] margin, padding, border(*-width, *-color, *-style), width, height
  7. 1/13 [scrollbar] arrow, base, face, highlight, shadow, 3dlight, darkshadow, track ヘッダ記述式の書き方、スクロールバーの色を変更する
  8. 1/13 クラスと擬似クラス(マウスが乗るとリンクの色を変更)
  9. 1/14 外部CSSファイルの書き方&作り方

▼GHP講座4 − あなた自身のホームページを作る

  1. 1/14 再確認事項、講座内容
  2. 1/15 バナー制作の注意事項、FTPソフトでサイト公開
  3. 1/15 訪問者を呼び込む、公開後の管理の仕方

▼GHP講座5 − テーブルデザインテクニック!

  1. [Sample] 2/09 ていねいで見栄えの良いリンク集作り
  2. [Sample] 2/11 綺麗にまとまったメニュー作り

▼GHP講座G − 画像に関する情報など

  1. 2/21 各画像形式(jpg, gif, png)の特徴を理解しよう
  2. 3/1 圧縮(JPG)と減色(PNG)のサイズと画質の違いを見比べよう!
  3. 3/8 バナーを作ろう - 良いバナーの作り方
  4. 3/16 GIFアニメーションの作り方

▼GHP講座C − 色に関する情報など

  1. 【Web】 1/23 セーフカラーと言われる機種依存しにくい216色【色一覧】
  2. 【HSV】 1/23 色相、明度、彩度を並べた【色一覧】
  3. 【PCCS】 1/23 PCCS表色系に基づいた【色一覧】

▼GHP講座F − ちょっぴり便利な小技集(DLファイル)

  1. 【File】 1/16 HTML講座(総数22頁)・・・過去に書いた講座です。
  2. 【File】 1/16 クリッカブルマップ・・・1つの画像に複数のリンクを張ろう!
●もどる●