Bootstrap

親要素いっぱいに広がるジャンボトロンを使う方法

投稿日:

親要素いっぱに広がるジャンボトロン

これは親要素の横方向いっぱいに広がるジャンボトロンです。
ブログのアイキャッチにも使えます。

Bootsrapにはデフォルトでジャンボトロン(jumbotron)が設定されています。
これは親要素の横幅いっぱいに広がるエリアで、テーマ作成などではブログヘッダーなどのカスタマイズによく使われています。

親要素いっぱいに広がるジャンボトロンを使う方法

ジャンボトロン(jumbotron)は親要素の横幅いっぱいのエリアにタイトルを表現するための「h1」タグのスタイルとリード文の記述をおこなうためのカスタマイズ「lead」クラスが定義されています。

使い方は以下のようになります。

通常は先ほど書いたようにブログのヘッダー画像部分に使われることが多いので「h1」タグで問題ないのでしょうが、わたしはブログのアイキャッチに使ってみたかったので、すこしカスタマイズ用のスタイルシートを設定しました。

トップにあるアイキャッチのソースは以下の通りです。

これで背景色がBootstrapぽくなった四角いエリア内に記事のタイトルとリード文(説明文)を書けるようにしました。

まとめ

ジャンボトロンは背景画像などをうまく使えれば、いろいろな表現ができるのでぜひ使い方をマスタしましょう。

以上、「親要素いっぱいに広がるジャンボトロンを使う方法」でした。

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-Bootstrap
-

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.