リアルタイムホームページ作成記
初めてホームページを開設しようとするあきらの悪戦苦闘をリアルタイムで。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
コンテンツ作成中
昨日から本文作成中です。

ブログにアップした頃とは考え方が変わっていたりもするので,再チェックと書き換えで結構時間がかかってます。

ここでもデザイン的に注意しているのは,やっぱり
「読みやすい」「読んでいて疲れない」こと。

考えたら,ブログの方はそんなこと考えずに完璧にデザイン優先だったので,読むほうは大変だったろうな…

んで,フレームは使いたくない,というこだわりがあって,でもメニューがどのページにも表示してあってページ間の移動がしやすいサイトを目指しているので,やっぱりブログの2カラム風に,左サイドにメニューバーを置くことに。

この配置を決めるのがまた一苦労…

テーブル(表)を使って配置するのがいいらしい,というのはわかったのだけど,テーブルを作ること自体はHPビルダーでは簡単なのだけど,その中での配置が…
枠と文字との間隔を,メニューバーと本文とで変えたいんだけど,変えられない(できるんですか?)

作業中の見た目だけで一字アキとかつくると,あとあと別サイズの画面で見たらがたがたに崩れていた…ということになりかねないし…

普通に,全体を横2列のテーブルで囲って,左側を細くしてメニューバー,右側を大きくとって本文…という構成に最初はしてたのだけど,そうなると画面の幅が変わったときに,不細工な余白が右側にできるんですよね…
そうならないようにテーブルを%表示すると,メニューバーのほうの表示も画面によってまちまちになっちゃって,細いスペースの中で文字がぐちゃぐちゃになって見苦しいことに…

次に,全体をテーブルで囲むのをやめて,まず横2列のテーブルを作り,枠線を消して,左側をメニューバーに,右側を薄い枠にして文字が入らないようにして余白に…という形で作ってみた。
文字の回りこみも苦労してクリア。

こうすると,メニューバーの横に大きめに余白がとれるし,大きな画面で見てもいい感じに左右に広がるし,メニューバーのサイズもかわらない!
よし,これだ!!

…と思ったのだけど。
このやりかただと,サイドバーの長さと本文の長さが揃えられないということに気づいた。

うーん…なかなか理想的な形にならないな…

結局,どちらの一長一短なのですが,悩んでいても進まないので,全体をテーブルで囲む形にすることに決めました。

そして,一通り本文を作成して,こんどは素材屋さんで借りてきた画像を貼り付け,ページの味付けをはかります。

本文の方はなるべくシンプルにしたいので,メニューバーの余白にうるさくならない程度に…

そしてバーの一番下にも…

置けません。

そうなのか,一つのセルの何で,この部分だけ下付けとかできないのね…(右・左・センターはできるけど…)

どうしよう。
余白を改行でつくると,また画面によって変な位置に入ることに…

この場合,一番下に入らないと意味が無いんです。

またしても検索,検索で調べまくるけど,そんなことはどこにも見当たらない。
そんなことを考えること自体がおかしいのか???

その時,ふと思いついた。

「下にセルを足して,その部分だけ下付けで配置できるようにすればいいのでは?」

とりあえずやってみる。
どうしても,どうしてもメニューバーの一番下に画像を配置したいのだ。(←こだわり…)

下にセルを追加する。
適当な大きさにして,下付きに画像をおいてみる。

お!いい感じ!

プレビューで見てみる。

ザンネンながら,上のセルとの間に(枠線は消しているけど)細く地色の線が入ってしまっている。
再度枠線を0ピクセルに指定しなおし,プレビューで確認。

よし!線も消えた!

次は,右側の本文の入っているセルの調整。

今のままではメニューバーだけが下に飛び出しているので,本文の方も適当な大きさを切り取って下のセルに移し,バランスをとる。

おお!できた!!これぞ理想的な形!!!

ブラウザで確認してみる。
大きさを色々変えてみても一応問題ないみたい。

やっとこさ,本文のスタイルが整ったのでした。

今回,テーブル作成で参考にしたサイトさんはこちら↓

 「ホームページできるかな?
 「初心者向けホームページ作成支援 siriasu.net
スポンサーサイト
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2005 リアルタイムホームページ作成記 all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。