スタイルシート(CSS) text-transform

文字(アルファベット)の表示に関するプロパティ。
指定した文字列全体を大文字や小文字、あるいは単語単位で先頭の文字だけを大文字で表示します。

text-transform: 値;

値には次のようなキーワードを指定します。
uppercase = 全ての文字列を大文字で表示。
lowercase = 全ての文字列を小文字で表示。
capitalize = 各単語の頭文字だけを大文字で表示。

■オリジナル例文:
「Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday」

■例1:
例文に「text-transform: uppercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例2:
例文に「text-transform: lowercase;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


■例3:
例文に「text-transform: capitalize;」を指定した場合。

Yesterday all my troubles seemed so far away
Now it looks as though they're here to stay
Oh I believe in yesterday


例のように指定範囲のアルファベットは変化しますが、日本語に指定しても何ら変わりはありません。

「text-transform: uppercase;」は、タイトルや題名に使うと便利なのでたまに使用します。

スタイルシート(CSS) text-indent

text-indentプロパティは、先頭行のテキストをインデントします。
ただし指定するテキストはブロックレベル要素に含まれている必要があります。

text-indent:値;

値にはpx、em等単位つきの数字で指定します。値にはマイナスも指定できます。

インデント指定なし

10pxインデント指定

-10pxインデント指定

5emインデント指定


text-indentは、インデントするだけではなく先頭に画像を表示するときなどに使うと便利なプロパティです。

ブロックレベル要素とインライン要素

HTMLで使われる要素は、大きくブロックレベル要素とインライン要素に分けられる。

ブロックレベル要素は、それ自体が「一つの塊(ブロック)」として扱われます。ブロックレベル要素の内容には、インライン要素はもちろんブロックレベル要素も含むことが出来ます。

しかし、段落(p)要素はインライン要素しか含むことが出来ないので注意が必要です。

また、ブロックレベル要素をインライン要素内に含むことは出来ません(置いてはいけない)。

ブロックレベル要素には、、見出し(h*)要素、段落(p)要素、リスト(ul,ol,dlなど)要素、hr要素、テーブル(table)要素、div要素などがあります。


インライン要素は、ブロックレベル要素の中で何かしらの機能を持ったもの、あるいは文字列などのことで、ブロックレベル要素の内容に含まれるべきものです。

インライン要素は、文字やその他のインライン要素を含むことが出来ますが、ブロックレベル要素を含むことは出来ません。ですからブロックレベル要素は、インライン要素の外に記序する必要があります。

インライン要素には、アンカー(a)要素、文字装飾(strong,em等)要素、img要素、br要素、span要素などがあります。

スタイルシート(CSS) vertical-align

vertical-alignプロパティは、インライン要素の縦方向の位置を指定します。

これは文字を含むインライン要素が、その行の中で縦方向のどの位置に表示するかを指定します。

vertical-align: 位置;

位置には次のような値が使用できます。
top: 指定したインライン要素の上部を行の上に合わせる。

middle: 指定したインライン要素の中心を行の中心に合わせる。

bottom: 指定したインライン要素の下部を行の下に合わせる。

baseline: 初期値(ベースラインに合わせる)

text-top: 指定したインライン要素の上部を行内のテキストの上に合わせる。

text-bottom: 指定したインライン要素の下部を行内のテキストの下に合わせる。

super: 指定したインライン要素のベースラインを行の上付き文字に合わせる。

sub: 指定したインライン要素のベースラインを行の下付き文字に合わせる。

単位付きの数値: 指定したインライン要素のベースライン(初期値)を0として+-の数値で指定する。

テーブル内で使用すると次のように表示されます。
vertical-align:top;vertical-align:middle;vertical-align:bottom;

スタイルシート(CSS) font プロパティ

fontプロパティは、フォント関係のスタイルをまとめて設定することが出来ます。

font: スタイル 太さ サイズ/行間 フォント名;

上記のようにfontプロパティの値には、「スタイル」「太さ」「サイズ」「行間」「フォント名」をまとめて指定することが出来ます。
それぞれ指定出来る値は、これまで説明したとおりです。
詳細は、それぞれのリンク先を参照して下さい。

注意が必要なのが、それぞれの値の間は半角スペースで区切ります。
しかし、サイズと行間の間だけは「/」で区切ります。

fontプロパティの値は省略することが出来ますが、サイズとフォント名は省略できません。

Recent Comments

Recent Trackbacks