Ember アプリのスタイリング

これでアプリの機能が完成しましたので、あなたはそれをより魅力的に見せるためにスタイリングしたくなることは間違いありません。 Ember(そして他のフレームワーク)のほとんどのものと同様に、これを行うための厳しい規則があります。 この記事では、Ember アプリで CSS、画像、フォントを使用する方法について説明します。

アプリにアセットを含める

最初にアプリを生成したときに Ember CLI によって作成されたアプリの構造には、public ディレクトリが含まれています。 このディレクトリの内容は、ember serve でアプリを提供するときに dist フォルダのルートに変更されずにコピーされるので、画像やフォントのような、あなたのアプリで使用されるアセットを置くべき場所です。 別々の imagesfonts のディレクトリを持つなど、これらを保存するためのいつも良い方法を使用する必要があります。

これらのディレクトリを public 内に作成し、アプリのスタイリングに使用するサンプルのフォントや画像をいくつか含めます。

メモ: 私はタイムゾーンのアイコンを softicons.com で見つけて、フォントは fontsquirrel.com で見つけました。 どちらも、自由に使用できる(CC の制限付き)リソースを提供します。

アプリに CSS を含める

アプリのルートディレクトリの中にある app ディレクトリには、styles ディレクトリがあります。これは、あなたのアプリの CSS が行く場所です。 それは既に app.css ファイルを含んでいるので、そこに CSS を置くことができます。 アプリが提供されると、CSS は dist/assets/ の中に入れられます — ember serve を実行した後、そこに world-clock.css が見られます。 アセットを使用するには、相対パスを使用してアセットを参照する必要があります(例:../images/my-image.png)。

app.css に次のサンプル CSS を追加して、フォントと画像の参照をあなたのものに置き換えてください(または完全に独自の CSS を書いてください!)。

@font-face {
    font-family: 'antoniolight';
    src: url('../fonts/antonio/antonio-light-webfont.eot');
    src: url('../fonts/antonio/antonio-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/antonio/antonio-light-webfont.woff2') format('woff2'),
         url('../fonts/antonio/antonio-light-webfont.woff') format('woff'),
         url('../fonts/antonio/antonio-light-webfont.ttf') format('truetype'),
         url('../fonts/antonio/antonio-light-webfont.svg#antoniolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ds-digitalnormal';
    src: url('../fonts/ds_digital/ds-digi-webfont.eot');
    src: url('../fonts/ds_digital/ds-digi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ds_digital/ds-digi-webfont.woff2') format('woff2'),
         url('../fonts/ds_digital/ds-digi-webfont.woff') format('woff'),
         url('../fonts/ds_digital/ds-digi-webfont.ttf') format('truetype'),
         url('../fonts/ds_digital/ds-digi-webfont.svg#ds-digitalnormal') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body {
  margin: 0px;
}

html {
  font-family: 'antoniolight', sans-serif;
  background: white;
}

body {
    width: 50%;
    max-width: 800px;
    min-width: 480px;
    margin: 0 auto;
    padding: 0px;
    border: 2px solid #888;
    border-radius: 12px;
    background-color: #999;
}

li > strong, h2 > strong {
  font-family: 'ds-digitalnormal', monospace;
  font-size: 130%;
  letter-spacing: 0;
}

h1,h2 {
  text-align: center;
  background-color: black;
  color: lime;
  margin: 0px;
  padding: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 1px 1px 1px black,
               2px 2px 1px lime;
}

h1 {
  border-radius: 8px 8px 0 0;
  padding-top: 20px;
  background: black url(../images/time-zone.png) no-repeat;
}

h2 {
  clear: both;
  text-align: center;
  padding-top: 15px;
}

ul {
  padding: 0;
  margin: 0;
}

ul:first-of-type li {
  float: left;
  width: 50%;
  text-align: center;
}

ul:first-of-type li a {
  display: block;
  text-decoration: none;
  font-size: 1.3em;
  letter-spacing: 0.1em;
  line-height: 2.5;
  background-image: rgba(0,0,0,0.25);
  border: 2px solid #888;
  background-image: linear-gradient(to bottom, #ccc,#999);
  box-shadow: inset 4px 4px 5px rgba(255,255,255,0.4),
              inset -4px -4px 5px rgba(0,0,0,0.4);
  color: #666;
  text-shadow: 1px 1px 1px black;

}

ul:first-of-type li a:first-of-type {
  border-left: 0;
}

ul:first-of-type li a:last-of-type {
  border-right: 0;
}

ul:first-of-type li a:hover {
  color: white;
}

ul:first-of-type li a:active {
  box-shadow: inset 4px 4px 5px rgba(0,0,0,0.8),
              inset -4px -4px 5px rgba(0,0,0,0.8);
}

ul:last-of-type {
    text-align: center;
    margin-top: 20px;
}

ul:last-of-type li {
    padding-bottom: 20px;
}

li {
  list-style-type: none;
}

h2 + div {
    padding: 20px 0 10px;
}

h2 + div select {
  display: block;
  width: 49%;
  margin: 0 auto;
  line-height: 1.3;
}

h2 + div + button {
  display: block;
  width: 50%;
  margin: 0 auto;
}

h2:nth-of-type(2) {
  margin-top: 20px;
}

メモ: 現在 localhost:4200 でアプリを提供している場合は、CSS またはアセットを保存するたびにアプリのスタイリングの更新が見られます。 繰り返しますが、これは本当に便利な機能です!

完成

あなたは今見事で完璧な Ember アプリを持っているはずです。 完成した私のアプリは次のようになりました。

次に

このシリーズの最後のステップとして、次の記事では、Ember アプリの公開準備を進めてプロダクションビルドを作成し、簡単なテスト/共有メカニズムとして Github Pages にアップロードする方法について説明します。

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,