Webタイポグラフィを制御するCSSプロパティ

キーテイクアウト

• CSSプロパティは、Webメディアのユニークな側面に対応しながら、印刷のタイポグラフィの豊かな伝統を反映して、Webタイポグラフィの正確な操作を可能にします。
CSSの「テキスト変換」プロパティは、「Capitainize」、「大文字」、「Lowercase」、「Full-Width」などのオプションを提供する文字ケースの操作を可能にします。それぞれが異なる設計ニーズを提供します。 > HTMLドキュメントのホワイトスペース管理は、「通常」、「pre」、「pre-rap」、「pre-line」、および `nowrap`などの値で「ホワイトスペース」プロパティを介して制御できます。さまざまなフォーマットシナリオ。
単語内でラインの破損を制御するために、CSSは、ハイフネーションコントロール用の「ハイフン」プロパティとともに、「通常」および「ブレークワード」オプションを備えた「ワードラップ」または「オーバーフローラップ」プロパティを提供します。
• CSSは、「単語間隔」と「文字間隔」のプロパティを提供して、単語と文字の間のスペースを調整し、読みやすさとテキストの審美的な魅力を向上させます。
高度なテキストのアライメントとインデントは、「Text-Align」、「Text-Align-Last」、「Text-Indent」などのプロパティを介して処理され、デザイナーにテキストのプレゼンテーションを細かく制御できます。
Webタイポグラフィには、何世紀も前の印刷タイポグラフィの伝統に属する豊富な知識に基づいているという利点があります。同様に、その伝統には、Webタイポグラフィが生きるために求められるベストプラクティスと卓越性の基準があります。
• しかし、コミュニケーションの媒体としてのWebには、独自の特性が付いています。そのため、印刷からWebタイポグラフィへのシームレスな動きは大変な呼びかけだと思う​​ようになりました。 Web Typographyの彼の本、p.110で、Jason Santa Mariaが説明します：
印刷された本は静的な形式です。デザイナーの本の最初のレイアウトから、プレスベッド、倉庫、本棚、そしてあなたの手への旅行まで、その本の出力は変わりません。デザイナーがそれを考案したように配信されています。

Webに関しては、さまざまな種類のデバイス、画面解像度、パーソナライズされたブラウザー設定など、多くの要因に応じて、まったく同じサイトを非常に異なった経験をすることができます。説明します…

…タイプが小さすぎるという印象を与えるかもしれません。他の人は画面外で重要なものを見逃す可能性があります。

それは、「ウェブがテキストに最適な場所である」ということも事実です。インターネット上のテキストは、「検索、コピー、翻訳、他のドキュメントにリンクされ、印刷することができ、便利で、アクセスできます」。

Webの柔軟性は、コントロールを放棄することを意味するものではありません。それどころか、Webデザイナーとして、私たちはまだ仕事に入れたものについて情報に基づいた選択をすることが期待されており、テキストも例外ではありません。テキスト要素のレイアウト、その色、サイズ、書体、これらすべてをすべて、Webサイトのコアメッセージとブランドを伝える方法。

ウェブ上のテキストの外観を操作するために、私たちの主な選択ツールはCSSです。

この投稿で提示するCSSプロパティは、CSSテキストモジュールの仕様にあります。

このモジュールは、CSSの型刻印制御について説明しています。つまり、

ソーステキストの翻訳を

に制御するCSSの機能 フォーマットされた、ラインラップされたテキスト。

言い換えれば、CSSテキストモジュールは、ブラウザ内の文字と単語の表示、およびCSSを使用して、それらがどのように間隔を置いているか、整列し、ハイフン化されているかなどを扱います。

テキストまたは単語の基本単位を構成するもの、および特定のテキストを正確に壊すことが許可されている場所は、ウェブサイトで使用されている言語のルールに大きく依存します。このため、この情報をHTMLドキュメントで宣言することが重要です（通常、要素のLANG属性）。

ここで、次の2つのトピックについては説明しません

フォント、つまり、キャラクターの視覚的表現、つまりグリフとその特性;

下線、テキストの影、強調マークなど、テキストの装飾に関連するCSSの機能。

興味がある場合は、CSSフォントモジュールレベル3とCSSテキストデコレーションモジュールレベル3に、フォントとテキスト装飾プロパティに関する最新のドキュメントがあります。

文字ケースの操作
テキスト要素を大文字で表示する必要がある場合、たとえば最初の名前と姓があります。 CSSは、Text-Transformプロパティを使用したレターケースの制御を提供します。
Text-Transformプロパティのデフォルト値はありません。つまり、文字ケースへの影響は適用されません。

大文字の値

他のすべての文字の外観を影響を受けていないときに、各単語の最初の文字を大文字で表示したい場合（HTMLドキュメントでのケースが何であれ）。

html：

css：

キャピタライズがタイトルケースコンベンションに従わないことに注意してください。実際、「in」という単語を含む上記の例のすべての最初の文字が大文字に表示されます。タイトルに関する文学大会に従うつもりの著者は、ソーステキストで手動で手紙を操作する必要があります。

大文字の値

目標がすべての文字を大文字で表示することである場合、HTMLドキュメントでのケースに関係なく、大文字は使用する適切な値です。

html：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

css：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

小文字の値

値小文字を使用すると、すべての文字が小文字に表示されます。当然のことながら、これは元のソースドキュメントですでに小文字である文字の外観には影響しません。

html：

css：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

全幅の値

仕様により、新しい値が追加されました。この値は、キャラクターが正方形の内部に表示されるように制約しているのは、日本語、中国語などの表記文字のキャラクターであるかのように。

すべての文字が対応する完全な幅の形式を持っているわけではありません。この場合、キャラクターは全幅の値の影響を受けません。

html：

css：

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

Firefoxでのキャラクターの外観は次のとおりです。

<span>h2 {
</span>  <span>text-transform: lowercase;
</span><span>}</span>

さらなる備考

Text-Transformプロパティのブラウザサポートは優れています。実際、すべての主要なブラウザはそれをサポートしています

唯一の例外は全幅の値であり、現在はFirefoxでのみ機能します。おそらく当然のことながら、スペックの候補勧告段階で全幅が削​​除されるリスクがあるという確率を考えると。 さらに、Firefox（v.39）とHyphenated Wordの資本価値をレンダリングする他の主要なブラウザとの間にわずかな矛盾があることに気付きました。

これがFirefoxの様子です：

ハイフンの後の最初の文字がどのように大文字になっていないかに注目してください。一方、以下はChromeに表示されているテキストと同じです：

この例では、ハイフンのキャラクターに続く文字も例外ではありません。彼らはまた、大文字で表示されています。他のすべての主要なブラウザの最新リリースでこの同じ動作を観察しました。上記のように、Firefox。

最後に、カスケードに注意してください！コンテナ要素にテキスト変換プロパティを設定すると、その値はすべての子要素によって継承されます。望ましくない結果を避けるために、子要素のテキスト変換プロパティ値をなしにリセットします。 テキスト変換プロパティ値のデモを表示します。

空白の扱い方

タブキー、スペースキーを押すか、テキストに次の行（exterキーまたは
タグを使用して）に押し込むように強制すると、ソースにホワイトスペースを作成しますドキュメント。

デフォルトでは、ブラウザは空白のシーケンスを単一のスペースに崩壊させ、ラインブレークが削除され、テキストラップが容器に合うようにラップします。これは、ブラウザでコンテンツの表示方法に影響を与えずにソースドキュメントを読みやすく保守可能に保つためにテキストの塊をインデントして分離することができるため、私たちにとって便利です。

しかし、これがあなたの目標でない場合はどうなりますか？たとえば、HTMLドキュメントで作成した空白を保存したいとします。一般的なシナリオは、適切にインデントされたコードスニペットとして表示されるように設計されたテキストを作成する場合です。または、壊れることなく、1行にすべてのテキストを表示する必要があります。 このような場合、ブラウザのデフォルトの動作をオーバーライドする場合、White-Spaceプロパティには興味深いオプションがあります。

通常のキーワードは、ブラウザをデフォルトの動作にリセットします。すべての余分な空白が1つの文字に崩壊し、容器の端に到達するとラインがラップされます。

pre値

事前キーワードを使用すると、すべての白い空間を保存し、ソースドキュメントに存在する新しい行を強制してテキストを表示できます。テキストは、コンテナをオーバーフローするときに新しい行に包まれません。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

タブを使用してホワイトスペースを作成する場合、整数値に設定することにより、タブサイズのプロパティでサイズを制御できます。

タブサイズは、一貫性のないブラウザのサポートを備えたプロパティですが、デフォルトのタブの文字の長さに本当に耐えられない場合は、すべてのベースをカバーするポリフィルを示します。 事前に値

ソースドキュメントのホワイトスペースがブラウザディスプレイに保存されたいとしましょう。ただし、容器の端に到達しながら、ラインを包むことも望んでいます。

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

事前に作業するキーワードは、目的の結果を達成するのに役立ちます。

ブラウザに表示される各行がソースコードの強制ブレークをどのように反映しているかに注意してください。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

ただし、ブラウザの画面を縮小すると、コンテナに合うようにラインがラッピングされていることに気付くでしょう。

事前線の値

ホワイトスペースプロパティの最終的な興味深い価値は、事前に行われます。スペースのシーケンスを1つのスペースに崩壊させ、ラッピングを可能にする範囲で、通常のように動作します。ただし、新しいライン文字または
タグがHTMLドキュメントに存在する場合、これらはブラウザディスプレイに保存されています。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

プリ、プレラップ、プリラインキーワードのCodePenデモを試してみてください。

nowrap値

nowrapはおそらく最もよく知られているホワイトスペース値です。あなたのデザインは、インラインコンテンツの一部を包むべきではないようにする必要がありますか？ホワイトスペースの使用：nowrap;あなたの要素についてトリックを行います。

ルイ・ラザリスは、この値の次のユースケースを指しています。

上記の上記は、»シンボルが続くリンクです。このキャラクターを次の行にドロップすること、たとえば、Fluid Webレイアウトでは、望ましくありません。

この状況と同様の状況（たとえば、アイコンを考えてください）では、Nowrap値は非常に便利です。

コドロップスCSSリファレンスでサラ・ソウアイダンによって別の興味深いユースケースが私たちにもたらされます。サラは、白い空間のプロパティは、画像を含む任意のインラインコンテンツに適用できると指摘しています。

nowrapの値とともに使用されて、画像の水平リストをスクロール可能な要素に作成します。画像が包装され、コンテナ内の1つの線に表示されないようにすることを防ぎます。

白い空間を使用して基本的なjQueryカルーセルを作成することにより、この提案を拡大しました：Nowrap。デモは次のとおりです

CodepenのSitePoint（@SitePoint）の画像カルーセルでワードラッププロパティを使用してペンを参照してください。 単語内のラインブレークの制御を取る

長い単語が次の行に包まれないためにデザインが外れていることがあります。ブログのコメントで長いURLまたはユーザーが生成した長い単語は一般的なシナリオです。

次のCSSプロパティは、Web上の長い単語の処理に関するある程度の制御を提供するように設計されています。

Word-wrap/overflow-wrapプロパティ

オーバーフローラッププロパティ（以前はWord-wrapと呼ばれ、レガシー上のすべての主要なブラウザで完全にサポートされ、作業しています）は、ホワイトスペースのプロパティがテキストラッピングを許可している場合に有効になります。 2つの値のいずれかを持つことができます：通常と分割単語。

通常の値を使用することにより、単語が許可されたブレークポイント、たとえばスペース、ハイフンなどでブレイクします。

分割単語値は、他の他の許容点で行が壊れない場合、単語内の任意のブレークポイントを許可します。

下の画像は、コンテナに溢れた長い単語の表示を示しています。

オーバーフローワラッププロパティを設定しましょう。また、レガシーの目的のために、Word-rapプロパティを分割単語値に設定しましょう。

…そして、長い単語の表示が複数の行に分割され、利用可能なスペースに合うようになりました。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

ハイフンの財産

長い言葉を分割することはすべてうまくいきます。ただし、結果のテキストは読者に混乱する可能性があります。より良い選択肢は、次の行に壊れるときに言葉をハイフネートすることです。このようにして、読者が複数の行に1つの単語を包むのを見ていることはすぐにはっきりしています。これを達成するために、CSSはWord-wrap：Break-word。 より具体的には、ドキュメントの言語ルールが許可されている場合、またはHTMLソースにハイフネーションが存在する場合、ハイフンプロパティの自動値は、単語が次の行に壊れるポイントでハイフンを表示することができます。これを機能させるには、HTMLドキュメントでLang属性を希望の言語に設定するようにしてください。

ハイフン文字の表示を防ぐこともできます。この場合、ハイフンのプロパティをNONEに設定します：

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

さらに、単語がマークアップでハイフネネーションされ、テキストが次の行にラップされている場合、単語内でラインブレークにハイフン文字を表示できます。これは、マニュアルの値で行われます：

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

ベンダーのプレフィックスによって支援された

ハイフンズプロパティのブラウザサポートは、すべての主要なブラウザで優れていますが、わずかな矛盾がないわけではありません。執筆時点でのChrome（v.44）とOpera（V.30）の最新バージョンは、プロパティ値Autoをサポートしていません。

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

Codepen

の上記の例を表示します 単語と文字の間のスペースを操作

多かれ少なかれ読みやすいテキストを作るものは、多くの要因に依存することがよくあります。場合によっては、各単語または各単一文字の間のスペースを増やすか、縮小します。 CSSは、単語間隔と文字間の間隔の外観を制御するための単語間隔と文字間隔のプロパティを提供します。

単語間隔のプロパティ

以下は、単語間隔のプロパティの値です：

• 通常
• パーセンテージ

通常の文字間のデフォルトのスペースを表示します。スペースの量は、使用するフォントまたはブラウザに依存します。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

フォントまたはブラウザで定義されたデフォルトの間隔に加えて、単語間間隔を追加できます。

パーセンテージはと同じように機能しますが、パーセンテージ値を使用します。ブラウザの実装は見つかりませんでしたが、割合は仕様の将来のドラフトから削除されるリスクがあります。

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

文字間隔のプロパティ

文字間隔プロパティを2つの値のいずれかに設定できます。通常または。

通常のフォント間隔は、通常のフォント間隔を残します。また、以前に指定されたデフォルト値に指定された文字間隔の長さもリセットします。たとえば、親要素で1EMの文字間隔値を指定しているが、子要素にデフォルト値を表示したい場合、通常はあなたの友人です。

値は測定単位です。 PXまたはEMS。これにより、フォントによって既に提供されているデフォルトの間隔に加えて、文字間の間隔を増やすことができます。

<span>h2 {
</span>  <span>text-transform: uppercase;
</span><span>}</span>

詳細

<span><span><span><h2</span>></span>Alice's Adventures in Wonderland<span><span></h2</span>></span></span>

単語間隔は、単語に適用されるだけではありません。あらゆる種類のインラインまたはインラインブロックコンテンツで使用できます。

また、単語間隔と文字間隔の両方をアニメーション化できます。ただし、文字間隔でCSS遷移を使用すると、通常の値がFirefoxの現在のバージョン（v.39）によって認識されないことが示されています。これを克服するには、通常のものを0EMに置き換えるだけです これは、単語間隔と文字間隔を使用したアニメーションテキストを備えたデモです：

CodepenのSitePoint（@SitePoint）によるCSSレター間隔と単語間隔のプロパティをアニメーション化するペンを参照してください。

テキストアライメントの最新のCSSオプション

テキストアライグプロパティはしばらく前から存在しています。テキストや画像などのインラインコンテンツがブロックコンテナ内にどのように整合するかを制御します。左右の左と右のインラインコンテンツは、それぞれ左と右に整列します。テキストアライグを中心に設定すると、コンテンツがコンテナの中心に合わせます。最後に、Justifyキーワードはコンテンツを正当化し、各行が同じ長さになるように（最後の行を除き、コンテナの端に到達するのに十分な長さでない場合）。

SPECは、右から左（RTL）言語システムを使用して国際化されたWebサイトで非常に役立つ2つの新しい値を追加します。

左から右（LTR）リーダーの場合、それぞれ左右に対応しています。 WebサイトがRTL言語を使用する場合、開始は右に対応し、終了は左に対応します。

<span><span><span><h2</span>></span>alice's adventures in wonderland<span><span></h2</span>></span></span>

<span>h2 {
</span>  <span>text-transform: capitalize;
</span><span>}</span>

テキストアリグインの適用：インラインの子要素に一致することにより、子供が親と同じアライメントを継承することが保証されます。継承された開始値または終了値は、親の言語方向に対して計算され、左または右の出力が生じます。

テキストアライグラストプロパティ

CSSの新機能は、テキストアライグラストプロパティでもあります。このプロパティは、段落の終了前または
タグの前に、正当化された

テキストの最後の行のアラインメントを制御します。デフォルト値であるAutoを除き、テキストアライグと同じキーワード値を持っています。自動値を使用すると、設定されている場合、要素のテキストアライグプロパティの値に従って最後のテキスト行を整列できます。テキストアライグプロパティが適用されていない場合、テキストはstartの値にデフォルトです。

執筆時点では、テキストアライグラストのブラウザサポートはかなり貧弱です。したがって、私の見解は、もしあったとしても、それを控えめに使用する必要があるという私の見解です。

これらの機能がアクション中で示されているCodepenデモを表示

インデントのテキスト

テキストの行、通常は段落の最初の行は、ウェブサイトでよく出会うものではありません。代わりに、空の線は、段落間の分離の一般的な視覚マークとして配置されます。 それにもかかわらず、段落の最初の行をインデントすることは、特定のデザインに適したクラシックな外観を作成するために時々使用されることがあります。

この手法によって設計が強化されている場合、CSSはテキストインデントプロパティを提供します。考えられる値を考えてみましょう。

長さの値は、一般にPXまたはEMユニットを使用して設定されます。

パーセンテージ値を使用してパーセンテージが設定されます：

各ラインの値は、ブロックコンテナ内の最初の線の外観と、強制ラインブレーク後の各ラインの外観をインドします。 HTMLソースにタグを挿入します。ただし、柔らかいラップブレイクの後の最初の行の表示、つまり、そのコンテナに合うように次の行に包むテキストは影響を受けません。

吊り下げの値は、インデントとして表示される最初の行を除くすべての行を引き起こします。

各ライン値とハンギング値は実験値であり、執筆時点ではまだブラウザには実装されていません。 このデモを表示して、テキストインデントのアクションを表示します

結論

CSSは、Webテキストの操作に向けて大きな進歩を遂げていますが、さらに多くのことが予想されています。最新のプロパティのいくつかの大ざっぱなブラウザのサポートに加えて、たとえば、CSSがKerning機能を提供した場合、つまり、特定の単語で2文字間の距離を操作する機会を提供した場合、それは素晴らしいことです。 この投稿では、Web上のテキストのフォーマット、ラインラップ、およびアライメントを制御する多くのCSSプロパティを掘り下げました。デモを使用して、これらを自由に試してください。

あなたのフィードバックを楽しみにしています！

Webタイポグラフィを制御するためのCSSプロパティに関するよくある質問（FAQ）

CSSプロパティを使用してWebタイポグラフィを制御するにはどうすればよいですか？

CSSプロパティは、Webタイポグラフィを制御するための幅広いオプションを提供します。フォントサイズ、フォントファミリ、ラインの高さ、テキストアライメント、テキストの色などを調整できます。たとえば、フォントサイズを変更するには、「フォントサイズ」プロパティを使用して、ピクセル、EMS、またはパーセンテージでサイズを指定できます。同様に、フォントファミリを変更するには、「フォントファミリー」プロパティを使用して、フォント名を指定できます。ユーザーのシステムで最初の選択肢が利用できない場合に備えて、フォールバックフォントを含めることを忘れないでください。 'CSSのプロパティは、ブロック要素のインラインコンテンツを整列するために使用されます。 「左」、「右」、「中央」、「正当化」などの値を取ることができます。たとえば、「Text-Align：Center」は、その含有要素内のテキストを中心にします。このプロパティは、見出し、段落、またはその他のテキスト含有要素のテキストのアラインメントを制御する場合に特に便利です。 CSSのホワイトスペースのプロパティは、要素内の白い空間がどのように処理されるかを制御するために使用されます。 「通常」、「Nowrap」、「Pre-line」、「Pre-line」、または「Pre-rap」などの値を取ることができます。たとえば、「ホワイトスペース：Nowrap」により、テキストが次の行に巻かれないようにし、すべてのテキストが単一の行に表示されます。 🎜>

リスト項目をCSSの左に並べるには、「左」の値を持つ「テキストアライグ」プロパティを使用できます。たとえば、「テキストアライグ：左」は、リスト項目を左に並べます。これはほとんどのブラウザのデフォルトのアライメントですが、指定することで異なるブラウザ全体で一貫性を確保するのに役立ちます。 'CSSのプロパティは、テキストの線間の空間を制御するために使用されます。ピクセルなどの絶対ユニット、パーセンテージなどの相対ユニット、または現在のフォントサイズを掛けてラインの高さを設定するユニットレス数のライン高さを指定できます。たとえば、「Line-Height：1.5」は、ラインの高さを現在のフォントサイズの1.5倍に設定します。

CSSのテキスト色を変更するにはどうすればよいですか？

CSSの「色」プロパティは、テキスト色を変更するために使用されます。名前（「赤」など）、16進価値（「＃ff0000」など）、RGB値（ 'RGB（255、0、0）'など）、HSL値など、さまざまな方法で色を指定できます。 （「HSL（0、100％、50％）」など）。 CSSの「Font-Weight」プロパティは、テキストを太字にするために使用されます。その値を「太字」または100の倍数で100から900までに設定できます。たとえば、「font-weight：bold」または 'font-weight：700'はテキストを太字にします。 CSSのプロパティは、テキストのイタリック化に使用されます。その価値を「イタリック」に設定して、テキストを斜体にすることができます。たとえば、「フォントスタイル：イタリック」はテキストをイタリック化します。その価値を「下線」に設定して、テキストに下線を引くことができます。たとえば、「テキスト廃止：アンダーライン」はテキストに下線を引きます。文字間のスペース。ピクセルなどの絶対ユニットまたはEMSのような相対ユニットの文字間隔を指定できます。たとえば、「文字間隔：0.1em」は、現在のフォントサイズの0.1倍の文字間のスペースを増加させます。

以上がWebタイポグラフィを制御するCSSプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。