Onsenuiでons-toolbarを透過処理させる（onsenui2.0Bata対応済み 2016/2/9更新）

ドはまりして３ヶ月掛かって修正したので備忘録的に書いておきます。

monaca基盤でonsenuiを利用する際、componentsというところにデフォルトのcssが格納されており、transparentsをキチンと反映させるためには、それをstyle.cssで上書きする必要があります。

今回

上位Layer　ons-toolbar
中央Layer　ons-carousel
下位Layer　ons-page

という構造を想定して書いていましたが、実際にはこのような実装にはならず

上位Layer　ons-toolbar | ons-carousel
下位Layer　ons-page

という形になりました。
そうすると、ons-carouselにfullscreenという値を設定していても、ons-toolbarのプリセットである.page__contentの値が優先されるため、44pxがtop側から下に設定されてしまいます。そのため、transparentsをons-toolbarに指定しても透過されますが、その下のons-pageが見えてしまい、ons-carouselがfullscreenになりません。（ここはcarouselじゃなくて普通のhtmlなどでも一緒です）

そうなるとfullscreenが反映されず以下の様な図になります。

![図1.png](https://qiita-image-store.s3.amazonaws.com/0/18072/f690c470-dd9b-f45f-c04d-8f0846ad8081.png)

これを解決するためにはcss/style.cssに

```lang:onsen-ui
ons-toolbar ~ .page__content {
    top: 0;
}
```

と書くことで解決します。

しかし、これではまだ罠があります。
これはWeb版の設定だったのです。そのためMonacaIDE上のプレビューでみても動いていますが、Monacaデバッカーアプリでみると反映されていません。その理由は、先ほど上書きしたcssだけでは不十分で、以下のcssも上書きする必要がありました。

css/style.css

```lang:onsen-ui/css3
.page__status-bar-fill ~ ons-toolbar ~ .page__content { 
top: 20px; 
}
```

これによりiOS7以降のOSでもステータスバー以外はfullscreen対応してもらえます。また、完全なfullscreenにしたい場合は

css/style.css

```lang:onsen-ui/css3
.page__status-bar-fill ~ ons-toolbar ~ .page__content { 
top: 0px; 
}
```

と設定します。これで完全にtransparent＝透過処理をons-toolbarに設定されました。
良かったと思ったら大間違いです。もし、あなたがslidemenuを設定していて、そこにもons-toolbarを指定していたら、そちらもよく見て下さい。今度は上に詰まっているはずです。ons-toolbarが効かなくなったからですね。
ではどうするかというと、シンプルにその下のslidemenuに```<div>```や```<p>```や```<br>```を設定して調整するか、ons-toolbarを設定をやめて、```<div>```で自分でtoolbarを作るなどのやり方があります。

ようやく、意図した通りのUIになったので（まだ一部残っていますがそれは誤差なので後回し）、次に行きたいと思います。

##■追記
　その後、ons-navigatorを使うと、そのままCSSが反映されてしまうので、ons-pageがons-toolbarの下に潜ってしまいます。そのため。TOP以外のページではこの設定がじゃまになるため、各ページで利用するCSSに個別に

```lang:css3
.header-xxx {
  margin-top:44px;
}
```

を設定してあげることで回避できます。

##■2015/11/23 追記
その後、onsenui2.0-bataを利用するとこれでは動かないことがわかった。
記述が変更されており、このままだと読み飛ばされる。そこで、新記述を追加する。
初期値は共にtop: 44pxとtop: 64pxである。それをこれまで同様に0pxにすればOK。

```lang:onsenui2.0
ons-toolbar + .page__background + .page__content {
  margin-top: -1px;
  top: 0px;
}

.page__status-bar-fill + ons-toolbar + .page__background + .page__content {
  top: 0px;
  padding-top: 0px;
}
```

##■2016/02/09 追記
iOSのStatusbarをHiddenしたい場合はplistを弄ること。
iOS > MonacaApp-Info.plist
の67,68にある

```
    <key>UIStatusBarHidden</key>
    <false/>
```

を

```
    <key>UIStatusBarHidden</key>
    <ture/>
```

に変更し、再読み込みさせればステータスバーが消えます。
ただ、現状でMaterialDesignを選ぶと、何故か20pxぐらい下るみたいなので、現在調査中です。

##2016/02/09 21:41 追記
さらに調査した結果、完全なるUIを手に入れるには以下のようにCSSを設定する必要があった。

onsenui.css記載内容

```lang:css3
.page__status-bar-fill + .page__background + .page__content {
  padding-top: 20px;
}

ons-toolbar + .page__background + .page__content {
  margin-top: -1px;
  top: 44px;
}

.navigation-bar--material + .page__background + .page__content {
  top: 56px;
}

.page__status-bar-fill + ons-toolbar {
  height: 64px;
}

.page__status-bar-fill + ons-toolbar > .center,
.page__status-bar-fill + ons-toolbar > .left,
.page__status-bar-fill + ons-toolbar > .right {
  padding-top: 20px;
}

.page__status-bar-fill + ons-toolbar + .page__background + .page__content {
  top: 64px;
  padding-top: 0px;
}
```

style.css記載すべき内容

```
/* Webのみ */
 ons-toolbar + .page__background + .page__content {
  margin-top: -1px;
  top: 0px;
}

/* アプリのみ */
.navigation-bar--material + .page__background + .page__content {
  top: 0px;
}

/* アプリ のみ*/
.page__status-bar-fill + ons-toolbar > .center,
.page__status-bar-fill + ons-toolbar > .left,
.page__status-bar-fill + ons-toolbar > .right {
  padding-top: 10px;
}

/* アプリのみ */
.page__status-bar-fill + ons-toolbar + .page__background + .page__content {
  top: 0px;
  padding-top: 0px;
}
```

と変更することですべてが丸く納まります。