css（スタイルシート）について

質問

最近スタイルシートを勉強しているものです。

外部スタイルシートにて

body {
margin: 0;
padding: 0;
background-image:url(img/back.jpg);
background-repeat:repeat-y;
background-position: center;
background-color:#333333;
}
という記述で、背景の設定をしました。
プレビューイメージは背景＝黒　中央＝白といったイメージです。

中央＝白の位置にテキスト文字を入れたいのですが、マージンもしくはパディング設定をしてしまうと
ウィンドウのサイズによって背景と文字がずれてしまいます。

テキストの文章もcssで設定したい場合
どのように設定するのがよろしいでしょうか？

よろしくお願いします。

回答No.1

noname#96725

>最近スタイルシートを勉強しているものです。
本を読んでおられるのでしょうか、頑張って下さい。

>どのように設定するのがよろしいでしょうか？
外部シートの中は覗き込めないので気に入ったサイトのソースを開いても勉強出来ませんね。

私がやっていることの考え方だけをご紹介します。別にこれがベストだとは思っていませんので、他の本や他の方のご意見も参考にして下さい。

まず、テキストを乗せる為にrepeat-yの画像を使ってしまっている点の改良が必要だと思います。理由は背景画像はその上に乗せるフォントや画像などコンテンツに対して何の制約もしないからです。画面に現に見えている白い枠は実はそれがないのと同じです。

私はbodyの背景色は暗い目のべた一色にして、その中に幅780pxあたりの白かごく薄い色をつけたテーブル（クラス名backgroundtable）を置きます。

.backgroundtable{ width:780px;
border:0;
text-align:left;
margin:0px auto;
background-color:#ffffff; }

これを背景の上に乗せ、その中にクラス名を「backgroundtd」としたtdを一つ置いて四方のパディングを決めてやり、コンテンツはその中へ入れてやります。
最近はテーブルは万一込み入ったものにしたときに表示が遅くなると言う意見が増えましたが、PCの能力も上がっていて不満はないので私はこのようにしています。とは言え、込み入り過ぎないようにはして下さい。

>テキストの文章もcssで設定したい場合どのように設定するのがよろしいでしょうか？
上の例ではテキストは左寄せにしていますけれど、場所によってはクラス名をつけて それに相対位置を決めてやれば良いです。文字の大きさや色や行間隔もクラス名をつければどうにでもなりますよね。ひとくくりの文章なら全体をまとめて画面の中の好きな位置へ持って行けます。

私はごく一般的な文章の場合は外部CSSには
P {
font-family:sans-serif;
font-size:0.9em;
line-height:1.6em;
color:#2f3313;
text-align:left;
}
などと記述してやり、ほとんどの文章は<p></p>でくくり、ここぞと言う所ではクラス名を別につけて違うデザインにします。
外部で
.red｛color:#ff0000; font-size:1.1em; font-weight:800; }などとしてから
<span class="red">重要な点</span>
と言う風にしています。

考え方だけのアドバイスで失礼しました。でも後は独力で工夫されることを期待します。工夫も楽しい苦労です。

たまに体系的な知識までも無料という理由からネット上に求める人がいますが、体系的な知識は
本を買って読むのが一番頭に入りやすく、ワンポイントリリーフをこのようにネットで求める
のが効率的だと思って私もそうして勉強して来ました。

HPが出来上がるのが楽しみですね.最初から完全なものを狙い過ぎず、とりあえずのところでアップロードし、それからボツボツ改訂を重ねる方法もあります。私が外部CSSを採用して100枚近いHTMLファイルを全部書き換えたのは初めてUPしてから3年ほどしてからでした。

お礼

今後の参考にする事ができました。
この度は有難うございました。