ホームページの作り方（HP作成法）ホームページの作り方（HP作成法）を解説

STEP1

1-1:準備
基本用語 ドメインの取得 スペースの確保 デザインを考える SEOを考える

STEP2

2-1:HTMLの記述
htmlファイルの作り方 HTMLの基本骨格 HTMLの種類、META、言語 タイトルと著作権情報 文の構成を考える 画像の表示 リンクの設定
2-2:CSSの記述
CSSのHTMLへの組み込み クラスの概念 文字の色とフォント 幅と高さの設定 文章の設定 文字の間隔・線 背景色・背景画像
2-3:CGI/アップロード
掲示板（BBS）の設置 カウンターの設置 サーバーへのアップロード アクセス解析の導入

STEP3

3:divでのレイアウト
divタグの使い方（前編） リストの設定 divタグの使い方（後編） インライン要素とブロック要素 floatの使い方 スクロールボックスの作成 アンカー(a)のスタイルの変更

STEP4

4:tableでのレイアウト
Tableの構造を知る Tableスタイルの変更 Tableでサイトを作る（前編） Tableでサイトを作る（後編）

STEP5

5:positionでのレイアウト
positionの構造を知る HTMLファイル（原本）作成 positionで位置を決める

STEP6

6:その他のテクニック
強調タグを使う サムネイルの作成 三次元化する スクロールバーの色を変える

STEP7

7:Javascriptを使用する
プルダウンメニュー
（フォーム使用）の作成 プルダウンメニュー
（CSS使用）の作成


>>ホームページの作り方TOP　>>デザインを考える

■デザインを考える

デザインを考える前に、自分がホームページで扱いたい主題と内容はあらかじめ考えておくことが必要です。 主題や内容が決まったら、その情報量に見合ったサイトデザインを考えます。

◇１カラム・・・情報量が少ない

情報量が少ない場合は、下のような□ベースの中に必要な情報を埋めるだけという手もあります。

　

作成例・・・若葉狩り

◇２カラム（横型）・・・情報量が普通

情報量が増えてくると1ページでは収まりきれなくなってきます。そうなった場合には２カラムを用いることでメニューカラムを作成でき、アクセシビリティが高まります。

　 　

作成例・・・Wakabagari(若葉狩り)

◇２カラム（縦型）・・・トップスペースを作りたい

トップにサイトのロゴなどのバーとしてのスペースを作りたい場合かつ、情報量の多すぎるサイトにはこのタイプが適しています。

　
　

作成例・・・アトピー治療.com(アトピー性皮膚炎を知る)

◇３カラム・・・トップスペース＋情報

トップスペースも作り、かつ、情報量もそれなりのサイトに適しているタイプ

　
　 　

作成例・・・アトピー性皮膚炎の原因と治療

◇４カラム・・・トップスペース＋広告

トップスペースも作り、かつ、情報量もそれなりで広告やリンクなどもトップページに配置したい場合に適しているタイプ

　
　 　 　

作成例・・・高血圧治療.com(高血圧を知る)

私がサイトを作るときは大体、ノートに大体のデザインをボールペン書きで作成していって、「これでいいかな」と思ったらそれに近くなるようにホームページを 作って行きます。

Copyright(C) Wakabagari. All rights reserved.