CSS レイアウト – 水平方向と垂直方向の配置
CSSマニュアル水平方向と垂直方向の配置
テキストの水平方向の配置
テキストの水平方向の配置は、text-alignプロパティを使用して調整できます。値にはleft、right、center、justifyがあります。
サンプルコード
<style>
p.left {
text-align: left;
}
p.center {
text-align: center;
}
p.right {
text-align: right;
}
p.justify {
text-align: justify;
}
</style>
<p class="left">左揃えのテキストです。</p>
<p class="center">中央揃えのテキストです。</p>
<p class="right">右揃えのテキストです。</p>
<p class="justify">両端揃えのテキストです。</p>
表示例
左揃えのテキストです。
中央揃えのテキストです。
右揃えのテキストです。
両端揃えのテキストです。
ブロック要素の水平方向の配置
ブロック要素の水平方向の配置は、marginプロパティを使用して調整できます。auto値を左右のマージンに適用すると、要素が中央に配置されます。
サンプルコード
<style>
div.center {
margin-left: auto;
margin-right: auto;
width: 50%;
background-color: lightblue;
}
</style>
<div class="center">中央揃えのブロック要素です。</div>表示例
floatを使用した水平方向の配置
floatプロパティは、要素を左または右に寄せ、周囲の要素が回り込むように配置するために使用されます。
floatプロパティは主に画像やブロック要素の配置に利用されます。
以下に、floatを使用した簡単な例を示します。
サンプルコード
<style>
.float-left {
float: left;
background-color: orange;
padding: 20px;
font-size: 24px;
margin-right: 20px;
}
.float-right {
float: right;
background-color: lightblue;
padding: 20px;
font-size: 24px;
margin-left: 20px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="float-left">左に寄せられた要素です。</div>
<div class="float-right">右に寄せられた要素です。</div>
<div class="clearfix"></div>表示例
この例では、float: left;を使って要素を左に寄せ、float: right;を使って要素を右に寄せています。また、clearfixクラスを使ってfloat要素の後のコンテンツが回り込まないようにしています。
floatを使用することで、要素を簡単に左右に寄せることができますが、近年ではフレックスボックスやグリッドレイアウトを利用することが一般的になってきています（CSS3のところで詳しく書く予定）。それでも、floatは特定の状況下で便利な配置手法として引き続き利用されています。
フレックスボックスによる垂直方向と水平方向の配置（今読まなくてもいい）
フレックスボックス（Flexbox）は、要素を簡単に垂直方向と水平方向に配置するためのモダンな方法です。（flexについては後ほど詳しく説明します。）
以下に、フレックスボックスを使用した簡単な例を示します。
サンプルコード
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: lightblue;
}
.item {
background-color: orange;
padding: 20px;
font-size: 24px;
}
</style>
<div class="container">
<div class="item">フレックスボックスで中央揃えされた要素です。</div>
</div>
表示例
この例では、コンテナ要素にdisplay: flex;を設定することで、フレックスボックスが有効になります。
次に、justify-contentとalign-itemsプロパティを使って、要素を水平方向および垂直方向に中央揃えに配置しています。
コメント