★ジャンル別雑文集＆ホームページ作成
＆JavaScriptゲーム★

テーマ５．対象部分を中央にする

全体ではなく一部だけを中央揃えにしたいという場合があります。
今回は特定の対象部分を中央にする方法を紹介します。

＜htmlの記述例１－Ａ＞

＜htmlの記述例１－Ｂ＞

＜htmlの記述例１－Ｃ＞

＜htmlの説明１＞
Ａは文字、Ｂは画像、Ｃは表の場合の記述例で、いずれも方法は同じです。
対象部分のすぐ外側に任意のボックスを作ります。
上記の例では、いずれもstyle8というボックスを作っています。
後はstyle8のスタイルをcssファイルで指定するだけです。

＜追加説明＞
テーマ３ではallというボックスを作りました。
この時は id="all" となっていました。
今回はstyle8というボックスを作ります。
上記の例の通り class="style8" となっています。
ここで、idとclassの使い分けについて説明しておく必要があります。
idはページ中に１度しか登場できません。
classはページ中に何度でも登場できます。
ですから、大きなボックスはid、小さなボックスはclassを使う場合が多いです。
cssファイルの記述の仕方も少し異なります。
idは #all のように #***** と書きます。
classは .style8 のように .***** と書きます。

＜cssファイルの記述例１＞

＜cssファイルの説明１＞
text-align: center;
　この一行で対象部分が中央になる
　（これはテーマ３で出てきましたね）

表を中央にしたい場合は別の方法もありますので、紹介しておきます。

＜htmlの記述例２＞

＜htmlの説明２＞
tableタグにclassを指定しています。
この例ではlayout1というclassの指定です。
layout1のスタイルはcssファイルに書かれています。

＜cssファイルの記述例２＞

＜cssファイルの説明２＞
margin-right: auto;
margin-left: auto;
　この二行で対象部分が中央になる
　（これもテーマ３で出てきましたね）

以上のような方法で、特定の対象部分を中央にすることができます。