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形式の動画もご用意ください。