Bulma-color-typography-helpers

提供：Dev Guides
移動先:案内、検索

Bulma-色とタイポグラフィのヘルパー

説明

_color_ヘルパーを使用して、テキストまたは背景の色を変更できます。

テキストの色

S.No. Class Color
1 has-text-white hsl(0, 0%, 100%)
2 has-text-black hsl(0, 0%, 4%)
3 has-text-light hsl(0, 0%, 96%)
4 has-text-dark hsl(0, 0%, 21%)
5 has-text-primary hsl(171, 100%, 41%)
6 has-text-info hsl(204, 86%, 53%)
7 has-text-link hsl(217, 71%, 53%)
8 has-text-success hsl(141, 71%, 48%)
9 has-text-warning hsl(48, 100%, 67%)
10 has-text-danger hsl(348, 100%, 61%)
11 has-text-black-bis hsl(0, 0%, 7%)
12 has-text-black-ter hsl(0, 0%, 14%)
13 has-text-grey-darker hsl(0, 0%, 21%)
14 has-text-grey-dark hsl(0, 0%, 29%)
15 has-text-grey hsl(0, 0%, 48%)
16 has-text-grey-light hsl(0, 0%, 71%)
17 has-text-grey-lighter hsl(0, 0%, 86%)
18 has-text-white-ter hsl(0, 0%, 96%)
19 has-text-white-bis hsl(0, 0%, 98%)

背景色

S.No. Class Color
1 has-background-white hsl(0, 0%, 100%)
2 has-background-black hsl(0, 0%, 4%)
3 has-background-light hsl(0, 0%, 96%)
4 has-background-dark hsl(0, 0%, 21%)
5 has-background-primary hsl(171, 100%, 41%)
6 has-background-info hsl(204, 86%, 53%)
7 has-background-link hsl(217, 71%, 53%)
8 has-background-success hsl(141, 71%, 48%)
9 has-background-warning hsl(48, 100%, 67%)
10 has-background-danger hsl(348, 100%, 61%)
11 has-background-black-bis hsl(0, 0%, 7%)
12 has-background-black-ter hsl(0, 0%, 14%)
13 has-background-grey-darker hsl(0, 0%, 21%)
14 has-background-grey-dark hsl(0, 0%, 29%)
15 has-background-grey hsl(0, 0%, 48%)
16 has-background-grey-light hsl(0, 0%, 71%)
17 has-background-grey-lighter hsl(0, 0%, 86%)
18 has-background-white-ter hsl(0, 0%, 96%)
19 has-background-white-bis hsl(0, 0%, 98%)

タイポグラフィヘルパー

タイポグラフィヘルパーは、テキストのサイズと色を変更するために使用されます。 ブルマには、以下の表に示すように7種類のサイズが含まれています-

S.No. Class Font Size
1 is-size-1 3rem
2 is-size-2 2.5rem
3 is-size-3 2rem
4 is-size-4 1.5rem
5 is-size-5 1.25rem
6 is-size-6 1rem
7 is-size-7 0.75rem

上記のサイズを使用して簡単な例を作成しましょう- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>

   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-1">
               7 types of sizes
            </span><br><br>

            <span class = "is-size-1">
               finddevguides
            </span><br>

            <span class = "is-size-2">
               finddevguides
            </span><br>

            <span class = "is-size-3">
               finddevguides
            </span><br>

            <span class = "is-size-4">
               finddevguides
            </span><br>

            <span class = "is-size-5">
               finddevguides
            </span><br>

            <span class = "is-size-6">
               finddevguides
            </span><br>

            <span class = "is-size-7">
               finddevguides
            </span><br>
         </div>
      </section>
   </body>
</html>

以下に示すように出力が表示されます-

色

Bulmaは、コンテナ内の要素を設定するためのさまざまなタイプのカラークラスを提供します。 上記の_Text Color_セクションを参照して、以下に示すようにカラークラスを使用して例を作成します- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Typography Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text color using color classes
            </span>
            <br>

            <span class = "has-text-primary">
               finddevguides
            </span><br>

            <span class = "has-text-link">
               finddevguides
            </span><br>

            <span class = "has-text-black-bis">
               finddevguides
            </span><br>

            <span class = "has-text-grey">
               finddevguides
            </span><br>

            <span class = "has-text-grey-lighter">
               finddevguides
            </span><br>

            <span class = "has-text-danger">
               finddevguides
            </span>
         </div>
      </section>
   </body>
</html>

次のように出力が表示されます-

アライメント

Bulmaには、コンテナ内のテキストを配置するための4種類の配置ヘルパーが用意されています。

S.No. Class Alignment
1 has-text-centered Display the text in the center.
2 has-text-justified Display the text as justified.
3 has-text-left Display the text to the left side.
4 has-text-right Display the text to the right side.

上記の整列クラスを使用して簡単な例を作成しましょう- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Alignment Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Alignment
            </span>
            <br>
            <br>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-centered"> has-text-centered</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-justified"> has-text-justified</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-left"> has-text-left</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-right"> has-text-right</p>
               </div>
            </div>
         </div>
      </section>

   </body>
</html>

次のように出力が表示されます-

テキスト変換

Bulmaには、コンテナ内のテキストを変換するための4種類のテキスト変換ヘルパーが用意されています。

S.No. Class Transformation
1 is-capitalized It transforms the first character of each word to uppercase.
2 is-lowercase It defines all the characters to lowercase.
3 is-uppercase It defines all the characters to uppercase.
4 is-italic It defines all the characters to italic.

上記のテキスト変換クラスを使用して簡単な例を作成しましょう- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Transformation Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text Transformation
            </span><br><br>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-capitalized"> is-capitalized</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-lowercase"> is-lowercase</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-uppercase"> is-uppercase</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info is-italic"> has-is-italic</p>
               </div>
            </div>
         </div>
      </section>

   </body>
</html>

次のように出力が表示されます-

テキストの重み

Bulmaには、コンテナ内のテキストの重みを変換する4種類のテキストの重みヘルパーが用意されています。

S.No. Class Alignment
1 has-text-weight-light It displays the text weight as light.
2 has-text-weight-normal It displays the text weight as normal.
3 has-text-weight-semibold It displays the text weight as semi-bold (not thick as bold).
4 has-text-weight-bold It displays the text weight as bold.

上記のテキストの重みクラスを使用して簡単な例を作成しましょう- 

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Text Weight Helpers Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Text Weight
            </span>
            <br>
            <br>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-light"> has-text-weight-light</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-normal"> has-text-weight-normal</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-semibold"> has-text-weight-semibold</p>
               </div>
            </div>

            <div class = "columns">
               <div class = "column is-5">
                  <p class = "has-text-black has-background-info has-text-weight-bold"> has-text-weight-bold</p>
               </div>
            </div>
         </div>
      </section>

   </body>
</html>

次のように出力が表示されます-

「https://www.finddevguides.com/index.php?title=Bulma-color-typography-helpers&oldid=20470」から取得
Powered by MediaWiki