CSSでフォント、サイズ、色を使用してテキスト要素のスタイルを設定する方法
著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。
序章
カスケードスタイルシート（CSS）は、プログラマーとデザイナーの2つの分野向けに設計された言語です。 Web上のテキストを操作することは、この言語への幅広いアクセス可能性の最も明確な例の1つです。 テキストのスタイリングは、グラフィックデザインの世界の概念を使用しますが、命名規則を調整して、より広く実装されます。
このチュートリアルでは、テキストのスタイリングの技術であるWebタイポグラフィについて学習します。 印刷機での作業と同様に、コンテンツを設定し、視覚的なスタイルを適用してコンテンツを伝達し、読みやすさと強調のためにコンテンツを調整します。 Web上のテキストのスタイル設定の目的は、色、サイズ、形状、およびスペースを通じて視覚的な階層を作成することです。 このように、見出しは、段落から目立つ小見出しから目立ちます。 これらの概念は、読者がテキストを読みやすくスキャンしやすくするのに役立ちます。
Cupcake Ipsum のプレースホルダーコンテンツで構成されるHTML構造を記述して、チュートリアルを開始します。 さまざまな見出しレベル（h1-h6）およびコンテンツタイプ（p、strong、およびem）を使用して適用しますfont-family、font-size、colorなどの複数のテキスト関連のCSSプロパティ。 また、サードパーティのフォントホスティングサービスである GoogleFontsからカスタムフォントをロードします。 このチュートリアルの各ステップでは、コンテンツに適用する新しい概念または一連のプロパティを紹介します。 最後に、カスタムスタイルのWebページが作成されます。
前提条件
- ローカルマシンに
index.htmlとして保存されたHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLでWebサイトを構築する方法シリーズを試してみてください。
サンプルHTMLの設定
この最初のステップでは、チュートリアルの残りの部分でスタイルを設定するHTMLを設定します。 このチュートリアルのHTMLの目的は、スタイリングを練習するためのさまざまな要素と状況を提供することです。
nano 、 Vim 、 Visual StudioCodeなどのテキストエディターを使用してindex.htmlファイルを開きます。 次のボイラープレートHTMLを追加して、ファイルに必要なベースラインコードを指定します。
index.html
<!doctype html>
<html>
<head>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
<link />要素はすでにstyles.cssファイルにロードされているので、そのファイルも準備しておいてください。
次に、スタイルを設定するためのコンテンツが必要です。 テキストスタイルを作成する場合、コンテンツの準備が整う前にプロジェクトでスタイルが必要になることがよくあります。 グラフィックデザインの世界では、プレースホルダーコンテンツがこの目的で使用されます。 デザイナーは、LoremIpsumとして知られるラテン語のテキストをプレースホルダーとして使用することがよくあります。 Cupcake Ipsum を含む、このプレースホルダーテキストの多くの最新の表現があります。 これは、HTML全体で使用される参照コピーになります。
まず、HTMLは、コンテンツの明確な区別と順序である階層を表す必要があります。 一番上の見出しである<h1>から一番下の見出しである<h6>までの見出しタグを使用して行われるHTML。 見出しのブラウザのデフォルトスタイルは、サイズのみで視覚的階層を定義し、<h1>要素のデフォルトfont-sizeは<h6>のデフォルトよりも大幅に大きくなっています。 このチュートリアル全体を通して、色やスペースなどの他のデザインの原則を使用して、コンテンツに視覚的な階層を提供します。
この階層的なコンテンツを作成するには、さまざまな見出しを書き出し、index.htmlの<body>タグ内のCupcakeIpsumからいくつかの単語を各見出しに入力します。 ブラウザに正確な意味を提供する適切なHTMLセマンティクスに従います。
適切なHTMLセマンティクスを使用するには：
- ページには
<h1>要素が1つだけあります。 これは通常、タイトルになります。 - 後続の見出しレベルは、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つのフォントに、すべての言語のニーズをカバーする文字セットがない場合があります。 フォントスタックには、スタック内のプライマリフォントと同様の特殊文字と視覚的感覚を提供するフォールバックフォントを含めることができます。
index.htmlと同じディレクトリにstyles.cssというファイルを作成します。 テキストエディタで開き、ページのデフォルトフォントを追加します。
styles.css
body {
font-family: "Avenir Next", Calibri, Verdana, sans-serif;
}
このコードでは、font–familyプロパティを持つbodyタイプセレクターから始めます。 次に、フォントスタックについては、"Avenir Next"から始めます。これは、iOSおよびmacOSブラウザーで使用できます。 Avenir Nextは、フォント名が2語であるため、引用符で囲まれています。 次のフォントは、Windowsブラウザ用のCalibriです。 各フォント宣言の間に必ずコンマを入れてください。 より一般的なフォントフォールバックを提供するには、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を開き、<link />がstyles.cssをロードした後、<head>要素にコードを追加します。 何度か戻ってくるので、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は、Public Sansのフォントスタックと、ブラウザのデフォルトの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」を検索します。 これは、ページ上の<h1>から<h6>要素の見出しまたはdisplayフォントになります。
流砂を見つけたら、フォントカードを選択し、セミボールド（600）およびボールド（700）のフォントの太さをパブリックサンと一緒に選択したフォントに追加します。 Google Fontsは、選択したすべてのフォントとバリアントをロードするための新しいURLを提供します。 index.htmlファイルの新しいリンクの以前のhref値を交換します。
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プロパティから、フォントの表示の厚さまたは薄さを変更できます。 font-weightプロパティには、normalとboldの2つの一般的な値があります。 normalの値は、ブラウザのほとんどのテキストのデフォルトのfont-weightです。 bold値は、見出しおよび<strong>要素のデフォルトのfont-weightです。 ただし、このチュートリアルでは、名前normalおよびboldの値の代わりに数値を使用する必要があります。
font-weightの数値は、ロードするフォントによって異なります。 GoogleFontsからPublicSansフォントを追加するときに、通常（400）と太字（700）のウェイトを選択しました。 括弧内の数字は、そのフォントを参照してロードするために必要な値と一致します。 さらに、400のfont-weight値は、700がboldと同等の数値であるように、normalと同等の数値です。 見出し以外のすべてであるPublicSansを使用するテキストは、これらの重みを自動的に使用します。
または、Quicksandフォントの選択には、半太字（600）および太字（700）のフォントの太さが含まれていました。 600の値には対応する数値がないため、数値を使用して定義する必要があります。
まず、すべての見出しのfont-weightを、Quicksandの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バリエーションを使用する場所がまだあります。 まず、styles.cssファイルにh3タイプのセレクターを作成し、セレクターブロックに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ファイルにコンビネーターグループセレクターを作成してから、[を適用する必要があります。 "Quicksand", sans-serifを値として持つX168X]プロパティ：
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です。 フェイクボールドを使用する代わりに、このセレクターのスタイルをイタリック体にしないように変更します。 styles.cssファイルのstrong em, em strongグループセレクターにnormalの値でfont-styleプロパティを追加します。
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プロパティを使用して、ページ全体のコンテンツにさまざまなフォントサイズを適用します。 テキストのサイズは、情報を伝達する上で重要な要素です。 適切なサイズのテキストは読みやすく、適切なサイズの見出しは、情報のスキミングを容易にするための階層を伝えるのに役立ちます。 index.htmlで作成したすべての要素のfont-sizeを変更して、より読みやすいドキュメントを作成します。
body要素にデフォルトのfont-sizeを設定することから始めます。 デフォルトのブラウザfont-sizeは16pxですが、多くのフォントの読みやすさを少し大きくするのに役立ちます。 styles.cssファイルを開き、font-size: 18px;をbody要素に追加します。
styles.css
body {
font-family: "Public Sans", Verdana, sans-serif;
font-size: 18px;
}
...
ブラウザでindex.htmlを開くか、ページを更新してください。 body要素のfont-sizeの変更により、ページ上のすべてのフォントが変更され、サイズが大きくなりました。
要素のデフォルトのフォントサイズは、親要素（この場合は<body>要素）に基づいて比較的サイズが大きくなり、フォントサイズにパーセント値が使用されます。 式(target / base) * 100%を使用すると、<body>要素に設定された基本フォントサイズに相対的なパーセンテージ値が得られます。
この式を試してみるには、<h1>要素のターゲットfont-sizeを45pxに設定します。 式を使用すると、ターゲットサイズは45pxであり、ベースサイズは18pxであるため、この式は(45 / 18) * 100%になり、250%になります。 これは、<h1>の意図されたサイズがベースfont-sizeのサイズの2.5倍になることを意味します。
styles.cssファイルに戻り、h1の要素セレクターを追加し、font-size: 250%;プロパティと値を追加してフォントサイズを設定します。
styles.css
...
h1 {
font-size: 250%;
}
...
<h1>要素の相対フォントサイズを設定したので、残りの見出し要素に同じ式を適用します。 それぞれで、丸めるか、完全な10進値を保持するかを選択できます。 また、ターゲットサイズや数式について説明するコメントを残すことも役立ちます。
styles.cssファイルを開き、h1 font-sizeプロパティの後に、レンダリングされたサイズを説明するコメントを追加することから始めます。 次に、各見出しに式を適用して、h2が36pxに相当するfont-size、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を更新します。 すべての見出しは、<body>要素に設定されているデフォルトのfont-sizeに基づいて、font-sizeを増やします。 次の画像は、この変更がブラウザでどのようにレンダリングされるかを示しています。
この手順では、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を更新します。 コンテンツの色が黒から濃い青緑に変わります。
基本色が設定されたので、他の色の使用を開始して、より視覚的な階層を提供できます。 styles.cssファイルのh1セレクターから始めて、Indigoの値でcolorプロパティを追加します。
styles.css
...
h1 {
font-size: 250%; /* 45px */
color: Indigo;
}
...
styles.cssファイルを保存し、ブラウザに戻って、index.htmlを更新します。 <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プロパティで学習したツールを使用して、テキストを操作できます。あなたのウェブサイトに意味のあるコンテキストを提供するのに役立ちます。 これらのプロパティは、この記事で説明されている見出しに限定されません。テキストを含む任意の要素で使用できます。
CSSチュートリアルをもっと読みたい場合は、CSSトピックページを確認してください。
