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>次のように出力が表示されます-
