ホームページの作り方（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>　>>文章の設定

■文章の設定

文章の位置を設定するタグとして最もよく使うのは、text-alignとvertical-alignの二つです。text-alignは文章を左寄りに書くか、右寄りに書くか、または中央に書くか（インデント）が指定できます。

p.a1 {
　　　text-align;left（左揃え）;
　　　text-align;right（右揃え）;
　　　text-align;center（中央）;
　　　}

デフォルトでは左揃えで、無理に中央は位置にせずして整っているので、サンプルではこのタグは使いません。でもよく使うタグです。

次にvertical-alignですが、これは縦位置を指定するタグです。

p.a1 {
　　　vertical-align;top（上端揃え）;
　　　vertical-align;middle（中央揃え）;
　　　vertical-align;bottom（下端揃え）;

　　　vertical-align;super（上付き文字）;
　　　vertical-align;sub（下付き文字）;
　　　}

vertical-alignというのは、 何かひとつの基準に対して縦方向の位置を調節するタグです（例：文字と画像(マーク)、文字とテーブルなど？）。なので、題(h2)とマークに対して指定することで効果が出ます。 middleはベースラインの上0.5ex(ex＝小文字xの高さの相対値、0.5＝xの高さの半分)に中央線をそろえる、baselineはベースラインに底辺をあわせる、

これを説明するためにサンプルのhtmlファイルの方の小見出しにマークを付けてみます。同時にそのマークに対してクラスを"mark"と指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
｜<a href="">HOME</a>｜<a href="">PROGRAMING</a>｜<a href="">TRAVEL</a>｜<a href="">DISEASE</a>｜<a href="">BBS</a>｜
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2><img src="point.gif" alt="" class="mark">意味</h2>
<p class="a1">
若葉狩りというのは紅葉狩りの若葉バージョンです。つまり、若葉を見に行くみたいなのりです。ただ、本来の意味は別のところ にあります。それは何かというと、みなさんは自動車につける若葉マークをご存知でしょうか？あれって初心者がつけますよね？ ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること＝若葉狩りにくることみたいになるでしょう？ それがこのサイト名の意味です。
</p>
<h2><img src="point.gif" alt="" class="mark">目的</h2>
<p>
目的はというと、特にはないです。が、あえていえば、紅葉マークをつけることでしょうかね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークになるでしょう？それと一緒ですね。
<p class="a2">
<address>Copyright(C)2007 Wakabagari all rights reserved.</address>
</body>
</html>

ここまでの状態ではマークは下揃えで表示されているため、cssファイルのほうでvertical-alignタグを用いて縦位置を調整します。

h2 img {
　　　　vertical-align:middle;
　　　　}

h2とimgの間にはクラスではないので”ドット”は入らず半角スペースで区切ってください。

すると、マークの中央が文字の高さの中央に来ると思います。文字とマークの間がくっついているので、次回はその間を広げてみることにします。

ここまでのサンプル

Copyright(C) Wakabagari. All rights reserved.