MB-Support

パソコン初心者のサポートページ

文章の位置を変える <center>

 単純に文字を中央よせにしたい場合は center で囲み、文章を段落ごとに左、中央、右よせにしたい場合は p タグ何に align で指定します。


中央に配置したい文章を <center> 〜 </center> で囲みます。



HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<center>
 ワトソンへ <br /><br />
 「忙しくなければ来てくれ!」<br />
 「忙しくても来てくれ!」<br /><br />
 君の親友ホームズより
</center>
</body>
</html>

ブラウザ


文章を左右によせる

右にそろえたい文章を <div align="right"> 〜 </div> で囲みます。 上と同じ様に特定の範囲を中央に揃えたい場合は、<div align="center"> 〜 </div> で囲みます。左に揃える場合は、<div align="left"> 〜 </div> で囲みますが、ブロックレベルで指定する以外、初期状態と変わりません。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <div>
 ワトソンへ <br /><br />
 「忙しくなければ来てくれ!」<br />
 「忙しくても来てくれ!」
 </div>
 <div align="right">
  君の親友ホームズより
 </div>
</body>
</html>

ブラウザ


下は 1 つの段落として <p> で囲み、段落ごとに align で文章を揃えている例です。 構造的にもこの方法が一番分かりやすいと思います。

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
 <p align="left">
 ワトソンへ
 </p>
 <p align="center">
「忙しくなければ来てくれ!」<br />
「忙しくても来てくれ!」
 </p>
 <p align="right">
  君の親友ホームズより
 </p>
</body>
</html>

ブラウザ


文章の左右に空白を入れる

文章を <blockquote> 〜 </blockquote> で囲むと、左右に空白が入ります。

HTMLソース(メモ帳)

<p>ワトソンの日記</p>
<blockquote>
 やっぱり、ホームページ製作は、
市販のビルダーソフトを購入した方が便利。
製作するだけなら手書きでも可能ですが、
変更作業を含めたサイト管理を考慮すると、
手動での書き換えは、べージ数が増えると共に、
困難になります。
</blockquote>

ブラウザ




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項