CSS (カスケーディング スタイル シート) は、Web 開発者が Web サイトの複数のページにわたって統一感のある視覚的に美しい外観を作成するために使用するデザイン言語です。HTML は主にテキストコンテンツを決定しますが、CSS は Web サイトの視覚的な構造、レイアウト、および美観を決定します。

CSS のカスタマイズは、CSS に関する高度な知識がある場合にのみ推奨されます。Brandguide に独自のコードを実装する場合、カスタマー サポートはサポートできません。

XSS 攻撃を防ぐために、コードはサニタイズされます。当社の開発者は、いつでも Brandguide コードに変更を加え、CSS や HTML に影響を及ぼす可能性があることに注意してください。

CSS構文

CSS 構文は一連のルールで構成されます。これらのルールには、セレクター、プロパティ、値の 3 つの部分があります。

セレクター { プロパティ: 値;  }

セレクターは、スタイルを設定する HTML 要素を表します。プロパティは、色、フォント ファミリ、余白など、HTML 要素の特定の側面を参照します。CSS で使用されるすべてのプロパティには、16 進コードやピクセル値など、受け入れられる値のセットがあります。

セレクターには、セミコロンで区切られた複数のプロパティと値のペアを含めることができます。たとえば、次の例では、指定されたプロパティの値がすべての h1 タグに適用されます。

h1 { フォントファミリー: コミックサンズ; フォントサイズ: 12px; 色: 青;  }

一般的な CSS セレクター

CSS タイプセレクター

CSS タイプ セレクターは、Web ページ内の特定のタイプのすべての要素を選択します。

一般的な型セレクターの例をいくつか示します。

• p: すべての段落タグを選択します。
• a: すべてのハイパーリンクを選択します。
• h1: すべての h1 ヘッダー タグを選択します。
• span: すべての span タグを選択します。
• body: Web ページ本文内のすべての要素を選択します。
• ボタン: Web ページ上のすべてのボタンを選択します。
• li: すべてのリスト項目を選択します。

CSS クラスセレクター

CSS クラスは、HTML 要素のグループを定義するために使用される属性です。これにより、単一のセレクターを使用して複数の要素をカスタマイズできるようになります。これは、CSS のクラス名の前にピリオド (.) 文字を入力することで実現できます。たとえば、以下のサンプル ヘッダーと段落のフォントを変更するには、次のようにします。

ヘッダー  
段落

i-am-a-class クラスを持つすべての要素をターゲットにするには、次の CSS を使用します。

.i-am-a-class { フォントファミリー: ヘルベチカ;  }

CSS IDセレクター

CSS ID は、Web ページ上の単一の一意の要素を定義するために使用される属性です。特定の ID を持つ要素を選択するには、ID の前にハッシュ (#) 記号を入力します。たとえば、以下の段落のフォントを変更するには、次のようにします。

段落

i-am-an-id の ID を持つ要素のみをターゲットにするには、次の CSS を使用します。

#私はイドである { フォントファミリー: ヘルベチカ;  }

CSSプロパティ

テキストプロパティ

• フォントファミリー:テキストフォントを設定します。例: 「Arial」または「Times」
• フォントサイズ:フォントサイズを設定します。例: 5ピクセルまたは1em
• フォントの太さ:フォントの太さや太さを設定します。例: 「太字」または200
• 色：テキストの色を設定します。例：青、#add8e6 または rgb(135,206,250)
• 行の高さ:行間の垂直スペース、例： 5ピクセルまたは1em
• 文字間隔:文字間のスペース、例： 5ピクセルまたは1em
• 単語間隔:単語間のスペース、例： 5ピクセルまたは1em

背景プロパティ

• 背景色:要素の背景色を設定する例青、#add8e6 または rgb(135,206,250)
• 背景画像: URLに基づいて背景画像を設定します。例: url('サンプル画像.jpg')
• 背景位置:背景画像の開始位置を設定します。例：中央または50%

間隔プロパティ

以下のプロパティは、auto、inherit、%、または任意のCSS長さ単位を受け入れます。

• 身長：要素の高さを設定します
• 幅：要素の幅を設定します
• パディング:要素のパディングスペースを設定します
• マージン：要素の余白スペースを設定します

長さと単位

• ピクセル:ピクセル（1px = 1インチの1/96）
• それら:要素のフォントサイズに相対的（3em = 現在のフォントサイズの3倍）
• vw:ビューポートの幅の1%に相対
• vh:ビューポートの高さの1%を基準に
• %:親要素に対する相対

Chrome DevTools を使用して要素を検索する

Chrome DevTools は、Google Chrome ブラウザに直接組み込まれた Web 開発ツールのセットです。これらのツールを使用すると、任意の Web サイト上の HTML 要素と既存の CSS スタイルをすばやく見つけることができます。

1. DevToolsにアクセスするには、ページを右クリックして検査するまたは、Command+Option+C (Mac) や Control+Shift+C (Windows、Linux、Chrome OS) などの短いコマンドを使用します。

2. DevTools パネルが開いたら、ページ上部の Inspect ツールを選択します。

3. 次に、スタイルを設定するページ上の要素をクリックします。この要素をカスタマイズするために使用できるセレクターは、「要素」タブで強調表示されます。その下の「スタイル」タブには、その要素に現在適用されている CSS スタイル ルールが表示されます。

4. この例では、DevTools インスペクターを使用して見つけた nav-link クラスを利用して、ナビゲーション リンクの色を #6b646b に変更します。また、宣言の最後に「!important」プロパティを追加して、要素のそのプロパティの以前のスタイルをすべて上書きします。

5. CSS が更新され、変更が保存されると、ナビゲーション テキストの色が #6b646b に変更されていることがわかります。

サードパーティのフォントの追加

@font-face は、Brandguide でサードパーティのフォントをインポートして使用できるようにする CSS ルールです。ブロック レベルではなく、グローバル設定レベルで CSS を使用してフォントを追加することをお勧めします。

サードパーティのフォントを追加するには 2 つの方法があります。

URLをコピーして貼り付ける

最初のオプションは、選択したフォント ライブラリに移動し、Brandguide に追加するフォントを選択して、URL をコピーして貼り付けることです。このプロセスの概要は以下のとおりです。

構文:

以下の構文をコピーして、Brandguide のカスタム CSS セクションに追加できます。これはフォントをインポートするために必要な唯一の CSS です。別のフォントをインポートするには、フォント ファミリ、ソース URL、および形式を選択したフォントに変更するだけです。

@フォントフェイス { フォントファミリー: 'Satisfy';  src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) フォーマット('woff2');  }

フォントの URL と形式の検索:

1. 選択したフォント ライブラリに移動し、Brandguide に追加するフォントを選択します。今回は、満足するGoogle Fontsより。

2. 選択したら、@import URL をコピーして新しいブラウザ タブに貼り付けます。

3. これにより、フォントを Brandguide にインポートするために必要な URL と形式を含むページが表示されます。

4. src URL をコピーし、@fontface コードと font-family に貼り付けます。次に、コードを CSS ボックスに貼り付けます。変更内容は自動的に更新されます。

5. 選択CSSを更新する変更を保存します。

6. 新しくインポートされたフォントは、[グローバル設定] フライアウトの [既定の書体] ドロップダウンに表示されます。

フォントをWOFFまたはWOFF2形式に変換する

2 番目のカスタム書体オプションは、フォントを woff または woff2 形式に変換することです。この Web フォント形式は、ttf/otf テキスト ファイル形式よりもブラウザーとの互換性が高くなります。This process is outlined below.  

独自のフォント

1. フォントをwoff または woff2 形式。This web font format is more compatible for browsers than ttf/otf text file formats. 

2. フォントをBrandfolder内のファイル セクションにアップロードします。

3. アセットを開き、埋め込みタブに移動して選択しますリンクをコピーします。

4. グローバル設定フライアウトに移動します。以下の構文をコピーして、グローバル設定フライアウトの CSS セクションに追加できます。これはフォントをインポートするために必要な唯一の CSS です。To import a different font, simply change the font-family, source URL, and format to your chosen font. 構文を入力すると、変更が保存されます。

@font-face { フォントファミリー: 'boldweb'; src: url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. この方法でインポートされたフォントは、「デフォルトの書体」ドロップダウンに表示されません。代わりに、CSS セクション内でフォントを手動で適用する必要があります。以下は、インポートされた段落タグに太字 Web フォントを適用する例です。

ｐ { フォントファミリ: 'boldweb'; 色: #333;  }

ビデオを追加

以下の手順に従って、ブランドガイドにビデオを追加できます。

1. ビデオのアセットモーダルを開きます。
2. に移動埋め込みタブ。 
3. ビデオ埋め込みコードを見つけて、リンクをコピー。 
4. コードを HTML ブロックに貼り付けます。