ホームページの基本・スタイルシートを覚えよう♪

3日で作るホームページ・初心者からだれでもわかるホームページの作り方
3日で作るホームページ

-質問掲示板♪ - 

申し訳ございませんが、一時ご質問の受付を中止いたします。ご迷惑をおかけし申し訳ございません。

質問

文字を程よく真ん中に表示させたい

質問者:なななん7 投稿日時:2009-12-10 08:56:45

3日で作る〜をほぼそのままに使用して作っています。
3日目の1時間目の冒頭でくじけています。

ページを増やしているのですが、2ページ目からは画像ナシの文字のみの表示を希望しているのですが、行ごとの文字数が違うので、センタリングでは左右がバラバラ、左寄せではがっつり左寄せになってしまいます。
body部分というのでしょうか? そこで体よく納まるセンタリングはどうやったら指定できるのでしょうか?
マージン指定もやってみましたが、イマイチで・・・
タグを入れる場所が違っているのでしょう(涙)


        ○月の開催日程

      ○月○日  ▲▲公民館
      ○月×日  □□コミュニティセンター

 ↑ こんな感じのセンタリングにしたいのですが・・・
   (左端を、中心に寄せたセンタリングというのでしょうか?)

質問を入力する欄の幅と、表示の幅が倍近く違うので、伝わりにくと思いますが、ご理解いただけると助かります。

返信は全 1 件投稿されています。

返信

文字のレイアウトについて

No.1
投稿者:  投稿日時:2009-12-14 02:33:15

こんばんわ
なななん7さん

管理人です。
ご質問の件ですが、
率直に言いますと、htmlでは残念ながらセンタリングをした上で左寄せとというのは基本的にできません・・・。

正直私もそういう指定ができればいいなと思ったことがあります^^;

ただ、やれないこともありません。
いくつか方法はあります。

1、tableタグを使う。
tableタグは本来レイアウト目的での使用は推奨されていませんが、時と場合によっては使うこともOKだと個人的には考えています。
特に何かの一覧などを表示する場合にはかなり有効的です。
tableタグはエクセルなどのセルを思い浮かべると理解が早いかと思います。
その昔(といっても最近まで)ホームページ全体のレイアウトにtableタグを使ったものが主流でした。

ご質問のように何かの一覧であれば、tableを使うのが手っ取り早いかもしれません。

記述例)

<table class="event" border="1">
<tr>
<td colspan="2">○月の開催日程
</td>
</tr>
<tr>
<td>○月○日</td>
<td>▲▲公民館<br /></td>
</tr>
<tr>
<td>○月&times;日</td>
<td>□□コミュニティセンター</td>
</tr>
</table>

これでclass名eventに対してmargin-left:30pxぐらいを追加してやればとりあえずは似たような表示が可能だと思います。

スタイルシート記述例

.event{
margin-left:30px;
}
.event td{
padding:5px;
}


2、段落(pタグなど)ごとにクラスを割り当ててpaddingなどで調整する。

これは正直面倒かと思います・・・。

以上のようにtableタグを使うのが一番手っ取り早いと思います。
というか私だったらそうします^^
ていうか、そうしてます(笑

htmlは文字の整列についてはあまり細かい設定はできません。
(強引にやることもできますが、手間がかかります)
ですので、基本的にはデフォルトの左寄せが一番良いのかと思います。
実際実務上では文章に対してtext-align:centerはまず使いません。センタリングしても見にくくなるだけのような気がします。

回答になっておりますでしょうか?
疑問点がありましたらお気軽にご質問ください!
それでは〜♪

掲示板一覧へ

※この質問掲示板は管理人が勉強もかねてPHP+MySQLで制作したものです。
動作チェックは行っておりますが、 不具合等がございましたらご報告いただけるとありがたいです^^;
不具合報告⇒

 

Copyright(C)2007 3日で作るホームページ all rights reserved.