section セクション
コンテンツの一部に背景画像を設定したりできる領域を作成します。
使い方
#section(オプション){{ 内容 }}
オプション
下記のようなオプションがあります。 * には適当な値を入れてください。
オプション | タイプ | 説明 |
left center right | レイアウト | 内容の水平位置を指定します。 |
top middle bottom | レイアウト | 内容の垂直位置を指定します。 |
数値(例: 500) | レイアウト | section の高さを指定します。 |
page | レイアウト | section の高さを画面いっぱいの高さにします。 |
fit | レイアウト | section の内部余白をゼロにします。 内側に設置した要素(例:#bs_carousel)を横幅いっぱいに広げたい場合に指定します。 |
relative | レイアウト | section のCSSポジションをrelativeにします。 |
bgcolor=* | 背景 | section の背景色を指定します。 |
primary info success warning danger | 背景 | section の背景色をプリセットを利用して指定します。 |
画像名(例:section.jpg) | 背景 | 背景画像を指定します。 |
repeat | 背景 | 背景画像を縦横リピートします。 |
fix | 背景 | スクロールしても背景画像が動かないように固定します。(一部ブラウザでは無効になります) |
blur | 背景 | 背景画像をぼかします。(一部ブラウザでは無効になります) |
light=数値 | 背景 | 背景画像を明るくします(0~100の数値で明るさを調節できます)。デフォルトは40です。 |
dark=数値 | 背景 | 背景画像を暗くします(0~100の数値で暗さを調節できます)。デフォルトは40です。 |
bgvideo=*.mp4 | 背景 | 背景動画を指定します。詳しくは背景動画の項を参照してください。 |
class=* | その他 | section にクラスを指定します。 |
style=* | その他 | section にスタイルを指定します。 |
color=* | その他 | section 内の文字色を指定します。 |
title=* | その他 | section に内部的にタイトルを指定します。 |
nojumbotron | レイアウト | 背景色を白にします。 |
jumbotron | レイアウト | section の表示を目立つようにします。 |
背景動画
bgvideo=*.mp4 で指定できる背景動画について解説します。
背景動画の基本
section の背景で動画を再生することができます。動画は無音(ミュート)で連続(ループ)再生されます。
iOS や Android など、モバイルユースの端末では背景動画を無効にしますので、必ず動画と雰囲気が近い背景画像を指定するようにしてください。
背景動画の選び方
- 前面の文字があまり見づらくならないもの
- 音が出なくても良いもの
背景動画のファイル形式
mp4 形式の動画を用意してください。(コーデックは H.264 ) Firefox など、対応していないブラウザもあるため、同じ内容の webm形式の動画もご用意ください。