本日のゴール

本日はCSS(Cascading Style Sheets)を使って、タイトルの装飾を行います。
スタイルシートは基本的にリソースとして定義しますが、デバッグする際にはXPage上に直接書く場合もあります。
複数のスタイルシートを読み込んだ場合、後から読み込んだものが有効になります。
どのスタイルが適用されているか？はブラウザの開発者ツールを使って確認します。
【完成イメージ】

リソースファイルに書く

1		リソース＞スタイルシートから「css/original.css」を開く。
2		タイトル用のCSSクラスを追加し、スタイルシートを保存する。 ソースは、【オリジナルCSSクラス④】を参照。
3		タイトル用の<h2>タグに、作成したクラスを指定する。 ソースは、【タイトル用HTML】を参照。
4		ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 ビュータイトルの文字がグレーになる ビュータイトルの左にオレンジ色の縦棒が表示される
5		同じ変更を 最終更新日XPage(modifiedsort_vw) にも行う。

【オリジナルCSSクラス④】

/* title */
.org_title
{
    border-left:solid 5px var(--main_color);
    padding:5px 10px;
    color:#6c757d;
}

【タイトル用HTML】

<h2 class="org_title">タイトルソート</h2>

XPageに直接書く(デバッグ、テスト実装用)

一時的なテスト用でCSSクラスを追加したい場合は、XPage上に直接クラスを記述する場合がある。
また、一時的にCSSクラスを上書きしたい場合にも、XPage上に直接記述する。

1		XPage(subjectsort_vw)を開き、Bootstrapアイコン用のリンクタグ<link>の後ろに<style></style>タグを追加する。
2		<style>タグの中にビュータイトル用のCSSクラスを定義する。 ソースは、【オリジナルCSSクラス⑤】を参照。
3		ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。 ビュータイトルの左に青色の縦棒が表示される ビュータイトルの文字はグレーのまま 【解説】 CSSクラスは下に行くほど優先されます。 ①CSSファイル上に定義されたクラス ②XPageやHTML上に定義されたクラス ③HTMLタグのstyleプロパティに定義されたCSS この例のようにクラスの一部だけを書き換えることもできます。
4		追加した<style></style>を削除し、XPageを保存する。
5		ブラウザでプレビューし、表示が元に戻っていることを確認する。

【オリジナルCSSクラス⑤】

.org_title{
    border-left:solid 5px blue;
}