1. ホーム
  2. スタートガイド
  3. カスタムクラスの基本
  1. ホーム
  2. 使い方 Blocs
  3. 設計
  4. カスタムクラスの基本

カスタムクラスの基本

の最も強力な機能のXNUMXつ Blocs プロジェクト内でカスタムクラスを使用する機能です。 グラフィックデザインのバックグラウンドを持っている場合は、カスタムクラスを、の任意のアイテムに割り当てることができるレイヤースタイルと考えてください。 Blocs 特定のルックアンドフィールを与えるために。 これらのクラスのルールは、デスクトップ、タブレット、モバイルで異なって表示されるように調整できます。つまり、アイテムが表示されているデバイスに合わせて、アイテムの細部を微調整することができます。 以下のビデオでは、カスタムクラスの基本と、それらをデザインで使用する方法について説明しています。

カスタムクラス紹介ビデオ

カスタムクラスの適用

内のアイテムにカスタムクラスを適用するには Blocs、最初にメインデザインキャンバス上のアイテムを選択します。 左クリック それ。 サイドバーのオプションで、ラベルの付いたフィールドを見つけます クラス このフィールド内をクリックしてアクティブにします。

類体論

アクティブ化したら、クラスに付ける名前またはプロジェクトにすでに存在するクラスの名前をキーボードで入力して、Returnキーを押します。 これにより、classesフィールドにカスタムクラスタグが作成されます。これは、このクラスがこのアイテムに割り当てられたことを意味します。 このプロセスを繰り返して、同じアイテムに複数のクラスを追加できます。

クラスタグ

カスタムクラスの値へのアクセス

内のカスタムクラスの値にアクセスする方法はいくつかあります Blocs。 最も簡単な方法は 右クリック コンテキストメニューを表示するアイテム。 このメニューから、 カスタムクラス その後 左クリック ドロップダウンから表示するクラス。 これにより、選択したクラスがクラスエディタで開き、その値を表示および編集できます。

編集-カスタムクラス

次の方法でカスタムクラスの値にアクセスすることもできます。 左クリック メインサイドバーインスペクターオプションにあるクラスフィールド内にあるクラスタグのXNUMXつ。

カスタムクラスの編集

Blocs クラスを視覚的に簡単に編集できる強力なクラスエディタが組み込まれています。

クラスエディタ

クラスエディタは次のように分割されます 9セクション さまざまなルールタイプと値の編集をより管理しやすく明確にするため。

クラスセクション

1。 メトリック

このオプションのセットには、幅、高さなどの測定コントロールが含まれています。

2 ボックス

このオプションのセットには、マージン、パディング、境界線などのボックスコントロールが含まれています。

3。 タイポグラフィ

このオプションのセットには、フォントサイズ、文字間隔などのタイポグラフィコントロールが含まれています。

4。 背景

このオプションのセットには、背景画像、グラデーションなどの背景コントロールが含まれています。

5.ポジショニング

このオプションのセットには、float、display、clearなどのポジショニングコントロールが含まれています。

6.影

このオプションのセットには、テキストシャドウ、ボックスシャドウなどのシャドウコントロールが含まれています。

7 フィルター

このオプションのセットには、ぼかし、彩度、コントラストなどのCSSフィルターコントロールが含まれています。

8.SVG

このオプションのセットには、ストロークの色、ラインキャップなどのSVGコントロールが含まれています。

9.フレックス

このオプションのセットには、方向、整列などのフレックスコントロールが含まれています。

3つのセクションのそれぞれの中に、標準のCSSXNUMXルールに特定の値を適用できるようにするラベル付きのユーザーインターフェイス要素がいくつかあります。

特定のブレークポイントのクラスの編集

In Blocs 表示されているブレークポイントに基づいて、任意のクラスの値を調整することができます。 これは、ユーザーがWebサイトにアクセスしたときに使用しているデバイスに応じて、ユーザーに完全にユニークなエクスペリエンスを作成できるため、非常に便利です。

特定のブレークポイントでクラスの値を編集するには、を使用してそのブレークポイントに切り替えるだけです。 ブレークポイントビュー にあるオプション センター アプリのメインツールバーのボタンを押してから、そのカスタムクラスの値を編集します。

ブレークポイントセレクタ

ブレークポイントコントロール

ブレークポイントビューコントロールがどのように機能するかについて詳しく知ることができます こちらをご覧ください。.

また、レスポンシブクラスでの作業の基本をカバーする以下のビデオレッスンを視聴することをお勧めします。

レスポンシブクラスのビデオレッスン

クラスの状態

アイテムが表示されているデバイスに基づいてアイテムの視覚スタイルを設定できるだけでなく、 Blocs クラスエディタでは、現在の状態に基づいてアイテムのスタイルを設定することもできます。 内で利用可能なXNUMXつの状態があります Blocs.

ノーマル

アイテムのデフォルトの状態。

ホバー

  :ホバー マウスカーソルがアイテムの上にあるときの状態が表示されます。

アクティブ

  :アクティブ セレクターは、アクティブなリンクを選択してスタイルを設定するために使用されます。

フォーカス

  :フォーカス セレクターは、フォーカスのある要素を選択するために使用されます。

訪れた

  :訪問 セレクターは、訪問したリンクを選択するために使用されます。

これらの状態を利用すると、ボタンの上にマウスを置いたときにボタンの色を変更したり、リンクをクリックしたときにリンクのテキストサイズを変更したりすることができます。 状態を使用すると、ユーザーが操作したときにWebページ上のアイテムの外観を動的に変更できます。これは、使いやすさに関するメッセージを伝える必要がある場合に非常に役立ちます。

状態変化

カスタムクラスの特定の状態の値を編集するには、単に 左クリック メインクラス名フィールドの左側にあるドロップダウンメニューボタンで、編集する状態を選択します。

クラス状態

カスタムクラスの削除

アイテムからカスタムクラスを削除するには、アイテムを選択し、サイドバーオプションから、カスタムクラスフィールドに移動して、 左クリック 小さな x の右側にある記号 クラスタグ 削除したい。 これにより、選択したアイテムからクラスが削除されます。

削除クラス

初心者向けのヒント

オブジェクトからクラスを削除しても、カスタムクラスがプロジェクトから完全に削除されることはありません。 フリーハンドクラス、カスタムクラスの削除に関する詳細については、 クラスマネージャー.

18年2020月XNUMX日に更新

この記事は役に立ちましたか?

関連記事