左寄せ、中央、右寄せを指定する--人気ホームページが作れる簡単作成講座

トップページ　＞　初心者講座　＞　

左寄せ、中央、右寄せを指定する

５－７　左寄せ、中央、右寄せを指定する

文章というのは、横書きの場合は左揃えにすることが基本です。

そのためWebページの文章は自動的に左揃えに表示されるのですが、本分以外のテキストやデザイン的なことを考えた時に中央揃えや右揃えにする方が良い時もあります。

文章の配置を指定する

text-align : center

中央や右側へ文章を寄せたい場合は、スタイルシートのtext-alignを使います。

text-align: left

左寄せ

text-align: center

中央

text-align: right

右寄せ

ホームページソース

XHTML

<div id="a-box">

<h1>h1 サイトタイトル</h1>
ホームページの説明文 <br />
テキスト　テキスト　テキスト　テキスト　テキスト　テキスト

</div>

<div id="b-box">

<h2>h2 ページタイトル</h2>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

<h3>h3 見出し</h3>
<p>テキスト　（省略）</p>

</div>

<div id="c-box">

<div class="category">カテゴリー１</div>
<ul>
<li>ページ１</li>
<li>ページ２</li>
<li>ページ３</li>
</ul>

<div class="category">カテゴリー２</div>
<ul>
<li>ページ４</li>
<li>ページ５</li>
<li>ページ６</li>
</ul>

</div>

<div id="d-box">

copyright (c) oooo.com All right reserved.

</div>

</div>

</body>

</html>

CSS（スタイルシート）

* {
          padding : 0px ;
          margin : 0px ;
}

#site-box {
          width : 750px;
          border: 1px solid #FF9900;
}

#a-box {
          border-bottom: 1px solid #FF9900;
          background-image: url('img/header.gif');
          padding: 20px;
}

#b-box {
float: left;
width: 500px;
}

#c-box {
          float: right;
          width: 250px;
          font-size: 12px;
}

#d-box {
          clear: both;
          width: 750px;
          background-color: #FFFF99;
          font-size: 12px;
          padding: 10px;
          text-align: center;
}

h1 {
          font-size: 22px;
}

h2 {
          font-size: 17px;
          background-color: #FFFF99;
          padding: 10px;
          margin: 5px;
}

h3 {
          font-size: 15px;
          color:#FF9900;
          margin: 5px;
}

p {
          font-size: 14px;
          margin: 30px;
}

ul {
          padding : 10px 5px 10px 30px;
}

.category {
          font-size: 14px;
          color: #FFFFFF;
          background-color: #FF9900;
          padding: 5px;
          margin: 5px;
}

＜＜前のページ　　次のページ＞＞

このページをブックマークする→　