タイトル.1
- リストサンプル.1
- リストサンプル.2
- リストサンプル.3
- リストサンプル.4
- リストサンプル.5
ヒーローイメージ
ミディアムサイズ/infoカラー
この部分は<h1>と<p>タグでタイトルとサブタイトル
この部分は<h2>と<p>タグでタイトルとサブタイトル
class="section"タグ内のclass="title"とclass="subtitle"は自動的にカラーリング(色付け)されます。
また、一番最後のclass="subtitle"にはmarginが付きません。
この部分は<h2>と<p>タグでタイトルとサブタイトル
class="section"はタグ内のコンテンツの上下左右に"3rem"のpaddingを設定するだけです。
大きなディスプレイでページを表示した際にコンテンツの横幅を読みやすいように制限するためには、class="section"でclass="container"をラップします。
このブロックでは、<section class="section"> > <div class="container">とタグづけした場合のレイアウトを確認できます。
(※このブロックはclass="card"でスタイリングしてあります。)
以下、<div class="content">タグ以下に、クラス名なしの素のHTMLタグで記述したサンプルです。
テキストは「ダミーテキスト」です。
英文のダミーテキストなので日本語文字を使用する場合には印象が変わるかもしれません。
通常本サイトの<p>タグはマージンが付与されませんが、<div class="content">内の<p>タグでは下部にマージンが付与されることに留意してください。
また、リスト要素の<ol>タグには異なるマーカーのスタイル、<div class="content">内の基本文字サイズの大きさ設定も用意されています。公式サイトでその例を参照することができます。
(※このブロックはclass="card"でスタイリングしてあります。)
Lorem ipsum[1] dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Subscript works as well!
Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.
Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.
<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p> </body> </html>
Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
| One | Two |
|---|---|
| Three | Four |
| Five | Six |
| Seven | Eight |
| Nine | Ten |
| Eleven | Twelve |
Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
修飾付きタイトルとサブタイトル
<div class="my-grid">
<div class="my-cell">
<div class="my-cell-header">
<h3 class="title">ブロックタイトル</h3>
</div>
<div class="my-cell-content">
<!-- コンテンツ -->
</div>
<div class="my-cell-footer">
<!-- フッター -->
</div>
</div>
</div>
下記サンプル例は「モバイル:1列」「<タブレット:2列」の例です。
Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut
sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius
ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae
Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.
Blumaの.gird + .cardクラスを使用
下記サンプル例ではカスタムのグリッドレイアウト(.my-grid)ではなくBlumaネイティブの.girdクラスを使用しています。
ただし、.gridクラス内に配置する.cardはカスタマイズしてあります。
デフォルトのまま使用すると、様々なアスペクトの画像を配置した際にコンテンツ部分の高さが横のカードと揃わなくなることがあります。
これを防ぐために、.cardクラスと.card-contentクラスをカスタマイズし、必ず隣り合ったカードの高さが揃うように調整しています。カスタマイズを反映させるには、.gridクラスに.w-cardクラスを追加します。
配置するカードの幅をコントロールするには、.gridクラスに、.is-col-min-*クラスを付与します。(「*」は1〜32までの数字)下記サンプルでは何も割り当てていませんが、これはデフォルトで.is-col-min-6(9文字分の幅)をしていることと同じ状態を意味します。(Bulma公式ドキュメント参照)
.card-imageに配置する画像は<figure class="image">タグでラップします。こうすることで、配置する画像のレイアウト制御がしやすくなります。<figure class="images is-square">や<figure class="images is-1by1">のように記述すれば画像のサイズやアスペクト比に関わらず画像を正方形の枠内に表示させることができますし、その他のアスペクト比で指定した形に切り取って表示させることができます。
画像の表示方法に関してはBulmaの公式ドキュメントを参照するとより詳しい方法を知ることができます。
タイトル.1
タイトル.2
タイトル.3
タイトル.4
タイトル.5
タイトル.6
タイトル.7
タイトル.8
タイトル.9
タイトル.10
タイトル.11
タイトル.12
マーカー付タイトル・デザインサンプル(CSS擬似要素を使用する場合)
.titleを付与すると「見出しタイトル」としてスタイリングされます。section.section > div.container > .titleのようにタイトルクラスを付与した要素を配置すると自動的にサイズを調整しテーマカラーにカラーリングします。.section > .container外に配置した場合は、.titleクラスを付与してもサイズとカラーは調整されません。.titleクラスを付与した要素に.w-marker-listや.w-marker-bookmarkを付与すると、list_altやbookmark_heartのアイコンが自動的に付与されます。グリッドレイアウトを使用した写真ギャラリーです。
表示方法は「アイテムの横幅」を制御する方式
表示方法は「カラム数」を自動制御する方式
表示方法は「アイテムの横幅」を制御する方式
表示方法は「アイテムの横幅」を制御する方式 + ".box"でラップ
表示方法は「カラム数」を自動制御する方式 + 写真に角丸付与
ページ内のメインコンテンツのスタイリングを定義します。
メインコンテンツ(.primary-content)は、画像とテキストを組み合わせたレイアウトで構成されます。
デフォルトレイアウトでは、画像が左側に配置され、テキストが右側に配置されます。
テキスト部分を ".content" クラスでラップすることで、「標準コンテンツ」のスタイリングを適用します。
「標準コンテンツ」とすることで、基本的なタグづけのみで標準的なスタイリングが適用されます。
写真を右寄せにするには、".primary-content" クラスに加えて ".text-first" クラスを割り当てます。
コンテンツのコーディングは、デフォルトレイアウトと同じように「画像 > テキストコンテンツ」の順に記述します。
デフォルトレイアウトでも写真右寄せレイアウトでも、モバイル端末の表示では画像は常に上部に配置されます。
必要に応じて、".box" クラスでラップしてボックススタイルを適用することもできます。
この場合 ".primary-content" クラスはボックスの中に配置されます。
また、このブロックの例では画像の表示アスペクトを16:9に指定しています。
このブロックでは動画コンテンツを埋め込む例を示しています。
動画部分が目立つように、".primary-content" クラスに ".even" クラスを追加して左右のグリッド幅を等しくしています。
".my-image"と".ratio-*"の使用方法
cssアニメーションの実装テスト



開盛機械工業株式会社/株式会社開盛リース
土木建設業界と共に歩み高品質なサービスを提供します
ヒーローイメージをコンテナ内に配置したデザインサンプル
ヒーローコンテナ内に表示されているイメージは、スタイルシートのbackgroundプロパティで指定しています。
ヒーローイメージ内にコンテンツを配置するとヒーローコンテナの高さは、コンテンツに合わせて拡大縮小します。
.w-veilと.veil-lightを同時に組み合わせて使用すると背景写真に靄がかかったような効果が出ます。.veil-darkと組み合わせると背景画像を暗くする効果が出ます。
.w-veilだけだと何も効果は現れません。