メッセージ
ページの一部を強調するための、色付きのメッセージブロック
Bulmaのmessageは、複数のパーツからなるコンポーネントです
messageコンテナdelete要素を保持できる、オプションのmessage-headermessage-body例
こんにちは世界
HTML
<article class="message">
<div class="message-header">
<p>Hello World</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>メッセージコンポーネントは、$colors Sassマップで定義されているすべての異なる色で使用できます。
例
ダーク
HTML
<article class="message is-dark">
<div class="message-header">
<p>Dark</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
リンク
HTML
<article class="message is-link">
<div class="message-header">
<p>Link</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
プライマリ
HTML
<article class="message is-primary">
<div class="message-header">
<p>Primary</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
情報
HTML
<article class="message is-info">
<div class="message-header">
<p>Info</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
成功
HTML
<article class="message is-success">
<div class="message-header">
<p>Success</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
警告
HTML
<article class="message is-warning">
<div class="message-header">
<p>Warning</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
危険
HTML
<article class="message is-danger">
<div class="message-header">
<p>Danger</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>不要な場合はmessage-headerを削除できます。これにより、message-bodyに左側の境界線が追加されます
例
HTML
<article class="message">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-dark">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-link">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-primary">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-info">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-success">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-warning">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>例
HTML
<article class="message is-danger">
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus
diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac
<em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et
sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a
neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
</div>
</article>messageコンポーネントに3つのサイズ修飾子のいずれかを追加できます
例
小メッセージ
HTML
<article class="message is-small">
<div class="message-header">
<p>Small message</p>
<button class="delete is-small" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>例
通常メッセージ
HTML
<article class="message">
<div class="message-header">
<p>Normal message</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>例
中メッセージ
HTML
<article class="message is-medium">
<div class="message-header">
<p>Medium message</p>
<button class="delete is-medium" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>例
大メッセージ
HTML
<article class="message is-large">
<div class="message-header">
<p>Large message</p>
<button class="delete is-large" aria-label="delete"></button>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec
nulla.Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur.
Aenean ac <em>eleifend lacus</em>, in mollis lectus.
</div>
</article>|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Sass変数
|
CSS変数
|
値
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|