2010年4月からホームページビルダー（HPB）を使って、イントラ用のWebページを作成しています。
定年退職する先輩から引き継いだ業務ですが、Webページの作成はもとより、「これでやるんだ！」と渡されたHPBそのものを使ったことがありませんでした。
業務を引き継ぐ後任の選択において、会社の上司がどれほどの無茶振りをしたかお分かりいただけるものと思います。
先輩から指導されたのはHPBの起動の仕方（デスクトップ上のショートカットアイコン）、編集画面の表示、HPBに設定済みのFTP機能でのWebサーバへのUpの仕方くらいです。
このような状況なので、つい先日までレイアウト変更など思いもよらないことで、先輩が作成したレイアウト上のデータを維持更新するのが精一杯でした。
そんなある日、Webページの構築をしているプロの友人から、現在ではページレイアウトはスタイルシートでやるものだと聞かされましたが、何のことやらチンプンカンプンで、この言葉を理解しようと一念発起し調べました。（60の手習い!!）
因みに私が先輩から引き継いだページは、HTMLのテーブル要素でレイアウトされているのだということが分かりました。
Webページ作成技術が十分でなかった時代にはTableでレイアウトすることが主であり、Tableでレイアウトすることが悪い訳ではありませんが、技術が進歩した現在ではスタイルシートたるものを使ってレイアウトするのが主流であるということもわかりました。
んなことが分かってくると、俄然私の闘志に火が着きます。ネット上ではいろんな人がスタイルシートでのレイアウトの仕方を伝授してくれています。スタイルシートをCSS(cascading style sheets )なるもので作成することも分かりました。しかし、HPBでのやり方が全く分かりません。
HPBについてきたマニュアルにもこの辺りのことは詳細記述されておらず、仕方ないのでHPBを起動し、兎に角もいじりまくり、HPBでのスタイルシートの初歩的な使い方を何とか把握しました。
HPBの使い方の講習会などに行く暇もお金もないか、もとより費用の負担力も時間も十分にあったとしても、そこまで熱心に勉強する必要性はなく、最小限の結果だけを得たいという“せっかち”で“怠け者”の私が確認できたことを、私同様の考えの方にお伝えしようと思います。
１．作成するスタイル構成を決める。
以下のような構造でページレイアウトしたいとします。
これは、“二段組み”と呼ばれているようです。
２．作成するページ用の素材や「.html」ファイルを収納するフォルダーを、ドキュメントなど適当な場所に作成し、フォルダー名をつける。
ここでは、「styletest」としておく。
３．HPBを起動
４．〔新規作成〕ボタンをクリック
５．〔白紙から作成する(B)〕ボタンをクリック
６．「標準モード」を選択し、〔OK〕ボタンをクリック
７．「ページ／ソース」タブをクリック
８．下段に表示されたHTMLソースに、スタイルの骨組みを記述（マークアップ）します。
①<body></body>の間にカーソルを置き、Enterキーを押します。
②以下の通りに記述します。
------------------------------------------------------------------------------------------------------------------------------------------
<body>
<div class=”header”>
ヘッダー部分
</div>
<div class=”main”>
<div class=”contents”>
本文部分
</div>
<div class=”sidemenu”>
メニュー部分
</div>
</div>
<div class=”footer”>
</div>
</body>
------------------------------------------------------------------------------------------------------------------------------------------
③上段のページ編集画面をクリックすると、入力した“文字”が表示されます。
④名前を付けて「styletest」フォルダーに保存。ここでは「index.html」とする。
９．フルCSSを記述する
①HPBを起動し、先に保存した「index.html」を呼び出す。
②「ページ編集」画面で、右クリックし、表示されたメニューの「スタイルの設定」をクリック
③「スタイルシートマネージャで編集(6)」をクリック
④「外部スタイルシートの追加(A)」をクリック
⑤外部スタイルシートの名前を入力（ここでは「user」とする。）
〔参照〕ボタンを押し、保存するフォルダーを選択する。
〔OK〕ボタンをクリック
⑥スタイルシート情報に新しいCSSファイルが追加される
⑦「CSSエディターで編集」をクリック
⑧CSSエディターが表示される。
「HTMLファイルを指定する」にチェックを入れると、先に保存していた「index.html」が表示される。
表示されない場合は、右の〔参照〕ボタンをクリックして、表示させる。
⑨何はともあれ、結果を得ればいいわけだから、中央窓の黄色の部分に以下をコピー＆ペーストする。
（左メニューの幅を150pxに、上端から50pxに固定する場合）
------------------------------------------------------------------------------------------------------------------------------------------
body,h1,h2,h3,p,div,ul,ol,li,dl,dd,dt,table,form,blockquote,pre,address{
margin : 0;
padding : 0;
}
body{
width : 100%;
}
.header{
width : 100%;
height : 50px;
}
.main{
width : 100%;
}
.contents{
margin-left : 150px;
}
.sidemenu{
position : absolute;
left : 0px;
top : 50px;
width : 150px;
}
.footer{
width : 100%;
}
.sidemenu ul{
list-style-type : none;
------------------------------------------------------------------------------------------------------------------------------------------
⑩「ファイル」→「上書き保存」をクリック
⑪「文字コードの修正」が表示されたら〔OK〕ボタンをクリック
⑫「ファイル」→「終了」をクリックし、CSSエディターを終了する。
⑬スタイルシートマネージャ画面の〔閉じる〕ボタンをクリック。
⑭スタイルの設定画面の〔OK〕ボタンをクリック。
⑮ページ編集画面に戻る。
最初の文字と並びが変化したこと。文字部分をクリックすると、以下のように範囲がピンク色で表示されることが確認できると思います。
本文部分の行が増えると、フッター部分も一緒に下に移動します。
ヘッダー部分の高さが50pxより高くなると、
「.header」のheightのpx数値を増やし、
「.sidemenu」のtopのpx数値を同じほど増やさなければなりません。
（用語について）
Px ：幅や高さの大きさの単位（ピクセル）
width：幅
＊上記の.contents {margin-left : 150px}の｛ ｝内は、左メニューと本文が被らないよう、本文の左スペースを指定したもの。
単純なモデルですが、これさえ分かれば今後の学習にも弾みが付こうというものです。
【関連記事】
○ Ｗｅｂページを画面の中央に表示させる／HPBでWebページ作成
