【33】テキストの整列や両端揃えを指定する text-alignプロパティ

最終更新日:2018年06月09日  (初回投稿日:2018年06月09日)

今回から「テキスト」に関する CSSプロパティを見ていきましょう。

「フォント」のためのプロパティは、フォント(書体)やそのグリフ(字形)どう選ぶかを指定ます。
「テキスト」のためのプロパティは、テキスト(文字)の表示の仕方を指定します。
具体的には、文字の左揃え・センター揃えなどや、改行の仕方、字下げ(インデント)などです。

まず今回は、text-alignプロパティから。
これは、テキストの横方向の整列の仕方を指定します。

この text-align、CSS 2 からちょっと仕様が変わって、CSS 3(CSS Text Module Level 3)からは「text-align-allプロパティ」と「text-align-lastプロパティ」ショートハンドになったんだって。

ですが、他のショートハンドと違って、指定できる値は1個だけなので、CSS 2 の時とほぼ同じような感覚で使えます。

CSS 2 からの違いは、text-align-lastプロパティが併用できるようになったこと。これは最終行を指定するプロパティです。

最終行とは、ボックス内のテキストの最後の行や、<br>要素などで強制的に改行される直前の行

まず全体の行揃えを text-alignショートハンドで指定して、最後の行だけ揃え方を変えたかったら text-align-last も使うってかんじです。

本日のINDEX
  1. text-alignプロパティの値
    1. text-align-allプロパティの値
    2. text-align-lastプロパティの値
  2. text-alignプロパティの指定サンプル
  3. text-align: justifyでの配置を決める text-justify

参考:
CSS Text Module Level 3 | W3C Working Draft
text-align - CSS | MDN

text-alignプロパティの値

text-alignプロパティの値は、「text-align-allプロパティ」と「text-align-lastプロパティ」の値で、これらはキーワードだけです。その中の「1つだけ」指定します。

text-alignプロパティの値
キーワード start がデフォルト値。
end、left、right、center、justify、justify-all、match-parent
グローバル値 text-align: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-align: initial; 継承した親の値を解消しデフォルト値に戻す
text-align: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 ブロックコンテナ内のテキスト・インライン要素

それぞれのキーワードは、以下の意味があります。

start
各行は、書字方向の「始点」のある辺に整列。
例えば、英語や日本語(横書き)だったら、左から右に文字が流れるので「左揃え」に。アラビア語だったら右から左なので「右揃え」になります。
end
各行は、書字方向の「終点」のある辺に整列。
left
「左揃え」に
right
「右揃え」に
center
「センター揃え」に
justify
「両端揃え」に。
ただし最終行は「text-align-last」で auto以外の値を指定されない限り「start」と同じになる。
justify-all
「両端揃え」で最終行も「両端揃え」(いわゆる「完箱(完全箱組)」ってやつ)
この値だけは、text-align-allプロパティと text-align-lastプロパティには無い、ショートハンドだけで使える値です。
で、対応しているブラウザは今のところ無いみたい。勧告時に無くなるかもです。(2018年6月記)
match-parent
inherit に似ていますが、 「start」「end」が継承された場合、親要素の directionプロパティの値から計算され「left」か「right」に置き換えられるんだそうです。

directionプロパティは、テキストの書字方向を指定します。アラビア語などのように右から左へ書かれる言語などで使います。詳細は後日)

text-align-allプロパティの値

W3C 仕様書ではtext-align-allプロパティの代わりに text-alignプロパティを利用するべきである(Authors should use the text-align shorthand instead of this property. )とあり、このプロパティを単独で使うことは無さそうです。

text-align-allプロパティは、最終行以外の行の整列を指定します。

text-align-allプロパティの値
キーワード start がデフォルト値。
end、left、right、center、justify、match-parent
(キーワードの意味は、上の text-alignプロパティに記載。)
グローバル値 text-align-all: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-align-all: initial; 継承した親の値を解消しデフォルト値に戻す
text-align-all: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 ブロックコンテナ内のテキスト・インライン要素

text-align-lastプロパティの値

text-align-lastプロパティは、テキストの最終行の整列を決めます。
最終行とは、ボックス内のテキストの最後の行
または <br>要素などで強制的に改行される直前の行のこと。

text-alignプロパティの指定後に、この text-align-lastプロパティも指定して、最終行のみ整列を変えることができます。

text-align-lastプロパティの値
キーワード auto がデフォルト値。最終行は text-align に従って整列します。
start、end、left、right、center、justify
(キーワードの意味は、上の text-alignプロパティに記載。)
グローバル値 text-align-last: inherit; 親の値を継承(コレ書かなくても継承するけど)
text-align-last: initial; 継承した親の値を解消しデフォルト値に戻す
text-align-last: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 あり 適用できる要素 ブロックコンテナ内のテキスト・インライン要素

text-alignプロパティの指定サンプル

では text-alignプロパティの全部の値を使ってみます。

text-align: start(text-align が未指定の場合コレになります) This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: end This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: left This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: right This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: center This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify-all This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: justify; text-align-last: justify This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

text-align: match-parent This shorthand property describes how the inline-level content of a block is aligned along the inline axis if the content does not completely fill the line box. このショートハンドプロパティは、ブロック内のコンテンツが 行ボックスを完全に埋めない場合に、行内の軸方向に整列される方法を指定します。

上の見本のソースコードはこんなかんじで作っています。

<div class="mihon">
  <p style="text-align:start">(テキスト省略)</p>
  <p style="text-align:end">(テキスト省略)</p>
  <p style="text-align:left">(テキスト省略)</p>
  <p style="text-align:right">(テキスト省略)</p>
  <p style="text-align:center">(テキスト省略)</p>
  <p style="text-align:justify">(テキスト省略)</p>
  <p style="text-align:justify-all">(テキスト省略)</p>
  <p style="text-align:justify; text-align-last:justify">(テキスト省略)</p>
  <p style="text-align:match-parent">(テキスト省略)</p>
</div>

text-align: justifyでの配置を決める text-justify

text-align: justify(両端揃え)を指定した時の、テキストの配置の仕方を決めるために text-justifyプロパティがあります。
単語間を空けるのか、1文字ずつの間隔を空けるのかを決めます。

このプロパティは、CSS 2 で IEのみが独自採用していましたが、今は Chrome, Firefox も対応しているようです。
ですが、W3Cの仕様書(草案)では「リスクがあり 勧告候補の期間中に削除される可能性がある(The following features are at-risk, and may be dropped during the CR period:)となっています。(2018年6月記)

text-justifyプロパティの値
キーワード auto がデフォルト値。ブラウザにおまかせ。
(英語などなら単語間を空け、日本語などなら文字間を空けます)
none:両端揃えをしません
inter-word:単語間を空けます
inter-character:文字間を空けます
(IE, Edge では、今は非推奨の値「distribute」も使えちゃいますが、割愛します)
値の継承 あり 適用できる要素 行内のテキスト・インライン要素

全部の値を試してみます。(文字が小さいと効果がわかりにくいので大きくしています)

text-justify: auto This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: none This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: inter-word This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

text-justify: inter-character This property selects the justification method used when a line’s alignment is set to justify. このプロパティは、行の整列が justify に設定されているときに、利用する両端揃えメソッドを指定する。

どうでしょう。auto以外使う機会はなさそうな気がする。勧告時に残るかなあ。

次回予告

次回は、overflow-wrapプロパティを使おう。
これは、CSS 2 では word-wrapプロパティと呼ばれていたもの。同じ機能ですが両方とも使えることになりました。
長い単語がオーバーフローしそうな時に、単語の途中で途中で切る(改行する)かどうかを決めるプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2018/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.