マークアップ言語 - テキストの CSS スタイルを指定する

123WORDPRESS.COM HTML チュートリアルセクションに戻るには、ここをクリックしてください。 CSS チュートリアルを表示するには、ここをクリックしてください。
上記:マークアップ言語 - CSS レイアウト。第 13 章テキストのスタイル設定 CSS を使用したテキストのスタイル設定に 1 章を割くのはよい考えだと思いました。テキストコンテンツは、標準に完全に準拠していないサイトであっても、おそらく CSS が最もよく使用される場所です。ページ上の繰り返しの <font> タグをなくすことは、デザイナーにとって非常に魅力的なことでした (そして今でもそうです)。また、CSS を使用してタイポグラフィを制御し、コンテンツとプレゼンテーションをさらに分離することの大きな利点は、簡単に理解できます。
これまでの多くの例から、CSS は多くの状況に対応できること、そしてテキストスタイルを設定することが、最も基本的な Web ページにもデザイン要素を追加する最も簡単な方法であることがわかります。同時に、CSS を使用してテキストのスタイルを設定すると、ページに不要な画像が追加されないようにすることもできます。
この章では、CSS を使って、退屈で普通のテキストを別のレベル (新しい色、サイズ、フォント) に引き上げる方法を説明します。ハイパーテキストをかっこよく見せるにはどうすればよいでしょうか。
テキストスタイルの指定は、CSS の高度な機能を完全にサポートしていない古いブラウザーでも、CSS が最も得意とする機能の 1 つです。過去には、デザイナーや開発者がテキストをデザインしてサイズや太字以外の効果を実現したいと考えていた可能性がありますが、その結果、今日の基準では耐え難く、使いにくい Web ページが生まれていたでしょう (テキストのほとんどが画像で表現されている Web ページを見たことがありますか? ただし、使用しているのはテキストブラウザーです...)。
画像を使用する代わりになるいくつかの方法を紹介し、上記の質問に答えるために、この章では、スタイルが設定されていないテキストから始めて、さまざまな CSS ルールを徐々に追加して、目を引くデザインにしていきます。
まず、処理しようとしているテキストをブラウザのデフォルトフォントで表示します。私の場合、デフォルトフォントは Times 16 ピクセルです。Mac OS X で Safari ブラウザを使用しているため、テキストはアンチエイリアス方式で描画されます。Windows XP を使用していて、ClearType が有効になっている場合も、同様の効果を確認できます。
Times (またはその変形である Times New Roman) は多くのブラウザのデフォルトフォントですが、ユーザーが自分の好みのフォントに簡単に変更できるため、このデフォルトに依存することはできません。
図 1301 は、この章で使用するスタイルなしのテキストを示しています。<h1> タグでマークされたシンプルなタイトルと、その後に続く 3 つの段落のホームデコレーションのヒントです。

図 13-1 ブラウザにタイトルとテキストプリセットが表示されます行の高さの変更最もシンプルで効果的なテキストスタイル効果の 1 つは、line-height プロパティです。テキストの各行の間に余分なスペースを追加すると、段落が読みやすくなり、見栄えが良くなるだけでなく、ページに素晴らしい効果をもたらすことができます。
このトリックを実現するには、次の CSS ルールを <body> タグに追加するだけです。たとえば、<p> の行の高さだけを変更したい場合など、このルールを他のタグに追加することもできます。