Ubuntu14.04にCordovaの開発環境を構築してFirefoxOSとAndroidアプリを作ってみる

FirefoxOSぽい外観の作成 編

今回は画面を作っていく。

1. 画面上部のオレンジ色のヘッダを作る

Gaiaというツールを導入すれば簡単に作れるらしい。
mozilla-b2g/gaiaをダウンロード。
その中の「shared」フォルダを www フォルダにコピー。
www/index.htmlを修正。

<link rel="stylesheet" type="text/css" href="shared/style/headers.css" />

<section id="opening" role="region" class="current" data-position="current">
  <header>
    <h1>Hello World</h1>
  </header>
</section>

ソースのコメント: @@@1

文字が勝手に大文字になるので、www/css/index.cssを修正。

  text-transform:uppercase; /* これをコメントアウト */

ソースのコメント: @@@2

タイトルを左寄せにしてアイコンをつける。
www/css/index.css

section[role="region"] > header:first-child h1 {
  text-align: left;
}
header h1 {
    background:url(../img/logo.png) 0 50% no-repeat;
    -moz-background-size:contain;
    background-size:contain;
    padding-left: 5rem !important;
}

ソースのコメント: @@@3
※どういう訳かpadding-leftが効かなかったので!importantを付けた。

タイトルの右上にメニューアイコン（設定アイコン）を付ける。
www/index.html

<menu type="toolbar">
    <a href="#"><span class="icon icon-settings">settings</span></a>
</menu>

ソースのコメント: @@@4

www/css/index.css

section[role="region"] > header:first-child .icon.icon-settings {
  background-image: url(../img/settings@2.25x.png);
}

ソースのコメント: @@@4

www/img/に画像をコピー
・settings.png　　(30x30)
・settings@1.5x.png　　(45x45)
・settings@2.25x.png　　(68x68)

タイトルが途中で切れるので、www/css/index.cssを修正。

font-size: 1.3rem !important; /* これを追加 */

ソースのコメント: @@@5

全ソースはここ

今日はここまで。