テキスト(CSS)


テキストの整列

text-align

 text-alignはテキストの中寄せ、右寄せなどを行うとき使用します。

<p style="text-align: center;">中寄せするときは"center"を指定します。</p>

中寄せするときは"center"を指定します。


 text-align属性は以下の値を取ります。

意味
auto自動(leftと同じ)
left左寄せ
right右寄せ
center中寄せ
justifytext-justifyの設定に従う。
start領域の先頭に揃える。
initial初期値(leftと同じ)
inherit親要素から継承する。

text-align-last

 ブロック内の最終行を右寄せするときなどに使用するそうですが、現在は実験的なものだそうです。(MDNによる)


text-indent

 text-indentは「字下げ」を設定します。1行だけならpadding-leftやmargin-leftでも見た目が同じようなことは可能ですが、複数行のときは違いが出ます。このような場合、text-indentは最初の行だけ字下げになります。下の例ではtext-indentで30px分の字下げを行っています。

<p style="text-indent: 30px; width: 800px; font-size: smaller;">
Donetsk, Ukraine (CNN) -- More artillery fire and shelling. More deaths. More disputes surrounding Russian convoys
-- filled with aid, according to Moscow, though they were never checked by Ukrainian or International Red Cross officials
-- that jetted in and out of eastern Ukraine. </p>

Donetsk, Ukraine (CNN) -- More artillery fire and shelling. More deaths. More disputes surrounding Russian convoys -- filled with aid, according to Moscow, though they were never checked by Ukrainian or International Red Cross officials -- that jetted in and out of eastern Ukraine.


text-justify

 text-justify属性はtext-align:justifyと一緒に使用されます。テキストの均等割り付け方法を指定するのに使いますが、IEしか対応していないようです。また、日本語の文書では一部を除いてほとんど関係ないです。

#p1 {
  text-align: justify;
  text-justify: inter-word;
  width: 500px;
  font-size: smaller;
}

In an interview with TV Tsentr, Russian Foreign Minister Sergey Lavrov said the truce agreed upon in Minsk, Belarus, appeared to be holding generally and that Moscow, at least, is ready to work toward a long-term peace.

 下の表にtext-justifyの値の一覧を示します。

意味
autoブラウザが自動的に均等割り付けを行う。
inter-wordワード間の空白の幅を変化させる。
inter-ideograph単語間隔と文字間隔の両方を調整する。日本語向き。
inter-cluster単語間隔を持たない言語(日本語など)の均等割り付け。
distribute単語間隔と文字間隔を調整。
kashidaアラビア語向け。
trim
none均等割り付けをしない。
initial初期値にする(auto)。
inherit親からの継承値

 

text-overflow

 この属性は、領域からテキストがはみ出したときどうするかの指定です。デフォルトだと、テキストが折り返されてtext-overflowの効果がわからないので、white-space: nowrapの設定とoverflow: hiddenの設定を同時に行います。

#div1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  border: thin black solid;
  padding: 3px;
  width: 500px;
  font-size: smaller;
}

#div2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: thin black solid;
  padding: 3px;
  width: 500px;
  font-size: smaller;
}
Explosions and gunfire reverberated through the area around the city's airport, according to CNN crews on scene.
Explosions and gunfire reverberated through the area around the city's airport, according to CNN crews on scene.

 下の表にtext-overflowの値の一覧を示します。

意味
clip端まで来たら打ち切る(デフォルト)。
ellipsis端の近くに来たら ... を表示する。
文字列端の近くに来たら指定した文字列を表示する。
initial初期値にする(clip)。
inherit親からの継承値

white-space

 次の表はtext-overflowとともに使用するwhite-spaceの設定値の一覧です。white-space属性は、半角スペース・タブ・改行の表示方法を指定します。

意味
normal連続する半角スペース・タブ・改行を、1つの半角スペースとして表示する。
領域の大きさが指定されているときは、大きさに応じて改行される。(デフォルト)
nowrapnormalと同じですが、自動的な改行は行わない。
preソース中の連続する半角スペース・タブ・改行をそのまま表示する。
pre-linenormalと同じだが、必要に応じて改行される。
pre-wrappreと同じだが、ワードラップされる。
initial初期値にする。
inherit親からの継承値

overflow

 次の表はtext-overflowとともに使用するoverflowの設定値の一覧です。

意味
visible領域を超えても打ち切らないでそのまま表示する(デフォルト)。
hidden領域を超えたら打ち切る。
scroll領域を超えたらスクロールバーを表示する。
auto必要に応じてスクロールバーを表示する。
initial初期値にする。
inherit親からの継承値

resize

 resize属性を使うと、ユーザが文字列の表示領域を直接、調整できます。

#div3 {
  border: medium solid gray;
  padding: 5px;
  width: 10cm;
  5cm;
  resize: both;
  overflow: auto;
}
resize属性を使うと、ユーザが文字列の表示領域を直接、調整できます。この矩形右下の三角の領域をドラッグしてみてください。

 次の表はresizeに指定可能な値です。

意味
noneリサイズ不可。(デフォルト)
both上下左右にリサイズ可能。
horizontal横方向のみリサイズ可能。
verticalたて方向のみリサイズ可能。
initial初期値(リサイズ不可)
inherit親の設定を継承する

行間隔

 行の間隔はline-height属性で指定できます。

<p style="line-height:10px;">
line-height:10px;<br />
line-height:10px;<br />
line-height:10px;<br />
</p>

line-height:10px;
line-height:10px;
line-height:10px;


<p style="line-height:150%;">
line-height:150%;<br />
line-height:150%x;<br />
line-height:150%;<br />
</p>

line-height:150%;
line-height:150%x;
line-height:150%;

line-height属性は下の値を取ることができます。

意味
倍率フォントサイズの何倍にするかの値 (例) 1.2
高さ行の高さの具体的な数値を指定する。
フォントサイズの何%にするかを指定する。行間隔をあけるときは100%以上にする。
initial初期値(normalと同じ)
inherit親の設定を継承する

テキストの飾り

text-decoration

 text-decoration属性はテキストに下線、上線、取り消し線を表示します。

<p>
<span style="text-decoration: underline;">underline</span>, 
<span style="text-decoration: overline;">overline</span>,
<span style="text-decoration:line-through">line-through</span> </p>

underline, overline, line-through

 text-decoration属性の値一覧を下の表に示します。

意味
none飾りなし
underline下線を表示
overline上線を表示
line-through取り消し線を表示
initial初期値にする。
inherit親からの継承値

text-decoration-color

 text-decoration-colorは下線などの色を設定します。現在のところ、Firefoxだけでサポートされているようです。


text-decoration-line

 text-decoration-lineは文字飾りの線の種類を設定します。現在のところ、Firefoxだけでサポートされているようです。


text-decoration-style

 text-decoration-styleは文字飾りの線のスタイル(二重線など)を設定します。現在のところ、Firefoxだけでサポートされているようです。


影付きテキスト

 text-shadow属性を使うとテキストに影を付けることができます。パラメータは下のように設定します。

text-shadow: 横方向 縦方向 ぼかし 影の色;
<p style="text-shadow: 10px 10px 2px gray; font-size: 32pt;">text-shadow</p>

text-shadow


縁取りテキスト

 text-shadow属性を応用すると文字の周りを縁取ることができます。それには影を文字の周りに上下左右4つ付ける必要があります。それぞれの影はカンマで区切ります。

<style>
.bordered {
  color: #c0c0ff;
  font-size: 50px;
  font-weight: bold;
  text-shadow: 2px 2px 1px black,
  -2px 2px 1px black,
  2px -2px 1px black,
  -2px -2px 1px black;
}
<p class="bordered">BORDERD</p>
</style>

BORDERD

 

このページの先頭へ戻る