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

CSSのtext-alignプロパティでテキストの配置を設定する方法

text-alignプロパティとは

CSSのtext-alignプロパティを使用すると、要素内のテキストを水平方向に配置できます。指定できる値は以下の4種類です。

  • left … 左揃え
  • right … 右揃え
  • justify … 両端揃え
  • center … 中央揃え

構文

CSS text-alignプロパティの構文は次のとおりです。

Selector {
    text-align: /*値*/
}

使用例1：div要素とp要素への適用

以下の例では、CSS text-alignプロパティの基本的な使い方を示しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: auto;
    padding: 8px;
    max-width: 200px;
    border: thin solid;
}
p {
    text-align: right;
}
div:nth-child(3) {
    text-align: center;
}
div:last-child {
    text-align: justify;
}
</style>
</head>
<body>
<h2>Student Examination Details</h2>
<div>
<div>Student John</div>
<div>
Student Tom
<p>Did not appeared for the exams.</p>
</div>
<div>Student Brad</div>
<div>Did not appeared for only the last exam.</div>
</div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのtext-alignプロパティでテキストの配置を設定する方法

この例では、<p>要素が右揃え、3番目の子要素となる<div>が中央揃え、最後の<div>が両端揃えになっていることが確認できます。

使用例2：tableセルへの適用

続いて、表のセルに対してtext-alignプロパティを適用する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
td {
    padding: 10px;
    box-shadow: inset 0 0 21px yellow;
}
td:first-of-type {
    text-align: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<table>
<tr>
<td>This is it!</td>
</tr>
<tr>
<td>Well, this is a demo text!</td>
</tr>
</table>
</body>
</html>

出力結果

上記のコードを実行すると、次のような表示になります。

CSSのtext-alignプロパティでテキストの配置を設定する方法

この例では、:first-of-type疑似クラスによって最初の<td>要素のみが右揃えになっています。このように、セレクタと組み合わせることで、特定の要素だけにテキスト配置を柔軟に指定できます。

  1. CSSのhyphensプロパティでテキストにハイフンを追加する方法

    CSSのhyphensプロパティを使用すると、テキスト内にハイフン（連字符）をどのように挿入するかを細かく制御できます。長い単語やURLなどがコンテナからはみ出すのを防ぎ、読みやすい行折り返しを実現したい場合に便利なプロパティです。 hyphensプロパティの主な値 none：ハイフンによる改行を一切行いません。&shy;などの手動指定も無効になります。 manual：&shy;（ソフトハイフン）など、HTML内で明示的に指定された位置でのみハイフンを挿入します（初期値）。 auto：ブラウザが各言語の規則に基づいて自動的にハイフンを挿入します。lang属性の指定が推奨されま

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ