Tip:
Highlight text to annotate it
X
このレッスンではCSSを使ってCustomerSupport アプリケーションをより魅力的にしていきます。
Issue DescriptionページでIssue IDをBoldにセットします。
Expressionを選択してツールバーの オプションからBoldを選択します。
ハッシュ記号もBoldにしましょう。
次にこのWebBlock上のIssue Descriptionを 控えめな表示にします。
Descriptionを囲んでいるContainerを選択し
Containerにスタイルを適用します。
ツールバーのリストボックスからText Noteスタイルを選択します。
HTMLのContainerをあらわすDiv上に AttributeクラスとしてText Noteが適用され
アプリケーションテンプレートに定義された スタイルが適用されています。
ページやページ要素に対する独自のスタイルの 作り方や適用方法について説明します。
Issue Listでの表現を見てみましょう。
Emailにも同じスタイルを適用していきます。
Containerを選択し、Text Noteスタイルを適用します。
見た目がよくなりました。
ダッシュボードのIssue Descriptionでも 同じものを使いました。
ダッシュボードページを開きます。
前回のレッスンでこれらのConainerにHeading1 スタイルを適用したので、
タイトル部分にスペースが加えられています。
これはMargin Topプロパティで設定されており、
Heading1スタイルではデフォルトでスペースが 設けられています。
Margin Topプロパティを0ピクセルにセットして 上書きします。
隣の要素もMargin Topは必要ないので 同様に0ピクセルにセットします。
では、ブラウザでどのように見えるか、 プレビューモードで見てみましょう。
Issues Listで各Issue間にスペースはないですね。
これを最初のスタイル定義として作成します。
ツールバーからスタイルシートエディタを開きます。
3つのタブがありますね。
それぞれのタブを見てみると、 ここで何をしているのかがわかります。
最初のタブはDashboardと呼ばれます。
Dashboardは今私たちがいる画面です。
一番目のタブは今開いている画面を表します。
ここではDashboard画面にのみ使いたい 特別なスタイルを定義します。
2番目のタブはCustomerSupportです。
CustomerSupportはアプリケーションのテーマであり、
ここにはアプリケーションの全画面に適用したい より一般的なスタイルを定義します。
最後のタブはChicagoです。
CustomerSupportテーマはChicagoをベースとしています。
Chicagoタブを選択すると、
アプリケーションテンプレートのすべてのスタイルが 定義されていることがわかります。
これらの定義はRead-Onlyであり、
Chicagoテーマのスタイルを再定義したい場合は、
カスタマイズを行う必要があります。
先ほどのスタイル定義をペーストします。
IssueContainerのスタイルです。
これをこのページに適用します。 エディタを閉じて、
WebBlockに直接スタイルを適用することはできないので、 これらのWebBlockをContainerで囲います。
このContainerにスタイルを適用します。
ツールバーに先ほど定義したIssueContainerがありますね。
IssueContainerスタイルを適用すると、 スタイルで定義されたMargin Bottomになりました。
Low Priority IssueのWebBlockに対しても 同じことを行います。
Containerで囲み、スタイルをセットします。
さらに、ダッシュボードのタイトルの色を 優先度別に分けましょう。
スタイル定義を作成する必要があるので、 スタイルシートエディタを開きます。
タイトル用のスタイルをつくり、 High PriorityページとLow Priorityページで再利用します。
CustomerSupportタブにクリップボードからペーストします。
これらのスタイル定義は、ビデオレッスンのリソースを ダウンロードしてください。
エディタを閉じて、今設定したスタイルを タイトルに適用します。
Containerにはすでに別のスタイルがセットされていますが、
タイトルのテキスト部分を選択し、
プロパティペインでスタイルを要素ごとに 個別に設定することができます。
先ほど定義したHighPriorityスタイルを適用します。
ヒントですが、styleプロパティをダブルクリックすると スタイルシートエディタを開くことができます。
ここでスタイルシートエディタを開くと、
適用されているスタイルにフォーカスがあたった 状態でエディタが開きます。
大量のスタイルを定義していると、 目的のスタイルを探すのは大変ですし、
大変がゆえに細かなデザインをあきらめて しまうことにもなりかねません。
HighPriorityページのタイトルにHigh Priority スタイルを適用し、
LowPriorityページのタイトルにLow Priority スタイルを適用します。
最後に、ベーステーマのアプリケーションテンプレート のスタイルを再定義する方法を説明します。
スタイルシートエディタを開き、 Chicagoテーマで再定義したいスタイルを探します。
ここではフォントのスタイルを再定義します。
フォントの定義部分をコピーして、 アプリケーションの一般的なスタイルとしたいので
CustomerSupportタブにペーストします。
ここでfont-familyだけを再定義したいので、 残りのものは削除します。
font-familyをHelveticaからVerdanaに変更します。
変更がページに直ぐに反映されました。
例えばダッシュボードページを見てみると、
ここでもフォントが変更されています。
パブリッシュしてブラウザで確認しましょう。
ダッシュボードのタイトルに色がつき、
Issue IDは太字になり、リストの要素間のスペース も反映されています。
High Priorityのタイトル色も変更され、 フォントもVerdanaに変わりました。
以上でレッスンを終了いたします。