ページの中央に配置したいコンテンツを<div align="center">～</div>で囲みます。
ここでは全てのコンテンツを中央に配置するため、見出しの<h1>～</h1>から
コピーライトの<div>～</div>まで含むようにします
デザイン設定の場所として、「p{ }」を追加します
|
<html> <head> <title>色探しの旅</title> <style type="text/css"><!-- body{color:#666666} h1{font-size:25px; font-family:'Comic Sans MS';color:royalblue} span.iro{color:olive;font-weight:bold} span.sora{color:navy} p{width:360px;text-align:left} --></style> </head> <body> <div align="center"> <h1>色探しの旅『Sky&Water』</h1> <p>日本の四季には色が満ちています。<span class="sora">空</span> そして<span class="sora">水</span>の色<span class="iro">『色探しの旅』</span>に出かけませんか</p> <div>copyright(c)sora</div> </div> </body> </html> |
コンテンツを中央揃えにすると文章の各行まで中央揃えになりました。
【参考】
次に文章を行の左揃えにしてみます。
そこで、文章の各行を左側で揃えるため、
p{～}の中にtext-alignの設定を追加し、値を「left」と指定します
それが上のソースで、このようになります
コンテンツを<div align="～">～</div>で囲むことで配置位置を設定できます。
【参考】
※<div align="～">で指定できる値
| left | 左側に配置 |
| center | 中央に配置 |
| right | 右側に配置 |
text-alignを使うことで文章の各行揃えが出来ます。
【参考】
※text-alignで指定できる値
| left | 左揃え |
| center | センタリング（中央揃え） |
| right | 右揃え |
| justify | ジャスティファイ（両端揃え） |
Yここで一応このインデックスページを＜ファイル→上書き保存＞で閉じてください