Bootstrapで遊ぶ８（ジャンボトロン）

おつかれさまです。

Bootstrapを使ってある程度レイアウトが作れるようになってきたので、今度は具体的なコンポーネントを使ってデザインを構築してみます。

まず使ってみるのは「ジャンボトロン」、ページ先頭に大きくタイトルだったり説明とか書いたりする、アレです。

ちなみにジャンボトロンとはもともとSONYが開発しためっちゃデカいモニターのことだそうな。
ジャンボトロン - Wikipedia

まあいつもどおり、とりあえずなんか書きます。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="jumbotron">
</div>

本当にただジャンボトロンの要素を入れただけ、

なんか灰色の帯のようなものが出てきました。

これよく見ると、はしっこが丸くなっています、今は本当にジャンボトロンの要素しか入れていないので、「ジャンボトロンの幅＝ウィンドウの幅」となっているんで見えにくいですが、「container」とかでかこってあげると分かりやすいです。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron">
  </div>
</div>

ウィンドウのはしっこに余白が出てきました、確かにジャンボトロンの要素は４スミが丸い帯のような要素になっています。

例えばこのクラス名を「"jumbotron"→"jumbotron jumbotron-fluid"」にすると４スミの丸を変えることができます。

めっさ見づらい分かりにくいww

次に、このジャンボトロンの中にページタイトルなり、その説明など入れてみます。とりあえずh1とp1で「jumbotron」の中になにか書いてみましょう。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

h1、p要素を挿入した分、帯が縦に伸びましたね、へー

次は文字の色と背景色を変えてみます。「jumbotron」のクラス名に「text-white（白文字）」と「bg-dark（黒背景）」を追記します。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white bg-dark">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

おー、うまくいきました、文字色と背景色についてはまた追々メモります。

最後に、この背景に指定の画像をはめ込みたいと思います、これが結構やっかい、、、

適当に、ネットに落ちてたフリー素材を使います、「BGimage.jpg」とか適当に名前をつけて保存、ん〜ダークな社畜感が漂う…

ジャンボトロンに画像を入れ込むにはstyleでURLを指定してあげます、画像を配置する場所はRailsの「app/assets/images」、ここのURLを呼び出します。「style="background: url(app/assets/images/BGimage)"」コレでいけるはず、

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(app/assets/images/BGimage);">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

だがしかし

なんか画像が表示されない、あーだこーだ試して、それでもうまくいかんのでGoogle先生に聞いてみて、どうもコレはRailsを利用しているので、Rubyタグを用いて記述しなきゃいけないみたい。

Railsファイルのpathを指示する「<%= asset_path "○○" %>」を用いて、

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>);">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

おおー、なんかええ感じやないっすかー、

とりあえず画像を埋め込めることが分かったので、この画像をいいようにいじっていきます、画像をいじるにはそのままstyleに追記していく感じで足していきましょう。とりあえず追記する項目は「background-size:cover」、これは画像のアス比を保持したままウィンドウサイズに応じて可変してくれます。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>); background-size:cover;">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

おお、なんか画像の映る場所が変わった、ほんでいっかいウィンドウサイズをグニグニ変えてみると、確かにアス比がいい感じに保持されたまま画像が変わります、コレがないときは画像サイズそのままで表示の範囲が変化する感じ、あるときはウィンドウサイズに応じて画像がズームされるような感じ。

あとこの画像、中央寄せしたっすね、styleに追記、urlの後ろに「center」を足します。

<h1 style="background: blue;">ジャンボトロンのテスト</h1>
<div class="container-fluid">
  <div class="jumbotron jumbotron-fluid text-white" style="background: url(<%= asset_path "BGimage.jpg" %>) center; background-size:cover;">
    <h1>社畜エンジニア発掘前線</h1>
    <p>世界の社畜よここに集いたまえ</p>
  </div>
</div>

おー画像が中央寄りしました、ウィンドウサイズをグニグニしてもいい感じ、そしてなんかカッコイイ、いやでも社畜だぜ？？

ひとまずジャンボトロンのあつかいはこんなところ、ボタンとかを設置するのもアリかな、あとコンテナ（サイド余白）もいらんかな、ちょっとずつですがこんな感じに作りたいというイメージが表現できるようになってきてます、まーたデザインパワーがアップしてしまったか。