序章

カスケードスタイルシート（CSS）は、プログラマーとデザイナーの2つの分野向けに設計された言語です。 Web上のテキストを操作することは、この言語への幅広いアクセス可能性の最も明確な例の1つです。 テキストのスタイリングは、グラフィックデザインの世界の概念を使用しますが、命名規則を調整して、より広く実装されます。

このチュートリアルでは、テキストのスタイリングの技術であるWebタイポグラフィについて学習します。 印刷機での作業と同様に、コンテンツを設定し、視覚的なスタイルを適用してコンテンツを伝達し、読みやすさと強調のためにコンテンツを調整します。 Web上のテキストのスタイル設定の目的は、色、サイズ、形状、およびスペースを通じて視覚的な階層を作成することです。 このように、見出しは、段落から目立つ小見出しから目立ちます。 これらの概念は、読者がテキストを読みやすくスキャンしやすくするのに役立ちます。

Cupcake Ipsum のプレースホルダーコンテンツで構成されるHTML構造を記述して、チュートリアルを開始します。 さまざまな見出しレベルで作業します（h1–h6）およびコンテンツタイプ（p, strong、 と em）以下を含む複数のテキスト関連のCSSプロパティを適用する font-family, font-size、 と color. また、サードパーティのフォントホスティングサービスである GoogleFontsからカスタムフォントをロードします。 このチュートリアルの各ステップでは、コンテンツに適用する新しい概念または一連のプロパティを紹介します。 最後に、カスタムスタイルのWebページが作成されます。

前提条件

サンプルHTMLの設定

この最初のステップでは、チュートリアルの残りの部分でスタイルを設定するHTMLを設定します。 このチュートリアルのHTMLの目的は、スタイリングを練習するためのさまざまな要素と状況を提供することです。

開く index.html nano 、 Vim 、 Visual StudioCodeなどのテキストエディターを使用したファイル。 次のボイラープレートHTMLを追加して、ファイルに必要なベースラインコードを指定します。

index.html
<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

The <link /> 要素はすでにロードされています styles.css ファイルなので、そのファイルも準備しておいてください。

次に、スタイルを設定するためのコンテンツが必要です。 テキストスタイルを作成する場合、コンテンツの準備が整う前にプロジェクトでスタイルが必要になることがよくあります。 グラフィックデザインの世界では、プレースホルダーコンテンツがこの目的で使用されます。 デザイナーは、LoremIpsumとして知られるラテン語のテキストをプレースホルダーとして使用することがよくあります。 Cupcake Ipsum を含む、このプレースホルダーテキストの多くの最新の表現があります。 これは、HTML全体で使用される参照コピーになります。

まず、HTMLは、コンテンツの明確な区別と順序である階層を表す必要があります。 HTMLでは、見出しタグを使用して実行されます。 <h1>、一番上の見出し、 <h6>、一番下の見出し。 見出しのブラウザのデフォルトスタイルは、サイズのみで視覚的な階層を定義します。 <h1> 要素のデフォルト font-size のそれよりも大幅に大きい <h6>. このチュートリアル全体を通して、色やスペースなどの他のデザインの原則を使用して、コンテンツに視覚的な階層を提供します。

この階層的なコンテンツを作成するには、さまざまな見出しを書き、各見出しにカップケーキイプサムからのいくつかの単語を入力します。 <body> のタグ index.html. ブラウザに正確な意味を提供する適切なHTMLセマンティクスに従います。

適切なHTMLセマンティクスを使用するには：

  • 1つだけになります <h1> ページ上の要素。 これは通常、タイトルになります。
  • 後続の見出しレベルは、1つ小さい、等しい、またはそれ以上のレベルになります。 たとえば、後に続く唯一の見出しレベル <h3> どちらかになります <h4>、 別 <h3>、または <h2>、しかし決して <h5> また <h6>.

見出しのセマンティクスのルールを使用して、次の強調表示されたHTMLをに追加します index.html:

index.html
...
  <body>
    <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
    
    <h2>Tootsie roll oat cake macaroon</h2>
    
    <h2>Jelly beans tiramisu pastry danish donut</h2>
    
    <h3>Lemon drops pastry marshmallow</h3>
    
    <h3>Apple pie pudding topping</h3>
    
    <h4>Gingerbread danish</h4>
    
    <h5>Carrot cake topping lollipop gummi bears</h5>
    
    <h6>Liquorice bonbon candy cotton candy liquorice</h6>
  </body>
...

次に、各見出しの間のスペースを埋めるためにいくつかのコンテンツが必要です。 これらは、によって指定されたテキストの段落になります <p> 各段落を保持する要素。 もう一度CupcakeIpsumを使用してこのコンテンツを生成し、ページ全体に段落を配置します。

次のコードブロックの強調表示された部分を追加します。 このチュートリアルでは、コードブロック全体でこの形式を使用します。

index.html
...
  <body>
    <h1>Sugar plum chupa chups chocolate bar cupcake donut</h1>
    
    <h2>Tootsie roll oat cake macaroon</h2>
    
    <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum I love fruitcake pastry. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
    
    <h2>Jelly beans tiramisu pastry danish donut</h2>
    
    <h3>Lemon drops pastry marshmallow</h3>
    
    <p>I love marshmallow candy. Sesame snaps muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
    
    <h3>Apple pie pudding topping</h3>
    
    <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu soufflé powder caramels I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
    
    <h4>Gingerbread danish</h4>
    
    <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. Wafer tootsie roll I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
    
    <h5>Carrot cake topping lollipop gummi bears</h5>
    
    <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
    
    <h6>Liquorice bonbon candy cotton candy liquorice</h6>
    
    <p>Cupcake donut topping chupa chups halvah chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
  </body>
...

最後に、追加します <strong>, <em>、および2つの要素の組み合わせ。 これにより、コンテンツで強調されているフレーズの例が提供されます。

index.html
...
    <h2>Tootsie roll oat cake macaroon</h2>
    
    <p>Jujubes brownie candy. Dessert tootsie roll pie gummi bears danish cotton candy. Sugar plum <strong>I love fruitcake pastry</strong>. Jelly-o gummi bears muffin gummi bears marzipan cheesecake donut gingerbread I love. Cupcake wafer cake.</p>
    
    <h2>Jelly beans tiramisu pastry danish donut</h2>
    
    <h3>Lemon drops pastry marshmallow</h3>
    
    <p>I love marshmallow candy. <em>Sesame snaps</em> muffin danish. Chocolate cake cookie jelly-o tiramisu halvah brownie halvah chocolate chocolate cake. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll chocolate bar. Macaroon I love muffin candy canes sweet roll I love. I love bonbon marshmallow croissant ice cream I love gummi bears.</p>
    
    <h3>Apple pie pudding topping</h3>
    
    <p>Pie apple pie I love jujubes biscuit I love. Chocolate cake pastry tiramisu <strong>soufflé powder caramels</strong> I love ice cream. Dragée liquorice toffee jelly jelly beans. Sesame snaps candy canes soufflé. Biscuit donut bear claw jujubes halvah pastry macaroon lemon drops. Tootsie roll dragée cookie candy soufflé dragée cupcake liquorice.</p>
    
    <h4>Gingerbread danish</h4>
    
    <p>Powder dragée sesame snaps candy canes jelly-o. Halvah gingerbread cheesecake wafer. <strong><em>Wafer tootsie roll</em></strong> I love I love. Cake toffee I love. Cotton candy cotton candy jelly beans I love bonbon toffee. Chupa chups chupa chups caramels ice cream halvah candy chocolate cake. Marshmallow carrot cake jelly beans.</p>
    
    <h5>Carrot cake topping lollipop gummi bears</h5>
    
    <p>Chocolate cake sweet roll pudding chocolate cake fruitcake bear claw.</p>
    
    <h6>Liquorice bonbon candy cotton candy liquorice</h6>
    
    <p>Cupcake donut topping <em><strong>chupa chups halvah</strong></em> chupa chups. Macaroon tootsie roll cupcake caramels chocolate fruitcake gingerbread jelly-o. Tiramisu I love marshmallow jelly-o I love jelly beans candy gummi bears.</p>
...

HTMLを記述したので、保存します index.html ブラウザでそれを開いて、ブラウザのデフォルトスタイルでページがどのように表示されるかを確認します。

テキストはすべての要素のサイズの範囲であり、デフォルトでは <h5> と <h6> スタイルが <p> 文章。

このステップでは、チュートリアルの残りの部分でスタイルが設定されるHTMLコンテンツを設定します。 次に、 font-family プロパティ、フォントスタック、ブラウザが使用できるフォントのリストについて学び、さまざまな要素にフォントを適用します。

を使用して font-family 財産

次に、 font-family CSSプロパティを使用して、 GoogleFontsサービスから外部フォントファイルを読み込みます。 このプロパティの名前は、フォントのコレクションと、太字や斜体を含むそのフォントのバリエーションを表すタイポグラフィ用語に由来しています。 フォントにはこれらのバリエーションの多くを含めることができますが、すべて同じものの一部にすることができます font-family、と呼ばれるそれらのバリエーションで font-weight と font-style プロパティ。

で作業を開始するには font-family、その値のオプションに関する詳細を理解することは役に立ちます。 の値 font-family プロパティは、フォントスタックと呼ばれるフォントのリストです。 フォントスタックはフォールバックシステムとして機能します。 次のことを考慮してください font-family プロパティ値：

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

ブラウザはまず、Helvetica Neueがコンピュータにインストールされているフォントとして、またはWebサイトによって提供されているフォントとして使用できるかどうかを判断します。 ブラウザがHelveticaNeueというフォントを見つけられない場合は、リストを下ってHelvetica、次にArialに移動します。 ブラウザがこれらのフォントのいずれかを見つけることができない場合は、リストの最後のフォント、 sans-serif、ブラウザがデフォルトのフォントとして設定したものを使用します sans-serif スタイルフォント。

注：フォントスタックは、フォントが見つからない場合ではなく、フォントに特定の文字が見つからない場合に最高の機能を提供します。 これは、複数の言語のサポートを使用する場合に特に必要です。この場合、1つのフォントに、すべての言語のニーズをカバーする文字セットがない場合があります。 フォントスタックには、スタック内のプライマリフォントと同様の特殊文字と視覚的感覚を提供するフォールバックフォントを含めることができます。

というファイルを作成します styles.css と同じディレクトリにあります index.html. テキストエディタで開き、ページのデフォルトフォントを追加します。

styles.css
body {
  font-family: "Avenir Next", Calibri, Verdana, sans-serif;
}

このコードでは、 body タイプセレクター font–family 財産。 次に、フォントスタックについて "Avenir Next"、iOSおよびmacOSブラウザで利用できるようになります。 Avenir Next フォント名が2語であるため、引用符で囲まれています。 次のフォントは Calibri Windowsブラウザ用。 各フォント宣言の間に必ずコンマを入れてください。 より一般的なフォントフォールバックを提供するには、次を使用します Verdana、2000年代初頭からコンピュータで広く利用可能になっています。 最後に、これらのフォントはすべてサンセリフフォントとして分類されるため、ブラウザのデフォルトを追加します sans-serif フォントスタックの最後のフォントオプションとして。

保存 styles.css、次に開きます index.html ブラウザで。 コンテンツのブラウザのデフォルトフォントの代わりに新しいフォントが表示されます。 Appleオペレーティングシステムを使用している場合、AvenirNextはブラウザでレンダリングします。 Windowsを使用している場合は、代わりにCalibriがレンダリングされます。 次の画像は、このフォントスタックがMacOSでどのように表示されるかを示しています。

このセクションでは、 font-family Webページのデフォルトのフォントスタックを設定するためのプロパティ。 また、 font-family 特に見出しテキストコンテンツに適用されるプロパティ。 次のセクションでは、Google Fontsサービスを使用してカスタムフォントファイルを読み込み、ページで使用します。

GoogleFontsを使用したカスタムフォントの読み込み

これで、 font-family コンピュータにフォントがすでにインストールされているプロパティの場合は、外部サービスからフォントをロードします。 これにより、テキストのスタイル設定に使用できるフォントの範囲が広がります。 このセクションでは、Google Fontsサービスを使用して、Webページでフォントを読み込んで使用します。

ブラウザには、そのブラウザに適切なフォントファイル形式が提供されている限り、任意のフォントをロードする機能があります。 Google Fontsなどのフォントサービスは、フォントの読み込みに必要なCSSファイルとフォントファイルの両方を提供することで、フォントの定義とホスティングの作業を軽減します。 Google Fontsのような他の多くのサービスがありますが、Google Fontsはロイヤリティとオープンソースフォントをホストし、無料でサービスを提供しています。

開始するには、ブラウザでfonts.google.comを開きます。

GoogleFontsにはさまざまなフォントがあります。 このチュートリアルでは、PublicSansとQuicksandの2つを使用します。

Google Fontsの検索フィールドから、 Public Sans. 検索結果からフォントカードが表示されると、フォントのプレビューが表示されます。 カードをクリックして、フォントのページに移動します。

Public Sansフォントページには、フォントのすべてのバリエーションが一覧表示されます。 これらはウェイトと呼ばれ、100から900の範囲です。 このチュートリアルでは、通常（400）および太字（700）スタイルを見つけて、+各スタイルの横にある[このスタイルを選択]ボタンを押します。バリアント、およびそれらのイタリックスタイル。

最初のスタイルを選択すると、選択したファミリツールがスライドインします。 このツールは、これらのフォントを使用するために必要なHTMLとCSSを提供します。

を選択 <link /> ブラウザにフォントをロードし、提供されたHTMLをコピーするメソッド。 開ける index.html コードをに追加します <head> 後の要素 <link /> 読み込み中 styles.css. 何度か戻ってくるので、GoogleFontsを開いたままにします。

index.html
...
<head>
	<link href="styles.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
</head>
...

この時点で、リロードします index.html ブラウザでは、視覚的な変更はありません。 ブラウザはフォントを読み込んでいますが、フォントをコンテンツに適用するには、フォントをフォントスタックに追加する必要があります。

Google Fontsに戻って、PublicSansをロードするCSSルールを見つけます。 Google Fontsは、PublicSansのフォントスタックとブラウザのデフォルトを提供します sans-serif とフォント font-family: 'Public Sans', sans-serif;. フォールバックフォントを使用してフォントスタックを設定しているので、Google Fontsの例から取得する必要があるのは、PublicSansを参照するための名前だけです。

で既存のフォントスタックを使用する styles.css、 交換 Avenir Next と Calibri と Public Sans:

styles.css
body {
  font-family: "Public Sans", Verdana, sans-serif;
}

ベースフォントスタックが宣言されたので、ページ上のすべてのフォントがPublicSansになります。

見出しにもっと注意を向けるための一般的な設計手法の1つは、本文とは異なるフォントを見出しに使用することです。 これを独自のHTMLに適用するには、Google Fontsに戻り、「Quicksand」を検索します。 これは、見出し、またはdisplayフォントになります。 <h1> 終えた <h6> ページ上の要素。

流砂を見つけたら、フォントカードを選択し、セミボールド（600）およびボールド（700）のフォントの太さをパブリックサンと一緒に選択したフォントに追加します。 Google Fontsは、選択したすべてのフォントとバリアントをロードするための新しいURLを提供します。 前のを交換します href あなたの新しいリンクの価値 index.html ファイル：

index.html
...
<head>
	<link href="styles.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@600;700&display=swap" rel="stylesheet">" rel="stylesheet">
</head>
...

流砂がブラウザに読み込まれるように設定されたので、それを見出しタグに適用する必要があります。 これを実現するには、グループセレクターと呼ばれるCSSセレクターのコンマ区切りリストを styles.css ファイル。 この場合、QuicksandでGoogle Fontsが提供するフォントスタックを使用し、その後にブラウザのデフォルトを使用します sans-serif フォント：

styles.css
...
h1, h2, h3, h4, h5, h6 {
  font-family: "Quicksand", sans-serif;
}

変更をに保存します styles.css ブラウザに戻ってリロードします index.html. この時点で、お気軽にGoogleFontsを閉じてください。 ブラウザが読み込まれると、2つのフォントが表示されます。 現在、Quicksandはすべての見出しにあり、PublicSansは太字および斜体のコンテンツを含む他のすべてのコンテンツにあります。

このセクションでは、Google Fontsサービスから2つのフォントをロードし、それらのフォントを既存のフォントスタックに追加しました。 次のセクションでは、フォントバリアントを使用して、太字と斜体をフォントに適用するタイミングと方法を指定する方法について説明します。

使用する font-weight と font-style プロパティ

このセクションでは、 font-weight と font-style フォントの表示方法を調整するためのプロパティ。 引用スタイルガイドの一部としてコンテンツを強調したり、視覚的なバリエーションを提供したりするなど、これらのバリエーションを使用する理由はたくさんあります。

Google Fontsからカスタムフォントを読み込んでいるので、テキストの特性の微調整を開始できます。 で始まる font-weight プロパティでは、フォントの表示の厚さまたは薄さを変更できます。 The font-weight プロパティには2つの一般的な値があります。 normal と bold. The normal 値がデフォルトです font-weight ブラウザのほとんどのテキスト。 The bold 値がデフォルトです font-weight 見出しと <strong> 要素。 ただし、このチュートリアルでは、名前の代わりに数値を使用する必要があります normal と bold 値。

数値 font-weight 値は、ロードするフォントによって異なります。 GoogleFontsからPublicSansフォントを追加するときに、通常（400）と太字（700）のウェイトを選択しました。 括弧内の数字は、そのフォントを参照してロードするために必要な値と一致します。 さらに、 font-weight の値 400 と同等の数値です normal、 お気に入り 700 と同等の数値です bold. 見出し以外のすべてであるPublicSansを使用するテキストは、これらの重みを自動的に使用します。

または、Quicksandフォントの選択には、半太字（600）および太字（700）のフォントの太さが含まれていました。 The 600 値には対応する数値がないため、数値を使用して定義する必要があります。

まず、を設定します font-weight へのすべての見出しの 600 流砂のセミボールドバリアント。 あなたの中で styles.css ファイルで、すべての見出し値を含むグループセレクターを見つけて、 font-weight: 600; セレクターブロックへの宣言：

styles.css
...
h1, h2, h3, h4, h5, h6 {
	font-family: "Quicksand", sans-serif;
	font-weight: 600;
}

この変更を行ったら、保存します styles.css とリロード index.html ブラウザで。 見出しがから変わると、見出しがわずかに薄くなります。 700 流砂の価値 600 価値。

これで、流砂を使用するようにすべての見出し要素を設定しました 600 重量、まだ使用する場所があります 700 フォントのバリエーション。 まず、作成します h3 あなたのタイプセレクター styles.css ファイルして追加 font-weight: 700; セレクターブロック内：

styles.css
...
h3 {
	font-weight: 700;
}

この変更により、 h3 他の見出しよりも大胆になっているので、少し目立つようにします。 チュートリアルが進むにつれて、追加の変更を加えます h3 それを目立たせるが、それでもその階層的な順序を維持するためのスタイル。

変更をに保存します styles.css 次に、両方でラップされたテキストを対象とする新しいセレクターを作成します <em> と <strong> タグ。 これまでに書かれたスタイルの場合、この種のテキストはPublicSansの太字のイタリック体になります。 代わりに、Quicksandフォントスタックを使用するようにスタイルを設定してください。

大胆なイタリックスタイルを取得するためのHTMLは <strong><em>...</em></strong> と <em><strong>...</strong></em>、でコンビネータグループセレクタを作成する必要があります styles.css ファイルを作成してから、 font-family とのプロパティ "Quicksand", sans-serif 値として：

styles.css
...
strong em,
em strong {
	font-family: "Quicksand", sans-serif;
}

あなたがあなたにこの追加をした後 styles.css ファイル、保存してからリロード index.html ブラウザで。 太字の斜体であったテキストは、Quicksandを使用しており、Google Fontsが斜体バージョンのフォントを提供していなくても、斜体になっています。 これはfauxitalic と呼ばれ、ブラウザはこのコンテンツがデフォルトでイタリックである必要があることを理解しますが、イタリックのバリエーションが定義されていないため、代わりにテキストを人為的に傾斜させます。

テキストが斜体であるかどうかを処理するためのプロパティは次のとおりです。 font-style. の値オプション font-style プロパティは normal と italic. フェイクボールドを使用する代わりに、このセレクターのスタイルをイタリック体にしないように変更します。 に追加 strong em, em strong あなたのグループセレクター styles.css ファイルする font-style の値を持つプロパティ normal:

styles.css
...
strong em,
em strong {
	font-family: "Quicksand", sans-serif;
	font-style: normal;
}

これにより、太字の斜体テキストのインスタンスがQuicksand太字のみに変更されます。

変更をに保存します styles.css とリロード index.html ブラウザで変更を確認します。

あなたは font-weight と font-style このセクションのプロパティは、GoogleFontsからロードされたQuicksandフォントのバリエーションを適用します。 次に、 font-size 見出し間の階層がより明確で、より大きく、より読みやすいテキストを作成するためのプロパティ。

を使用して font-size 財産

このセクションでは、 font-size ページ全体のコンテンツに異なるフォントサイズを適用するプロパティ。 テキストのサイズは、情報を伝達する上で重要な要素です。 適切なサイズのテキストは読みやすく、適切なサイズの見出しは、情報のスキミングを容易にするための階層を伝えるのに役立ちます。 あなたは変更します font-size で作成したすべての要素の index.html より読みやすいドキュメントを作成します。

デフォルトを設定することから始めます font-size に body エレメント。 デフォルトのブラウザ font-size は 16px、ただし、多くのフォントを少し大きくすると読みやすくなる場合があります。 あなたの styles.css ファイルを追加し、 font-size: 18px; に body エレメント：

styles.css
body {
	font-family: "Public Sans", Verdana, sans-serif;
	font-size: 18px;
}
...

開ける index.html ブラウザで、またはページを更新します。 The font-size の変更 body elementはページ上のすべてのフォントを変更し、サイズを大きくしました。

要素のデフォルトのフォントサイズは、親要素に基づいて比較的サイズが大きくなります。この場合は、 <body> 要素、フォントサイズのパーセント値を使用します。 式を使用する (target / base) * 100% に設定されている基本フォントサイズに相対的なパーセンテージ値を提供します <body> エレメント。

この式を試してみるには、目標を設定します font-size のために <h1> ある要素 45px. 式を使用すると、目標サイズは次のようになります。 45px 基本サイズは 18px、したがって、これの式は次のようになります (45 / 18) * 100%、 250%. これは、 <h1> ベースの2.5倍のサイズになります font-size.

あなたに戻る styles.css ファイルを作成し、の要素セレクターを追加します h1 を追加します font-size: 250%; フォントサイズを設定するためのプロパティと値：

styles.css
...
h1 {
	font-size: 250%;
}
...

これで、相対フォントサイズが設定されました。 <h1> 要素、残りの見出し要素に同じ式を適用します。 それぞれで、丸めるか、完全な10進値を保持するかを選択できます。 また、ターゲットサイズや数式について説明するコメントを残すことも役立ちます。

あなたの styles.css ファイルを作成し、コメントを追加することから始めます h1 font-size レンダリングされたサイズを説明するプロパティ。 次に、各見出しに式を適用して、 h2 があります font-size に相当 36px、 h3 に等しい 32px, h4 に 26px、 h5 に 22px、そして最後に h6 のベースサイズに 18px. のデフォルトサイズ <h6> 要素は基本サイズよりも小さいため、次のように設定します 100% 基本値を下回らないようにします。

styles.css
...
h1 {
	font-size: 250%; /* 45px */
}

h2 {
	font-size: 200%; /* 36px */
}

h3 {
	font-size: 177.78%; /* 32px */
}

h4 {
	font-size: 162.5%; /* 26px */
}

h5 {
	font-size: 122%; /* 22px */
}

h6 {
	font-size: 100%; /* 18px */
}
...

ブラウザに戻って更新します index.html. すべての見出しは font-size デフォルトに比較的基づいて font-size に設定 <body> エレメント。 次の画像は、この変更がブラウザでどのようにレンダリングされるかを示しています。

このステップでは、 font-size Webページ上のテキストのサイズを変更するためのプロパティ。 サイズのデザインコンセプトを使用して、デフォルトのブラウザスタイルを超えてコンテンツに階層を与えました。 次のステップでは、コンテンツのデザインをさらに進めます。 color 財産。

を使用して color テキストを区別するためのプロパティ

次のセクションの焦点は color CSSプロパティ。色を使用して順序を区別し、コンテンツに意味を追加します。 色は、特にテキストに異なる意味を定義する場合に、最も一般的な設計上の考慮事項の1つです。 このセクションでは、名前付きcolorsを使用してテキストの色を設定します。 名前付きの色は、何年にもわたって成長してきた事前定義された色のコレクションです。 これらは、16進カラーコードなどの他のWebカラー値と一致します。 このセクションでは、ウィキペディアのWebカラーのページにある名前付きカラーリストを使用します。 参照用に、ブラウザでWikipediaWebカラーページを開いたままにしておくことをお勧めします。

あなたがしたように font-size、ドキュメント全体にデフォルトの色を設定します。 これは、ページ上のすべてのコンテンツに影響します。 color ほとんどの要素の継承値です。 色のコントラストを覚えておくことが重要です。これは、特にWebをすべてのレベルの視覚にアクセスできるようにする場合に、読みやすくなるためです。 以来 background-color デフォルトの白のままになります。太字で暗い色を使用することをお勧めします。 アクセス可能なカラーコントラストを使用したデザインについて詳しく知りたい場合は、このトピックに関するこの短いビデオシリーズをご覧ください。

使用を開始するには color、あなたに戻る styles.css テキストエディタでファイルします。 あなたがしたように font-size セクション、を見つけます body セレクターと追加 color 財産。 ほとんどのブラウザのテキストのデフォルトの色は黒です。 アクセス可能な色のコントラストを得るには、明るい背景でベースカラーを暗く保つことが重要です。 名前付きの色を使用する DarkSlateGray、これは読みやすさのためにここではキャメルケースのみですが、必要に応じてすべて小文字にすることができます。

styles.css
body {
	font-family: "Public Sans", Verdana, sans-serif;
	font-size: 18px;
	color: DarkSlateGray;
}
...

あなたの styles.css ファイルと更新 index.html ブラウザで。 コンテンツの色が黒から濃い青緑に変わります。

基本色が設定されたので、他の色の使用を開始して、より視覚的な階層を提供できます。 から始めます h1 あなたのセレクター styles.css ファイルを追加し、 color の値を持つプロパティ Indigo:

styles.css
...
h1 {
	font-size: 250%; /* 45px */
	color: Indigo;
}
...

あなたの styles.css ファイルを作成し、ブラウザに戻って更新します index.html. The <h1> テキストは、デフォルトの濃い青緑色ではなく、濃い紫色になりました。

次に、他の見出しに色を適用します。 流砂は楽しく丸みを帯びたフォントで、風変わりなカップケーキIpsumサンプルコンテンツを使用しているため、各見出しに異なる色を使用して、明るく元気な配色を作成します。 戻る styles.css そして、見出しセレクターごとに、 color プロパティと色の値。 のために h2 要素の使用 MediumVioletRed、 のために h3 使用する LimeGreen、 のために h4 追加 Chocolate、 のために h5 使用する Crimson、そして最後に h6 使用する DeepSky Blue:

styles.css
...
h2 {
	font-size: 200%; /* 36px */
	color: MediumVioletRed;
}

h3 {
	font-size: 177.78%; /* 32px */
	color: LimeGreen;
}

h4 {
	font-size: 162.5%; /* 26px */
	color: Chocolate;
}

h5 {
	font-size: 122%; /* 22px */
	color: Crimson;
}

h6 {
	font-size: 100%; /* 18px */
	color: DeepSkyBlue;
}
...

追加したら color 見出しのプロパティ、保存 styles.css ブラウザに戻って更新します index.html. これで、コンテンツは色でいっぱいになります。

とともに color Webカラーの名前付き値と、色を使用して意味を提供する方法について学習したプロパティ。 あなたも使用しました color Webページのコンテンツにカラフルなパレットを追加することにより、コンテンツに個性を与えるプロパティ。

結論

テキストの操作は、Web用のCSSを作成する上での主要な部分です。 テキストは、それが言うことだけでなく、それがどのように見えるかという意味も伝えます。 で学んだツールを使用して font-family, font-weight, font-style, font-size、 と color プロパティでは、テキストを操作して、Webサイトに意味のあるコンテキストを提供するのに役立てることができます。 これらのプロパティは、この記事で説明されている見出しに限定されません。テキストを含む任意の要素で使用できます。

CSSチュートリアルをもっと読みたい場合は、CSSトピックページを確認してください。