パソコン

text-alignは文字を揃えるCSSプロパティです

テキストの水平方向に配置を指定するプロパティで、文字を右や中央に揃えたりするなど文字の位置を指定します。

文字を揃える属性には「left」「right」「center」「justify」などがあります、それらについて説明して行きます。

説明しやすいようにモデルを作っておきます、<div>にクラス名を付けて<p>段落にそれぞれ文字を入力しておきます。

text-align: left; (左揃え)

class名(yyy)に対してはtext-alignを指定していませんが、テキストは左に寄せられます。

普通左から右へ書いていく記事については指定しなくても文字は左揃えになっていきます。

text-align: right; (右揃え)

class名(iii)に対してはtext-align: reghtを指定しています、するとテキストは右揃えになります。

text-align: center; (中央揃え)

centerはテキストを中央に揃えます、このようにhtml<div>にclass名を記述したものに

CSSでtext-alignを「center」に指定します

このように文字が中央揃えになります。

text-align: justify; 両端揃え

justify インラインコンテンツは両端揃えに、テキストは最終行を除いて、その左右の端が行ボックスの左右の端に揃うように語間が開けられる。

このようにブロック幅いっぱいに広がっています。

justify-all

justifyには「justify-all」というものもあります、これは最終行も強制的に両端を揃えるようになるとありますが、Windowsの場合には上手く表示されず下のようになりました。

ブラウザやエディタでも多少の違いがあると思いますが色々試しながらやって下さい。

textの付く他のプロパティ

textの付くほかのプロパティには

  • text-shadow 影をつける方法を指定
  • text-overflow 収まらない文章の表示方法を指定
  • text-transform 大文字・小文字・全角文字への変換を指定
  • text-rendering テキストを描画する時の最適化方法をレンダリングエンジンに提供
  • text-decoration 線の装飾、複数を一括設定
  • text-decoration-color 線の装飾、色の設定
  • text-decoration-style 線の装飾、形の設定
  • text-decoration-line 線の装飾、設置する場所の指定
  • text-decoration-skip 装飾でどこをスキップするかを指定

等沢山のものがあります、これからも分かり易い記事を作っていきますのでご期待ください。

text-alignを使って文字を装飾しましょう

テキストの水平方向に配置を指定するプロパティで、文字を右や中央に揃えたりしてくれますので記事の中で見やすいように使ていきましょう。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事