ウィジェットのカスタムスタイル

ウィジェットのカスタムスタイルを使うと、個々のウィジェットにカスタム CSS を適用できます。スタイルは、アプリケーション内のほかのウィジェットとは共有されません。ウィジェットを選択すると、右サイドバーからカスタムスタイルにアクセスできます。サイドバーのスタイルタブに移動し、パネルの下部にあるカスタムスタイルのセクションを見つけます。

ウィジェットのカスタムスタイルは、スタイルのテストや開発に適しています。背景色、フォントサイズ、角の丸みなどをすばやく簡単に設定できます。アプリケーションのほかの部分を変更してしまうリスクなく、1個のウィジェットに変更を加え、キャンバスで結果をプレビューできます。

カスタムスタイルはスタイルシートのスタイルと競合し、予期しない結果につながることがあります。これは、両方が同じクラスの同じ CSS プロパティを変更しようとするときに発生します（たとえば、スタイルシートとカスタムスタイルがウィジェットの背景色を変更する場合）。こうした競合を避けるため、カスタムスタイルは開発や試行錯誤にのみ使用し、複雑なスタイルの管理にはスタイルシートを使用するのが適しています。

このガイドでは、テキストウィジェットにスタイルを設定する手順を説明します。

1. テキストウィジェットを追加し、Hello World と入力します。

2. テキストウィジェットでよく変更する項目には、色、フォント、配置、境界線があります。

   Copied!
   1
   2
   3
   4
   5
   6
   7
   8
   #w1 {
     background: #d9eef2;
     font-size: 30px;
     color: #1685ca;
     border: 2px solid #89bff5;
     font-family: Times;
     text-align: center
   }

4. 別のテキストウィジェットを追加し、Slate is awesome と入力します。

5. この新しいテキストウィジェットにはスタイルが適用されないことに注目します。これは、セレクター #w1 を使用して、最初のウィジェットにのみ変更を適用するよう指定したためです。CSS を #w1, #w2 に変更するだけで、両方のテキストウィジェットにスタイルを適用できます。ただし、別のテキストウィジェットを追加して同じスタイルを適用したい場合はどうなるでしょうか？

6. スタイルエディターで、次のように変更します。

   Copied!
   1
   2
   3
   4
   5
   6
   7
   8
   sl-markdown {
     background: #d9eef2;
     font-size: 30px;
     color: #1685ca;
     border: 2px solid #89bff5;
     font-family: Times;
     text-align: center
   }

   sl-markdown は要素のタグであり、このコードはすべての Markdown ウィジェットにこのスタイルを使用するよう指定しています。

7. 3個目のテキストウィジェットを追加します。スタイルが自動的に適用されることに注目します。
   
   
   
   

8. 最後に、現在の CSS を保持し、#w1 用の CSS を追加します。

   Copied!
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   sl-markdown {
     background: #d9eef2;
     font-size: 30px;
     color: #1685ca;
     border: 2px solid #89bff5;
     font-family: Times;
     text-align: center
   }
   #w1 {
     background: #f1cbd5;
     font-size: 30px;
     color: #ca1629;
     border: 2px solid #eb5c81;
     font-family: Helvetica;
     text-align: center
   }

   これにより、w1 にはほかの2個のウィジェットとは異なるスタイルが正しく適用されることに注目します。