CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでテキストの配置（アラインメント）を設定する方法

HTMLドキュメント内のテキストは、CSSを使って自由に配置できます。水平方向の配置には text-align プロパティを使用し、垂直方向の配置には padding-top・padding-bottom、または line-height プロパティを活用します。

基本構文

上記のCSSプロパティの基本的な書き方は以下のとおりです。

Selector {
    text-align: center | left | right | justify | inherit | initial;
}
Selector {
    padding: /*値*/;
}
Selector {
    line-height: /*値*/;
}

それでは、実際のコード例を見ていきましょう。まずは水平方向の配置からです。

例：水平方向のテキスト配置

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span{
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
    width: 120px;
    display: inline-block;
    background-color: #48C9B0;
}
.left{
    text-align: left;
}
.right{
    text-align: right;
}
.center{
    text-align: center;
}
.seats{
    text-align: center;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="left">Adam</span>
<span class="center">Martha</span>
<span class="right">Samantha</span>
</div>
</body>
</html>

表示結果

CSSでテキストの配置（アラインメント）を設定する方法

この例では、text-align に left・center・right を指定することで、各要素内のテキストがそれぞれ左寄せ・中央寄せ・右寄せになっていることが確認できます。

続いて、垂直方向の配置の例を見てみましょう。

例：垂直方向のテキスト配置

<!DOCTYPE html>
<html>
<head>
<title>CSS Text Alignment</title>
<style>
.screen {
    padding: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #f06d06;
    text-align: center;
    color: white;
    border-radius: 0 0 50px 50px;
    border: 4px solid #000;
}
.seats span:not(.withPadding){
    margin: 10px;
    padding: 10px;
    color: white;
    border: 4px solid #000;
}
.seats span:not(.vertical){
    height: 40px;
    display: inline-block;
    background-color: #48C9B0;
}
.withPadding{
    padding: 20px 20px 0px;
    height: 20px;
    color: white;
    border: 4px solid #000;
}
.vertical{
    display: inline-table;
    background-color: #48C9B0;
    height: 40px;
}
.verticalText {
    display: table-cell;
    vertical-align: middle;
}
.withLineHeight{
    line-height: 40px;
}
.seats{
    text-align: center;
}
</style></head>
<body>
<div class="screen">Screen</div>
<div class="seats">
<span class="withPadding">Adam</span>
<span class="withLineHeight">Martha</span>
<span class="vertical"><p class="verticalText">Samantha</p></span>
</body>
</html>

表示結果

CSSでテキストの配置（アラインメント）を設定する方法

この例では、3つの異なる手法で垂直方向の中央揃えを実現しています。

  • padding を使う方法：上下に適切なパディングを設定してテキスト位置を調整します。
  • line-height を使う方法：line-height を要素の高さと同じ値にすると、1行のテキストが垂直方向の中央に揃います。
  • display: table-cell を使う方法：vertical-align: middle と組み合わせることで、要素内のコンテンツを中央に配置できます。

状況に応じてこれらの方法を使い分けることで、柔軟かつ美しいテキストレイアウトを実現できます。

  1. CSSを使ったクロスブラウザ対応の不透明度（opacity）設定方法

    Webページで要素や画像を半透明にしたい場合、opacity プロパティが現代の標準的な解決策です。このプロパティは、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。 しかし、古いブラウザにも対応させるには、以下のレガシーなプロパティを組み合わせる必要があります。 -moz-opacity：Firefox 0.9より前のバージョン向けの不透明度プロパティ -khtml-opacity：Safari バージョン1以降向けの不透明度プロパティ filter: alpha(opacit

  2. CSSで角度を指定して線形グラデーションの方向を自在に設定する方法

    CSSのlinear-gradient()関数では、キーワード（to rightなど）だけでなく角度を指定することで、グラデーションの方向をより細かく制御できます。基本構文background-image: linear-gradient(角度, カラー1, カラー2);角度はdeg（度数法）で指定します。主な角度と方向の対応は以下の通りです。0deg：下から上へ（to topと同じ）90deg：左から右へ（to rightと同じ）180deg：上から下へ（to bottomと同じ・初期値）-90deg：右から左へ（to leftと同じ）サンプルコード以下は、CSSで角度を使って線形グラデーシ