CSSでQodlyインターフェースをカスタマイズする

4月 3, 2025 2 読了時間

Qodly Studioでは、各ウィジェットのプロパティを使って直接スタイルを設定することができます。しかし、アプリケーション全体で一貫した外観を維持し、グローバルスタイル（フォントの色、テキストのサイズ、選択範囲の外観など）を簡単に適用するには、CSS が最適です。

この記事では、Qodly StudioでCSSを使用するための基本を、Performance Reviewアプリケーションを例に説明します。

パフォーマンスレビューアプリケーション

CSSとは？

CSS（Cascading Style Sheets）は、ウェブページ上のHTML要素の視覚的な外観を制御するためのスタイル言語です。色、フォント、余白、アニメーションなどを定義するために使用され、一貫性があり、美観に優れ、適応性のあるインターフェイスを作成します。

このブログでは、Qodly Studio での CSS クラスの使い方や作成方法、簡単な例を紹介します。CSSの記述方法を学びたい場合は、多くのドキュメントソースやトレーニングコース、ビデオがあります。

QodlyでのCSSクラスの使い方

CSSクラスの作成

Qodlyでは、CSSクラスをプロジェクトに直接追加することができます。その方法は以下の通りです：

Qodly Studioのスタイリングメニューに移動します。
CSSクラスを作成します。
ローカルか共有かを指定します。
CSS定義を記述します。

QodlyのCSSタイプ

Qodlyでは、柔軟性を最大限に高めるために3種類のCSSを用意しています：

ローカル：特定のコンポーネントやページにのみ適用されます。
テーマベース：複数のコンポーネントで共有され、アプリケーションのセクション内での一貫性を保ちます。
共有：プロジェクト全体で利用可能。

これらのオプションは、スタイルの構成と管理に大きな柔軟性を与えます。

CSSクラスの適用

CSS を作成したら、数ステップでさまざまなウィジェットにクラスを適用できます：

Qodly Studioでウィジェットを選択します。
プロパティタブに移動します。
CSSクラスオプションを探し、CSSファイルで定義したクラス名を入力します。

実際の使用例

Performance Reviewアプリケーションのログインページを例にとって説明します。

例 1: ログインボタンのスタイル設定

ログインボタンのスタイルを

白いテキスト
赤い背景
角丸
濃い赤のホバー効果

button-full」クラスを作成します。

以下のCSSを記述します：

self {
  border-radius：4px；
  border：1px solid #dd3c4c；
  background-color：background-color: #dd3c4c；
  color：#FFFFFF；
  transition-duration：0.4s;
}

self:hover {
  border：1px solid #c32232；
  background-color：#c32232;
  color：背景色： #c32232; color: #FFFFFF；
}

Qodly Studioでは、ボタンに「button-full」クラスを使用してこのスタイルを適用します。

例 2: 明暗モードの適応型ボタン

メディアクエリを使用すると、ユーザーの明暗テーマに応じて自動的に調整するアダプティブスタイルを作成できます。

ダークモードでは、ホバーエフェクトを明るくして暗い赤にします。これは@media (prefers-color-scheme: dark)セレクタを使って簡単に実現できます：

self {
  border-radius：4px；
  border：1px solid #dd3c4c；
  background-color：background-color: #dd3c4c；
  color：#FFFFFF；
  transition-duration：0.4s;
}

self:hover {
  border：1px solid #c32232；
  background-color：#c32232;
  color：色: #ffffff；
}

メディア (prefers-color-scheme: dark) {
  self {
    border-radius：4px；
    border：1px solid #c32232；
    background-color：#c32232;
    color：#ffffff；
    transition-duration：0.4s;
  }
	
  self:hover {
    border：1px solid #dd3c4c；
    background-color：background-color: #dd3c4c；
    color：color: #ffffff；
    }
}

結果は画像で：

明るいテーマ

ダーク・テーマ

例 3: CSS 変数の使用

CSS 変数を使用すると、再利用可能な定数を定義できるため、スタイル管理がより簡単かつダイナミックになります。

たとえば、色の管理を一元化し、明暗モードに基づいて動的に適用できます。

ステップ 1: 共有スタイルシートの定義

共有スタイルシートを作成し、すべての定数を定義します：

ルート
   -main-bg-color：main-bg-color: #FFFFFF；
   --main-fg-color：#000000;
   --accent-color1：#dd3c4c；
   --accent-color2：#c32232;

  media (prefers-color-scheme: dark) { -main-bg-color: none.
    --main-bg-color：#121212;
    --main-fg-color：-main-fg-color: #121212; -main-fg-color: #E0E0E0；
    --accent-color1：#c32232;
    --accent-color2：accent-color2: #dd3c4c；
  }
}

ステップ2： button-fullクラスに変数を適用する。

CSSクラスで変数を使用するには、単にvar()関数を使用します：

self {
  border-radius：4px；
  border：1px solid var(--accent-color1)；
  background-color: var(--accent-color1)；
  color: var(--text-color1)；
  transition-duration：0.4s;
}

self:hover {
  border：1px solid var(--accent-color2)；
  background-color: var(--accent-color2)；
  color: var(--text-color1)；
}

これで、色変数を更新するたびに、すべてのスタイル付き要素が自動的に更新され、アプリケーション全体で一貫したテーマが保証されます。

例 4: レスポンシブ・コンポーネントのスタイリング

次の例では、画面の幅に応じて調整するレスポンシブデザインを作成する方法を示します。

ログインパネルは、3 つのスタイルボックスで構成されています：

アプリケーションタイトルのボックス。
ログインフィールドとパスワードフィールドのボックス。
両方のボックスを包むコンテナ

コンテナはdisplay: flex;と flex-wrap:wrap; を使って応答性を確保しています。ボックスの幅が広くなりすぎると、横に並べずに縦に積み重ねます。

そして、他の2つのボックスについては、画面サイズに応じて幅を50%から100%の間で変更します。審美的な理由から、ボーダーも変更されます。

以下は、画面によってボックスが左または上に配置されるCSSの例である：

self {
    border-radius: 10px 0 0 10px；
    width: 50%；
    height: 100%；
}

media screen and (max-width: 800px) { { 枠線半径
    セルフ
      border-radius: 10px 10px 0 0；
      width: 100%；
      height: fit-content；
    }
}

結果は画像で：

始めるための簡単なヒント

CSSをどのように構成すればよいかわからない場合、Qodlyには便利な機能があります。ウィジェットのプロパティを使ってスタイルを定義し、CSSとしてエクスポートすることができます。

これにより、CSSルールがどのように見えるかを確認し、独自のCSSクラスを簡単に作成・修正することができます。

さらに進む

これらの例で、Qodly StudioにおけるCSSのパワーと柔軟性がお分かりいただけたと思います。さらに詳しく知りたい方は、以下の追加リソースをご覧ください：

CSSを使えば、Qodlyアプリケーションをユニークでプロフェッショナルなビジュアルエクスペリエンスに変身させることができます。さっそくフォーラムで作品を共有したり、質問してみましょう！