Bulma-components-message
提供：Dev Guides
ブルマ-メッセージ
説明
Bulmaは、article_タグの_message_クラスを使用して、ページの外観を向上させるメッセージブロックを提供します。 Bulmaでは、_is-dark _、 is-primary 、 is-link 、 is-info 、 is-success 、 is-warning 、 is-danger_などのさまざまなタイプの修飾子を使用して、メッセージボックスの色を変更することもできます。
以下の例は、ページ内のメッセージの表示を示しています-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Message Block
</span>
<br>
<br>
<article class = "message">
<div class = "message-header">
<p>Basic Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<br>
<br>
<span class = "title">
Message Block Colors
</span>
<br>
<br>
<article class = "message is-primary">
<div class = "message-header">
<p>Primary Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-header">
<p>Link Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text .This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-header">
<p>Info Message Box</p>
<button class = "delete" aria-label="delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>以下の出力が表示されます-
上記の例では、is-primary _、 is-link 、 is-info_修飾子のみを使用しました。 残りの修飾子を使用する場合は、それらの修飾子をarticleタグの_message_クラスとともに使用します。
メッセージ本文
次の例に示すように、_message-header_修飾子を含めずにメッセージ本文のみを表示できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Message Body
</span>
<br>
<br>
<article class = "message">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-primary">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-link">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-info">
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>以下の出力が表示されます-
メッセージブロックサイズ
次の例に示すように、is-small _、 is-medium 、 is-large_修飾子を使用して、メッセージボックスのサイズを変更できます-
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<title>Bulma Elements 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">
Message Block Sizes
</span>
<br>
<br>
<article class = "message is-small">
<div class = "message-header">
<p>Small Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-medium">
<div class = "message-header">
<p>Medium Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
<article class = "message is-large">
<div class = "message-header">
<p>Large Message Box</p>
<button class = "delete" aria-label = "delete"></button>
</div>
<div class = "message-body">
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
This is simple text. This is simple text. This is simple text.
</div>
</article>
</div>
</section>
</body>
</html>上記のコードを実行すると、以下の出力が得られます-
