HTML-LABS : CSS（スタイルシート）解説 - 大文字または小文字で表示させる方法 : text-transform

Home / テキストの指定 / 大文字または小文字で表示させる方法 : text-transform

大文字または小文字で表示させる方法 : text-transform

::: 書式 :::

text-transform: 大文字・小文字の表示方法

::: プロパティ値 :::

大文字・小文字の表示方法には、下記の値を指定します。

uppercase（すべての文字を大文字で表示）
lowercase（すべての文字を小文字で表示）
capitalize（各単語の先頭文字を大文字で表示）

::: 解説 :::

「text-transform」プロパティで、大文字または小文字の表示が設定できます。

日本語の部分は特に変化しません。

::: 対応ブラウザ :::

IE					Firefox					Opera					Chrome		Safari
8	7	6	5.5	5	3.5	3	2	1.5	1	10	9	8	7	6	2	1	4	3	2	1
○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○	○

[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]

::: サンプル :::　[ サンプル画面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>スタイルシート(CSS) = 大文字または小文字で表示させる方法 =</title>

<style type="text/css">
<!--
#id01{ text-transform: uppercase  }
#id02{ text-transform: lowercase  }
#id03{ text-transform: capitalize }
-->
</style>

</head>
<body>
    スタイルシート(CSS) = 大文字または小文字で表示させる方法 =
    <p id="id01">ABCD abcd =「text-transform: uppercase」で指定</p>
    <p id="id02">ABCD abcd =「text-transform: lowercase」で指定</p>
    <p id="id03">ABCD abcd =「text-transform: capitalize」で指定</p>
</body>
</html>


	関連項目

	CSSの基本 CSS機能別プロパティ一覧 CSSインデックステキストの指定 line-height text-align vertical-align letter-spacing word-spacing text-indent white-space text-transform

　

Copyright (C) 2009 Html-Labs All Rights Reserved.