ヒーローイメージ

ミディアムサイズ/infoカラー

スタイリングガイド

この部分は<h1>と<p>タグでタイトルとサブタイトル

Section Only

この部分は<h2>と<p>タグでタイトルとサブタイトル

class="section"タグ内のclass="title"class="subtitle"は自動的にカラーリング(色付け)されます。

また、一番最後のclass="subtitle"にはmarginが付きません。

Section with Container

この部分は<h2>と<p>タグでタイトルとサブタイトル

class="section"はタグ内のコンテンツの上下左右に"3rem"のpaddingを設定するだけです。

大きなディスプレイでページを表示した際にコンテンツの横幅を読みやすいように制限するためには、class="section"class="container"をラップします。

このブロックでは、<section class="section"> > <div class="container">とタグづけした場合のレイアウトを確認できます。

(※このブロックはclass="card"でスタイリングしてあります。)

標準コンテンツ(この見出しは"<h3>タグ"+".title")

以下、<div class="content">タグ以下に、クラス名なしの素のHTMLタグで記述したサンプルです。

テキストは「ダミーテキスト」です。
英文のダミーテキストなので日本語文字を使用する場合には印象が変わるかもしれません。

通常本サイトの<p>タグはマージンが付与されませんが、<div class="content">内の<p>タグでは下部にマージンが付与されることに留意してください。

また、リスト要素の<ol>タグには異なるマーカーのスタイル、<div class="content">内の基本文字サイズの大きさ設定も用意されています。公式サイトでその例を参照することができます。

(※このブロックはclass="card"でスタイリングしてあります。)

Hello World

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!

Second level

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.

  • In fermentum leo eu lectus mollis, quis dictum mi aliquet.
  • Morbi eu nulla lobortis, lobortis est in, fringilla felis.
  • Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
  • Ut non enim metus.

Third level

Quisque ante lacus, malesuada ac auctor vitae, congue non ante. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Aenean nec tortor orci.
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  7. Vivamus maximus ultricies pulvinar.
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.

Web
The part of the Internet that contains websites and web pages
HTML
A markup language for creating web pages
CSS
A technology to make HTML look better

Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.

Fourth level

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.

Fifth level

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.

Figure 1: Some beautiful placeholders
Sixth level

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.

飾り付きタイトル
飾り付きタイトル

修飾付きタイトルとサブタイトル

以下のコンテンツは、グリッド状のレイアウトのコーディングサンプルです。
スマートフォンなどのモバイルメディアでは1列のレイアウトに、タブレット以上のデバイスでは2列のレイアウトに自動的に切り替わります。
それぞれのブロックは、「ヘッダー」「コンテンツ」「フッター」のブロックで構成され、ヘッダーやフッターは必要に応じて使用しなくても構いません。

下記がコーディングの基本構成です。
<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>

(※このブロックは ".box" コンテナでラップされたコンテンツの表示サンプルです。)

グリッドレイアウト・コンテンツサンプル 1

下記サンプル例は「モバイル:1列」「<タブレット:2列」の例です。

bookmark_heart ブロックタイトル.1

サンプル画像.6

Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut

bookmark_heart ブロックタイトル.2

サンプル画像.1

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

bookmark_heart ブロックタイトル.3

サンプル画像.2

ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue

bookmark_heart ブロックタイトル.4

サンプル画像.3

est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae

bookmark_heart ブロックタイトル.5

サンプル画像.4

Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.

bookmark_heart ブロックタイトル.6

サンプル画像.5

suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.

グリッドレイアウト・コンテンツサンプル 2

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の公式ドキュメントを参照するとより詳しい方法を知ることができます。

image place-holder 4x3

タイトル.1

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 16x9

タイトル.2

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.3

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.4

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.5

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.6

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.7

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.8

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.9

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.10

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.11

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5
image place-holder 4x3

タイトル.12

  • リストサンプル.1
  • リストサンプル.2
  • リストサンプル.3
  • リストサンプル.4
  • リストサンプル.5

list_alt マーカー付タイトル・デザインサンプル(GoogleFontsを配置する場合)

マーカー付タイトル・デザインサンプル(CSS擬似要素を使用する場合)

マーカー付タイトル・デザインサンプル(CSS擬似要素を使用する場合)

どんなタグ要素でも.titleを付与すると「見出しタイトル」としてスタイリングされます。
section.section > div.container > .titleのようにタイトルクラスを付与した要素を配置すると自動的にサイズを調整しテーマカラーにカラーリングします。
.section > .container外に配置した場合は、.titleクラスを付与してもサイズとカラーは調整されません。
.titleクラスを付与した要素に.w-marker-list.w-marker-bookmarkを付与すると、list_altbookmark_heartのアイコンが自動的に付与されます。
擬似要素を使用してタイトルにマーカーを付与した場合は、マーカーの大きさに対応したインデントが設定されタイトルが長くなって複数の行にまたがる場合でもタイトルが頭揃えされるようになります。
アイコンを実体として配置した場合はマニュアル操作でインデントを設定する必要があります。

写真ギャラリー・コーディングサンプル

グリッドレイアウトを使用した写真ギャラリーです。

▼.cardを使用した正方形の写真ギャラリー

表示方法は「アイテムの横幅」を制御する方式

画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ

▼.cardを使用した正方形の写真ギャラリーを.boxでラップした場合

表示方法は「カラム数」を自動制御する方式

画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ
画像プレースホルダーイメージ

▼写真のアスペクト比を保ったグリッドギャラリー

表示方法は「アイテムの横幅」を制御する方式

サンプル画像.1
サンプル画像.2
サンプル画像.3
サンプル画像.4
サンプル画像.5
サンプル画像.6

▼写真のアスペクト比を保ったまま表示は4:3のフレームに収めた例

表示方法は「アイテムの横幅」を制御する方式 + ".box"でラップ

サンプル画像.1
サンプル画像.2
サンプル画像.3
サンプル画像.4
サンプル画像.5
サンプル画像.6

▼写真のアスペクト比を保ったまま表示は16:9のフレームに収めた例

表示方法は「カラム数」を自動制御する方式 + 写真に角丸付与

サンプル画像.1
サンプル画像.2
サンプル画像.3
サンプル画像.4
サンプル画像.5
サンプル画像.6

メインコンテンツ・デザインサンプル

ページ内のメインコンテンツのスタイリングを定義します。

デフォルトレイアウト

サンプル画像

メインコンテンツ(.primary-content)は、画像とテキストを組み合わせたレイアウトで構成されます。
デフォルトレイアウトでは、画像が左側に配置され、テキストが右側に配置されます。
テキスト部分を ".content" クラスでラップすることで、「標準コンテンツ」のスタイリングを適用します。
「標準コンテンツ」とすることで、基本的なタグづけのみで標準的なスタイリングが適用されます。

写真右寄せレイアウト

サンプル画像

写真を右寄せにするには、".primary-content" クラスに加えて ".text-first" クラスを割り当てます。

コンテンツのコーディングは、デフォルトレイアウトと同じように「画像 > テキストコンテンツ」の順に記述します。

デフォルトレイアウトでも写真右寄せレイアウトでも、モバイル端末の表示では画像は常に上部に配置されます。

.boxクラスでラップする例

サンプル画像

必要に応じて、".box" クラスでラップしてボックススタイルを適用することもできます。
この場合 ".primary-content" クラスはボックスの中に配置されます。
また、このブロックの例では画像の表示アスペクトを16:9に指定しています。

動画コンテンツを埋め込む例

このブロックでは動画コンテンツを埋め込む例を示しています。
動画部分が目立つように、".primary-content" クラスに ".even" クラスを追加して左右のグリッド幅を等しくしています。

写真の表示方法 -表示枠とアスペクト比について-

".my-image"と".ratio-*"の使用方法

ヒーローイメージ・アニメーションテスト

cssアニメーションの実装テスト

開盛機械工業社屋
開盛機械工業敷地全景
開盛機械工業社訓

開盛機械工業株式会社/株式会社開盛リース

土木建設業界と共に歩み高品質なサービスを提供します

コンテナ内ヒーローイメージ・デザインサンプル

ヒーローイメージをコンテナ内に配置したデザインサンプル

ヒーローコンテナ内に表示されているイメージは、スタイルシートのbackgroundプロパティで指定しています。

ヒーローイメージ内にコンテンツを配置するとヒーローコンテナの高さは、コンテンツに合わせて拡大縮小します。

.w-veil.veil-lightを同時に組み合わせて使用すると背景写真に靄がかかったような効果が出ます。.veil-darkと組み合わせると背景画像を暗くする効果が出ます。

.w-veilだけだと何も効果は現れません。

フルサイズボタン・デザインサンプル▼

お問合せ

フルサイズボタン・デザインサンプル▼

お問合せ