ブロークングリッドレイアウト、聞きなれないですね。

TOPページでは、要素内に背景画像を設定し、その上にテキストを重ねて配置する方法を学びました。

今回は、レイアウトをあえて崩して魅せる方法を学びます。

*-*-* Chapter24 *-*-*

ブロークングリッドレイアウトを作る

目次

1. ブロークングリッドレイアウトとは
2. レイアウトの土台をhtmlでマークアップしよう
3. 背景画像のサイズを「contain」にしてみよう
4. 要素に角丸を適用する
5. タイトルを2行にしよう
6. インライン要素とブロック要素を学ぼう
   1. インライン要素とは
   2. ブロック要素とは
7. インライン要素をブロック要素に変えてみよう
8. 文章の一部を目立たせたい

SAKUWEB さくうぇぶ

ブロークングリッドレイアウトとは

グリッドシステムは、要素を規則正しく整列させるレイアウトでした。

作りやすい反面、単調になりやすいのでユーザーを惹きつける効果が薄くなりがちです。

そこで、あえて崩してレイアウトすることで、印象的な動きのあるデザインを作り出すことができます。

碁盤の目のようなレイアウトから、雑誌のようなレイアウトにするのがブロークングリッドレイアウトです。

01・02・03番は、それぞれ先頭の位置がズレていますね。

このズレに対して、見た人の違和感を利用して視線を誘導することができます。

ブロークングリッドレイアウトは、いろんなサイトが採用していますので、作っていきましょう。

レイアウトの土台をhtmlでマークアップしよう

まずは、デザイン画像を見ながらHTMLで必要なパーツをレイアウトします。

　

背景画像を配置して、

テキストのパーツをズラして配置しています。

　

テキストパーツには、

背景を白色に、角を丸くさせました。

　

さらに、「ぐっすりスヤスヤ」の部分だけフォントスタイルを変えています。

以下の流れで、ヒントも見ながらコーディングしてみてください。

1）コンテナはフル幅になっています。

　フル幅でコーディングするには、親タグにBootstrapのクラス名を付与します。

2）画像自体は背景に入れるのでcssで指定します。

　この画像はここにしか使わないので、固有のクラス名が必要です。

3）テキストパーツの左右に余白を設けます。

　有効幅を「col-10」にして、空白カラムを設けましょう。

4）テキストパーツの背景は白色です。

　背景色を白にする場合、Bootstrapのクラス名を付与します。

5）タイトルはh2タグでマークアップし、中央寄せにします。

「ぐっすりスヤスヤ」「癒されるかわいい寝顔！」

6）「ぐっすりスヤスヤ」のみspanタグでマークアップします。

　あとで、spanタグにcssでデザインやフォントスタイルを充てます。

7）本文はpタグでマークアップします。※文章は自由に入力してOKです。

—-　本文　—-

ふかふかのベッドでスヤスヤ眠る愛猫の寝顔って、たまらなく可愛いですよね。
ネコも飼い主も、至福の時間です！

ネコは1日12～16時間も眠る動物です。
 
長時間の睡眠を、より快適にしてあげたい！！
ベットは常に清潔にしてあげたい！！
肌触りのやさしいベッドにしたあげたい！！

8）本文の最後「愛猫も飼い主もうれしくなる快適ベッドを作りました。」は、pタグでマークアップします。

　この一文だけフォントサイズを大きくするため、本文とは切り離します。

それでは正解です。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white">
      <h2 class="text-center"><span>ぐっすりスヤスヤ</span>癒されるかわいい寝顔！</h2>
      <p>ふかふかのベッドでスヤスヤ眠る愛猫の寝顔って、たまらなく可愛いですよね。<br>ネコも飼い主も、至福の時間です！<br>&nbsp;<br>ネコは1日12～16時間も眠る動物です。<br>&nbsp;<br>長時間の睡眠を、より快適にしてあげたい！！<br>ベットは常に清潔にしてあげたい！！<br>肌触りのやさしいベッドにしたあげたい！！</p>
      <p>愛猫も飼い主もうれしくなる快適ベッドを作りました。</p>
    </div>
  </div>
</div>

ひとつずつ見ていきましょう。

1）コンテナはフル幅になっています。

　クラス名「container-fluid」を付与します。

<div class="container-fluid">
  <div class="row">
  </div>
</div>

2）画像自体は背景に入れるのでcssで指定します。

　個別のクラス名「catbed-intro」を親タグに付与します。※クラス名は任意でOKです。

<div class="container-fluid catbed-intro">
  <div class="row">
  </div>
</div>

3）テキストパーツの左右に余白を設けます。

　有効幅を「col-10」にした場合、空白カラムは「 offset-1」に設定します。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1"></div>
  </div>
</div>

4）テキストパーツの背景は白色です。

　クラス名「 bg-white」に設定します。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white"></div>
  </div>
</div>

5）タイトルはh2タグでマークアップし、中央寄せにします。

　クラス名「text-center」で中央寄せにします。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white">
      <h2 class="text-center">ぐっすりスヤスヤ 癒されるかわいい寝顔！</h2>
    </div>
  </div>
</div>

6）「ぐっすりスヤスヤ」のみspanタグでマークアップします。

　h2タグの中の「ぐっすりスヤスヤ」のみ、spanタグで囲みます。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white">
      <h2 class="text-center"><span>ぐっすりスヤスヤ</span>癒されるかわいい寝顔！</h2>
    </div>
  </div>
</div>

7）本文はpタグでマークアップします。※文章は自由に入力してOKです。

改行する時はbrタグを使用します。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white">
      <h2 class="text-center"><span>ぐっすりスヤスヤ</span>癒されるかわいい寝顔！</h2>
      <p>ふかふかのベッドでスヤスヤ眠る愛猫の寝顔って、たまらなく可愛いですよね。<br>ネコも飼い主も、至福の時間です！<br>&nbsp;<br>ネコは1日12～16時間も眠る動物です。<br>&nbsp;<br>長時間の睡眠を、より快適にしてあげたい！！<br>ベットは常に清潔にしてあげたい！！<br>肌触りのやさしいベッドにしたあげたい！！</p>
    </div>
  </div>
</div>

8）本文の最後「愛猫も飼い主もうれしくなる快適ベッドを作りました。」は、pタグでマークアップします。

<div class="container-fluid catbed-intro">
  <div class="row">
    <div class="col-10 offset-1 bg-white">
      <h2 class="text-center"><span>ぐっすりスヤスヤ</span>癒されるかわいい寝顔！</h2>
      <p>ふかふかのベッドでスヤスヤ眠る愛猫の寝顔って、たまらなく可愛いですよね。<br>ネコも飼い主も、至福の時間です！<br>&nbsp;<br>ネコは1日12～16時間も眠る動物です。<br>&nbsp;<br>長時間の睡眠を、より快適にしてあげたい！！<br>ベットは常に清潔にしてあげたい！！<br>肌触りのやさしいベッドにしたあげたい！！</p>
      <p>愛猫も飼い主もうれしくなる快適ベッドを作りました。</p>
    </div>
  </div>
</div>

これで土台が完成しました。

背景画像のサイズを「contain」にしてみよう

事前に背景の画像を用意して、imgフォルダに入れておきましょう。

ファイル名は任意です。サンプルサイトでは「bedintroBg02.webp」にしています。

先の2番でやった個別のクラス名「catbed-intro」に背景画像を設置していきます。

背景画像の設置は何度もやったので説明は割愛しますが、サイズの指定は「contain」にします。

「contain」は要素内に収まるサイズで表示する指定でしたね。

.catbed-intro {
  background: url(../img/bedintroBg02.webp) no-repeat top left / contain; 
}

　

今現在、こんな感じになっています。

　

背景画像の上にテキストパーツが配置されていて、背景画像が隠れている状態です。

　

ここからテキストパーツの先頭を下げて、背景画像のほぼ全体が見れるようにしていきます。

やり方はいろいろありますが、今回は「padding」でテキストパーツを下げる方法でレイアウトします。

それでは、cssに「padding」を追加してください。

.catbed-intro {
  background: url(../img/bedintroBg02.webp) no-repeat top left / contain; 
  padding-top: 13rem;
}

　

テキストパーツの先頭のみ余白を設定する場合は、「padding-top」で指定していきます。

　

「padding: 13rem 0 0 0;」でも同じ指定になりますが、上だけの場合は「top」で指定したほうがスマートです。

　

値を13remにしましたが、適宜変更してください。　

　

これでネコちゃんの可愛い寝顔も見えるようになりました。

次は、テキストパーツをやっていきます。

要素に角丸を適用する

Bootstrapで、要素に角丸を適用してみましょう。

Utilities→Borders→Sizes

要素の角が丸くなっていますね。

クラス名「rounded-3」を使っていきます。

それではテキストパーツに適用して、確認してください。

<div class="col-10 offset-1 bg-white rounded-3">
  /*　中略　*/
</div>

タイトルを2行にしよう

今作ったものはタイトル名が1行になっていますが、デザイン画像を見ると「ぐっすりスヤスヤ」と「癒されるかわいい寝顔！」は2行に渡っていますね。

「ぐっすりスヤスヤ」はspanタグで囲っていますのでここにスタイルを適用します。

インライン要素とブロック要素を学ぼう

試しに、spanタグをpタグに変更して、ブラウザで確認してみてください。

pタグにすると、改行されて2行になりましたね。

これは、「インライン要素（span）」を「ブロック要素（p）」に変更したためです。

インライン要素とは

文章の特定の部分（今回はspanタグ）に装飾を加えるために利用される要素です。

インライン要素は文章と同じ行に表示され、幅や高さを保持していません。

ブロック要素とは

ひとつのまとまり、ブロック（今回はｐタグ）をつくるレイアウトで使用されます。

ブロックは幅いっぱいにレイアウトされます。

「pタグ使えばいいんじゃないの？」と思いますが、pタグは文章を意味するタグです。

今回作っているのは「タイトル」で文章ではありません。

なので、意味を持たない・装飾するためだけのタグとして「spanタグ」を使う必要があります。

そこでBootstrapでは、インライン要素・ブロック要素に変えるクラスが用意されています。

インライン要素をブロック要素に変えてみよう

Utilities→display

3番の緑枠の部分が「インライン要素」で作ったボックスです。

「d-line（インライン要素にするクラス）」と書かれた青と黒のボックスが、横並びになっています。

幅を持っていないので、テキスト幅が有効幅となります。

対して4番のオレンジ枠の部分が「ブロック要素」で作ったボックスです。

「d-block（ブロック要素にするクラス）」と書かれた青と黒のボックスは、幅を持っていて一行で表示されています。

今回のように、インライン要素であるspanタグをブロック要素にして改行させるために使います。

それではspanタグにクラス名「d-block」を付与して確認してみましょう。

<h2 class="text-center">
  <span class="d-block">ぐっすりスヤスヤ</span>癒されるかわいい寝顔！
</h2>

インラインだったのがブロックに変わったので、2行になりました。

次は、最後の文章のpタグを目立たせてみます。

文章の一部を目立たせたい

最後の一文。

「愛猫も飼い主もうれしくなる快適ベッドを作りました。」ですが、

説明文というより、キャッチコピー的な意味合いを持たせた一文です。

ここ、目立たせたいです。

そんな時に使えるのがクラス名「lead」です。

Content→Typography→Lead

通常の文章と見比べると、フォントサイズが大きくなっていますね。

これを使って最後のpタグと文章との差を付けます。

それでは、クラス名を適用させてください。

<p class="lead">愛猫も飼い主もうれしくなる快適ベッドを作りました。</p>

これで完成です。

今回はここまで。

次回は、フォントスタイルを変えてみます。