CSS リファレンス

カスケーディング スタイルシート(CSS)は、ウェブサイトやアプリのスタイルとレイアウトを制御します。App Maker では、CSS を使用してウィジェットの色、フォント、枠線などを指定し、アプリの外観をカスタマイズできます。

ページエディタの右側のメニューにある [Style] タブで CSS を追加します。たとえば Button1 というボタンをオレンジ色にするには、ページ内のボタンを選択し、[Style] タブで次のコードを追加します。

.app-NewPage-Button1 {
      background-color: orange;
    }
    

基本的な CSS

フォント

効果 CSS / スタイル オリジナル スタイル適用 指定できる値
太字 font-weight: bold; サンプル テキスト サンプル テキスト normal、bold
斜体 font-style: italic; サンプル テキスト サンプル テキスト normal、italic
取り消し線 text-decoration: line-through; サンプル テキスト サンプル テキスト underline、line-through、overline
テキストの色 color: red;
color: #ff0000;
サンプル テキスト サンプル テキスト 色名または HTML 色コード
テキストのサイズ font-size: 20px; サンプル テキスト サンプル テキスト ピクセルサイズまたは em 単位
テキストの配置 text-align: right; サンプル テキスト サンプル テキスト left、center、right

パネル、ボタンなど

枠線

効果 CSS / スタイル オリジナル スタイル適用
枠線の追加または変更 border: 1px red solid;
枠線の削除 border: none;

角の丸い枠線

効果 CSS / スタイル オリジナル スタイル適用
四隅を丸める border-radius: 5px;
個別に角を丸める border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
サンプル テキスト
サンプル テキスト

背景の色

効果 CSS / スタイル オリジナル スタイル適用
** 色の追加または変更 ** background-color: lightgreen;
色なし background: none;

カーソル

効果 CSS / スタイル オリジナル スタイル適用
ポインタ(クリックできる要素) cursor: pointer; サンプル テキスト サンプル テキスト
矢印(クリックできない要素) cursor: default; サンプルリンク サンプルリンク

はみ出るコンテンツの処理

アプリのコンテンツがそのコンテナに対して大きすぎることがあります。ラベル ウィジェットに対してテキストが長すぎる場合でも、ウィジェットのグループがパネルに収まりきらない場合でも、コンテンツがコンテナからはみ出るときのアプリの応答方法を CSS で定義できます。

はみ出るコンテンツを隠す

効果 CSS / スタイル オリジナル スタイル適用
はみ出るコンテンツをカットする
overflow: hidden;
CSS IS AWESOME
CSS IS AWESOME
スクロールを有効にする
overflow: auto;
CSS IS AWESOME
CSS IS AWESOME
横長のコンテンツをカットする
overflow-x: hidden;
CSS IS AWESOME
CSS IS AWESOME
縦長のコンテンツのスクロールを有効にする
overflow-y: auto;
CSS IS AWESOME
CSS IS AWESOME

はみ出るテキストに省略記号を使用する

効果 CSS / スタイル オリジナル スタイル適用
省略記号 overflow: hidden;
text-overflow: ellipsis;
Internationalization
Internationalization

標準のブラウザ効果を変更する

ブラウザには、ほとんどのインタラクティブな要素について、標準的な表示方法があります。たとえば、すでに訪れたリンクは通常、下線が引かれた紫色で表示されます。CSS 擬似セレクタを使用して、このようなスタイルを再定義できます。

ホバリング

要素にマウスカーソルを合わせることを、ホバリングといいます。ボタンとリンクにはホバー効果が組み込まれていますが、入力フィールドやパネルなど、App Maker ウィジェットにホバー効果を追加できます。

CSS / スタイル オリジナル スタイル適用
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
サンプル テキスト
サンプル テキスト

フォーカスと !important 修飾子

要素を操作すると、その要素にフォーカスが合います。たとえば入力ボックスをクリックすると、テキスト カーソルが表示されます。フォーカスがあるということは、キーボードからの入力がすべて、フォーカスのある要素に直接届けられるということです。

ユーザー指定のスタイルが、ブラウザや App Maker テーマで定義されたスタイルと競合することもあります。CSS がレンダリングに失敗した場合は、!important 修飾子をスタイルに追加してみます。これにより、ブラウザやテーマのスタイルによって上書きされないようにできます。この修飾子は、あまり広く適用しすぎないでください。組み込みの重要なスタイルが上書きされるおそれがあります。

CSS / スタイル オリジナル スタイル適用
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

次のステップ