CSSテキスト


CSS TextFormat

Text Format

このテキストは、テキスト整形プロパティ、text-transform プロパティ、および color プロパティの一部を使用してスタイル設定されます。 段落のインデント、整列、文字間のスペースを指定します。「試してみる」リンクから下線を削除します。

テキストの色

color 属性は、テキストの色を設定するために使用されます。

色は CSS 経由で指定されることがほとんどです。

  • 16 進値 - 「#FF0000」 など

  • RGB 値 - 「RGB(255,0,0)」

  • カラー名 - のような"red"

完全な色の値については、「CSS カラー値」を参照してください。

Web ページの背景色は、本文内の選択内容を参照します:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

インスタンスの実行»

オンラインの例を表示するには、[インスタンスの実行] ボタンをクリックしてください

1.gif W3C の場合標準 CSS: color プロパティを定義する場合は、background color プロパティも定義する必要があります。

テキスト配置

テキスト配置プロパティは、テキストの水平方向の配置を設定するために使用されます。

テキストを中央揃え、または左または右に揃え、両端を揃えることができます。

text-align が「justify」に設定されている場合、各行は同じ幅になるように拡張され、左右の余白が揃えられます。雑誌や新聞など）。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>

</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

テキスト装飾

text-decorationプロパティは、テキスト装飾を設定または削除するために使用されます。

デザインの観点から見ると、text-decoration 属性は主にリンクの下線を削除するために使用されます:

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a {text-decoration:none;}
</style>
</head>

<body>
<p>链接到: <a href="http://www.php.cn">php中文网</a></p>
</body>

</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックして、オンライン例

次の装飾テキストも実行できます:

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

</html>

インスタンスの実行»

オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

リンクではないテキストを強調表示することはユーザーを混乱させることが多いため、お勧めしません。

テキスト変換

テキスト変換プロパティは、テキスト内の大文字と小文字を指定するために使用されます。

すべての単語を大文字または小文字に変換したり、各単語の最初の文字を大文字にしたりするために使用できます。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>

<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>

例の実行 »

「例の実行」ボタンをクリックしてオンライン例を表示します

テキストインデント

テキストインデントプロパティは、テキストの最初の行のインデントを指定するために使用されます。文章。 Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p {text-indent:50px;}
</style>
</head>
<body>

<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>

</body>
</html>

runインスタンス»

オンラインインスタンスを表示する「インスタンスの実行」ボタンをクリックしてくださいインスタンス

文字間の空間を指定する

この例は、増加または減少する方法を示しています文字間のスペース。
例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
</html>


例の実行»

「例の実行」ボタンをクリックしてオンライン例を表示します

行間のスペースを指定する
この例は、段落内の行間のスペースを指定する方法を示します
例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>


例の実行»

オンライン例を表示するには、「例の実行」ボタンをクリックしてください

要素のテキスト方向を設定します
この例では、要素のテキスト方向を変更する方法を示します。
例

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
div.ex1 {direction:rtl;}
</style>
</head>
<body>

<div>一些文本。 默认书写方向</div>
<div class="ex1">一些文本。从右到左的书写方向。</div>

</body>
</html>


例の実行»

「例の実行」ボタンをクリックしてオンライン例を表示します

単語間の空白を増やす
この例は、段落内の単語間の空白を増やす方法を示しています空間。
例

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{ 
	word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is some text. This is some text.
</p>

</body>
</html>


例の実行 »

オンライン例を表示するには、「例の実行」ボタンをクリックしてください

要素内のテキストの折り返しを無効にする

この例では、要素内のテキストの折り返しを無効にする方法を示します。

例

<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style type="text/css">
p
{
	white-space:nowrap;
}
</style>
</head>
<body>

<p>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</p>

</body>
</html>

サンプルの実行 »

オンラインサンプルを表示するには、「サンプルの実行」ボタンをクリックしてください

画像の垂直方向の配置
この例では、テキストに垂直方向に配置された画像を設定する方法を示します。
インスタンス

rreee

サンプルの実行 »

[サンプルの実行] ボタンをクリックしてオンラインサンプルを表示します

テキストシャドウを追加する
このサンプルは、テキストシャドウを設定する方法を示します。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
</style>
</head>

<body>
<p>An <img src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a default alignment.</p> 
<p>An <img class="top" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-top alignment.</p> 
<p>An <img class="bottom" src="https://img.php.cn/upload/article/000/000/015/5c67d9134b166854.png" alt="php中文网" width="80" height="50" /> image with a text-bottom alignment.</p>
</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

すべての CSS テキスト プロパティ。

プロパティ説明
colorテキストの色を設定
directionテキストの方向を設定します。
letter-spacing文字間隔を設定する
line-heightline-heightを設定する
text-align要素内のテキストを整列させる
テキスト-decorationテキストに装飾を追加
text-indent要素内のテキストの最初の行をインデントします
text-shadowテキストの影を設定します
テキスト-変換要素内の文字を制御します
unicode-bidiテキストを書き換えるかどうかを設定または返します
vertical-align要素の垂直方向の配置を設定します
white-space要素内の空白の処理方法を設定する
word-spacing単語の間隔を設定する