自分で作成した画像を背景にしたホームページ

質問

webページ制作に関しては初級レベル程度の者です。今は手打ちで作っています。
ブログなどでもそうなのですが、photoshopなどを使って自分で画像を作り、それを背景にして
文章などを書いている方のページがありますよね。
あれはどのようにやっているのですか？
どうやってうまく文字を入れているのかなぁって思っています。
例えばMovableTypeのブログなら投稿してその背景とかぶっちゃったりしないのかなとか、記事が多くなってきた場合、底の方の背景が切れて
文字だけが下に延びてしまわないのだろうか等、どうやってうまく配置されるのだろうと思っています。
その辺はCSSでうまく指定できるのかなぁと思ったり・・・。
説明がわかりにくく申し訳ないのですが、わかる方がいらっしゃいましたらわかりやすく教えて下さい。
必要があれば補足いたしますので、お願いします。

回答No.3

s_hukami · ベストアンサー

> 原稿用紙のような罫線
ということでしたら、文字サイズ固定、行の高さ固定に加え、文字間の指定も固定にする必要があると思います。
ちなみに文字と文字との間のスペースを指定するCSSは
「letter-spacing: ○px;」です。
CSSで細かくデザインを指定する際には、Internet Explorerだけでなく、Opera、Firefox、MozillaまたはNetscapeなど、最低でも二種類か三種類のブラウザで表示を確認することをおすすめします。

どうでも良いことですが、笑い上戸なので、「ソースを見ればいいというのはそーすね」に思わずぶっと吹き出しそうになりました（ダジャレに特に弱い）。
HTMLを保存して参考にする場合には（無料配布テンプレート以外のものは、画像もソースもそのまま流用しない方が良いです）、Internet Explorerで、元のソースコードとは違うIE独自のものに書き換わってしまうようなので、その他のブラウザで保存した方が良いのではないかと思います。
IEで保存したソースコードは非常に読みにくくなるので。

お礼

さらに詳しい説明ありがとうございます。
なるほど文字間の指定も行う必要があるのですね。
すごくわかりやすかったです。しかしそれにしても行数が増えてくれば微妙にずれてこないのかなぁと思うのですが
考えすぎなのかもしれません。今度一度やってみたいと思います。
IEのソースの件については初耳でした。参考になりました。
それからダジャレに気づいてくれてありがとうございます。
スルーされたらどうしようと思ってました（笑）

回答No.2

s_hukami

ブログで背景画像にノートのような罫線を表示しているようなデザインなどは、CSSで指定しています。
その場合は、文字サイズ（font-size: ○px;）や行の高さ（line-height: ○px;）などを固定で指定しないと、文字サイズなどを大きくしてしまった場合に、デザインが崩れてしまいます。
箱形みたいな画像をCSSで指定している場合には、上部と中間と下部の画像をそれぞれ別にわけて、その部分ごとに指定しています。
例えばHTML部分に
<div class="texthead">～</div><div class"textcenter">～</div><div class"textfoot">～</div>
などのように記述し、CSSで
.texthead { background: url(texthead.jpg) no-repeat; width: 400px; }
.textcenter { background: url(textcenter.jpg) repeat-y; width: 400px; }
.textfoot { background: url(textfoot.jpg) no-repeat; width: 400px; }
などと記述します。
手打ちで入力されているのならば、気になるサイトのソースを見た方が早いかもしれません。

お礼

ありがとうございます。
説明のしかたが悪くてすみません。
しかし何となくわかったような気がします。
原稿用紙のような罫線を模した、というのは正にそんな感じのものが気になっていました。
ソースを見ればいいというのはそーすね。

回答No.1

noname#56568

タグを手打ちでやっていますか！いい事です。

ページの背景にしても、テーブルの背景にしても画像を指定する事ができます。
背景に指定した画像の回り込みもCSSで指定する事ができます。
横方向にだけ画像を繰り返すか、縦方向にだけ画像を繰り返すか、全く繰り返さないなど。

テーブルレイアウトを使わずにスタイルシートでレイアウトする事も可能です。

お礼

ありがとうございます。
説明の仕方がわかりにくくてすみませんでした。
ＣＳＳを使ってやる、なんとなくわかった感じがします。