CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS太字：フォントの太さを使用するためのガイド

CSSの太字のテキスト効果を作成するには、font-weightプロパティを使用する必要があります。 font-weightプロパティは、フォントの「太さ」、つまりそのフォントがどの程度太字で表示されるかを決定します。キーワードまたは数値を使用して、テキストの太字をCSSに指示できます。

開発者として、ウェブサイトをレイアウトする際に、何かに注意を向けたい場合があります。それを行うにはいくつかの方法があります。最も基本的な方法は、フォントの太さを増やすことです。 強調したいテキストの。これは、テキストを太字で表示することを意味します。

この記事では、font-weightとその設定方法について説明し、プロパティに使用できるさまざまな値を示します。

CSS太字：ガイド

font-weightプロパティは、画面に太字のテキストを表示する方法を設定します。キーワードまたは数値のいずれかを使用して、特定のテキストセットをどの程度太字にするかをCSSに指示できます。

CSSfont-weightプロパティの構文は次のとおりです。

font-weight: weightOfFont;

weightOfFontの値は、スタイルが適用される要素に使用するフォントの太さです。

font-weightプロパティは、特定の要素に設定するfont-weightに応じて、いくつかの異なる値を受け入れます。

CSSボールドスケール

フォントファミリーは、太字のスケールで100〜1000のスケールを持っていると考えてください。数字が大きいほど、フォントは太字になります。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

好みのフォントファミリについて調べてください。これにより、結果がサイトで希望するほど明るくまたは大胆になることが確実になります。一部のフォントファミリは、スケール全体を利用していません。

次のコードは、数字とキーワードの両方を使用して、「Arial」と呼ばれる人気のあるフォントがどれだけ明るく、どれだけ暗くなるかを示しています。

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>repl.it</title>
   <style>
     body {
       font-family: 'Arial';
       font-size: 3rem;
     }
 
     span {
       font-size: 1.5rem;
     }
 
     p:nth-child(1) {
       font-weight: normal;
     }
     p:nth-child(2) {
       font-weight: bold;
     }
     p:nth-child(3) span {
       font-weight: bolder;
     }
     p:nth-child(4) span {
       font-weight: lighter;
     }
     p:nth-child(5) {
       font-weight: 100;
     }
     p:nth-child(6) {
       font-weight: 200;
     }
     p:nth-child(7) {
       font-weight: 300;
     }
     p:nth-child(8) {
       font-weight: 400;
     }
     p:nth-child(9) {
       font-weight: 500;
     }
     p:nth-child(10) {
       font-weight: 600;
     }
     p:nth-child(11) {
       font-weight: 700;
     }
     p:nth-child(12) {
       font-weight: 800;
     }
     p:nth-child(13) {
       font-weight: 900;
     }
 
   </style>
 </head>
 <body>
   <p>Hello World! <span>-- Normal</span></p>
   <p>Hello World! <span>-- Bold</span></p>
   <p>Hello World!
     <span>-- Bolder
     <br>
     &nbsp;     
     &nbsp;
     &nbsp;
     &nbsp;
     -- child is bolder than parent
     </span></p>
   <p>Hello World! <span>-- Lighter 
     <br>
     &nbsp;     
     &nbsp;
     &nbsp;
     &nbsp;
     -- child is lighter than parent
     </span>
   </p>
   <p>Hello World! <span>-- 100</span></p>
   <p>Hello World! <span>-- 200</span></p>
   <p>Hello World! <span>-- 300</span></p>
   <p>Hello World! <span>-- 400 'normal'</span></p>
   <p>Hello World! <span>-- 500</span></p>
   <p>Hello World! <span>-- 600</span></p>
   <p>Hello World! <span>-- 700 'bold'</span></p>
   <p>Hello World! <span>-- 800</span></p>
   <p>Hello World! <span>-- 900</span></p>
 
 </body>
</html>

ライターとボールダー：実際にはどういう意味ですか？

ここで指摘する必要がある主なことは、より明るく大胆なものは直訳ではないということです。ここで太字は「太字より太字」を意味するものではありません。

より大胆でより軽いとは、この文脈では、実際には、親要素との関係でそれらがどれほど大胆であるか、またはどれほど軽いかを意味します。したがって、子要素を太字にすると、親よりも1つの相対的なフォントの太さが暗くなります。同じことが、明るくなります。

相対的なフォントの太さは次のとおりです。

相対的なフォントの太さ 実際のフォントの太さ
薄い 100
通常 400
太字 700
重い 900

したがって、font-weight：boldプロパティを使用して、テキストの段落のフォントの太さを800に設定できます。子が親よりも相対的な太さの1つ大きい場合、上の表を使用して、太字にする方法を計算します。

たとえば、フォントの太さが400の親を持つ子がいるとします。子のフォントの太さの値を太字に設定すると、子のフォントの太さは700になります。

これは、子が親よりも1つの相対的なフォントの太さであるためです。親がすでに可能な限り暗いまたは明るい場合、これらのプロパティ値は何もしません。

CSSフォントの太さの例

地元の切手協会であるシアトル切手クラブのウェブサイトをデザインしているとします。切手協会からAboutUsの作成を依頼されました Aboutに向かう 彼らのウェブサイトのページは太字で表示されます。これにより、訪問者の注意を見出しに引き付けることができます。

スタンプクラブから、クラブの歴史を記したテキストのブロックをウェブサイトに追加するように依頼されました。このテキストブロックは、通常のフォントの太さで表示されます。クラブが視聴者の注意を引き付けたい特定のフレーズは、太字で表示する必要があります。

次のコードを使用して、特定のフレーズを太字にして、このテキストブロックを作成できます。

<html>

<p>The Seattle Stamp Club, established in 2009, is a community that encourages and promotes the collection of stamps. The Club <span>welcomes all</span>, from beginners to experts, and hosts monthly meetings where members can show each other their stamps, discuss the latest news in stamps, and bond over their shared interests. Right now, the club has <span>250 members</span>.</p>

<style>

span {
	font-weight: bolder;
}

CSS太字：フォントの太さを使用するためのガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

HTMLファイルでは、

タグで囲まれたテキストの段落を定義しました。また、特定のフレーズをタグで囲み、CSSコードで太字にします。

次に、CSSファイルで、すべてのタグのフォントスタイルの重みを太字に設定するスタイルルールを定義しました。 。これは、タグで囲まれたテキストが、親要素よりも太字で表示されることを意味します。

コードを実行すると、段落は通常のフォントの太さで表示され、タグで囲まれたフレーズは太字で表示されます。この例では、フレーズはすべてを歓迎します および250人のメンバー タグで囲まれています。

可変フォントを使用した太字のCSS

最新レベルのCSSフォントを通じて利用できる新しいフォントがいくつかあります。それらは可変フォントと呼ばれ、任意のを取ることができます フォントの太さとして1から1000までの数字。ブラウザのサポートは2020年5月まで完全に実装されていなかったため、かなり新しいものです。可変フォントの詳細については、この紹介をご覧ください。

結論

このチュートリアルでは、CSSのfont-weightプロパティと、それがフォントの太さにどのように影響するかについて説明しました。

太字で明るいということは、親要素のフォントの太さから1つの相対的なフォントの太さを意味することを学びました。実際には、テキストがどのように見えるかを確認するために、さまざまなフォントの太さを確認しました。すぐにフォントの太さでフォントをスタイリングするプロになります！

CSSでのコーディングの詳細については、CSSの学習方法に関するガイドをご覧ください。 CSSに依存せずにテキストを太字にしたい場合は、HTMLで太字のテキストを作成する方法に関するガイドを読むことができます。


  1. RGBAを使用したCSSの透明性

    CSSの透過性にはRGBA（）値を使用します。アルファチャネルパラメータを設定して、色の不透明度を指定します。 以下は、RGBAを使用してCSS透過性を実装するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 200px;    heigh

  2. CSSでのデータ属性（data- *）の使用

    data- *属性を使用して、要素に関する追加情報を格納できます。次の例は、CSSデータ-*属性を示しています。 例 <!DOCTYPE html> <html> <head> <style> dl {    margin: 2%; } p {    width: 60%;    background-color: lightgreen;    padding: 2%;    color: white;    text-alig