HTML マークアップ

HTML 要素を使用すると、特定の要素タイプにデフォルトのスタイルを指定し、多数の要素を同時にカスタマイズすることで、設計プロセスを開始できます。サイトの設計を進めるにつれて、これらのデフォルトのスタイルをクラスや結合クラスに置き換えることができます。

便利なヒント: Webflow のリッチ テキスト フィールド内の要素をカスタマイズするには、HTML 要素を活用することが重要です。詳細については、リッチ テキスト フィールドに関するチュートリアルを参照してください。

このチュートリアルを通じて、以下のことを理解できるようになります。

1. スタイルを設定できる要素
2. 本文（全ページ）要素をパーソナライズする方法
3. 見出し要素をカスタマイズする方法
4. 段落要素のスタイル設定方法
5. リンク要素のスタイル設定方法
6. タグ指向のスタイルガイドを確立する方法

スタイルを設定できる要素

要素はピンク色で示され、青色のクラスや緑色の状態と区別されます。以下は、スタイル設定可能な要素を含む要素タイプのまとめです。

• 本文（全ページ）
• H1 見出し
• H2 見出し
• H3 見出し
• H4 見出し
• H5 見出し
• H6 見出し
• 段落
• リンク（テキストリンク、ボタン、リンクブロック）
• 画像
• 順序なしリスト
• 順序付きリスト
• リスト項目
• ラベル
• 強い（インライン太字テキスト）
• Ems (インライン斜体テキスト)
• ブロック引用
• 図（リッチテキスト）
• 図のキャプション（リッチテキスト）
• すべてのコード

その他の要素には、 クラス および/または 複合クラス.

本文（全ページ）要素をパーソナライズする方法

タイポグラフィスタイルの設定 本文（全ページ）要素 サイト全体のタイポグラフィに反映されます。ここで「Body」は、他のすべてのページ要素を含むサイトページ全体を意味します。デフォルトのフォントファミリー、フォントサイズ、行の高さを 本文（全ページ） 要素を選択し、H1-H6 見出し要素でそれらのスタイルを置き換えます。

スタイルを設定するには2つの方法があります 本文（全ページ） 要素：

• を選択 体 要素を選択し、 本文（全ページ）要素 から セレクターフィールド ドロップダウンの スタイルパネル
• 任意の要素を選択し、 本文（全ページ）要素 継承メニューから スタイルパネル — すべての要素は、 本文（全ページ）要素

到達するには 本文（全ページ） 要素：

1. を選択 体 任意のページの要素
2. を入力 セレクターフィールド の中に スタイルパネル
3. 選ぶ 本文（全ページ） ドロップダウンから要素を選択

継承メニューを使用して、クラスが適用された要素のタグを観察して選択するには:

1. クラスを持つ要素を選択する
2. 上の継承メニューリンクをタップします セレクターフィールド の中に スタイルパネル  
3. タグを選択します（例：すべての段落）
4. スタイルを適用する

変更内容 本文（全ページ） 出発点として機能し、タグとクラスの間に顕著な違いを示します。タグを使用すると、要素のグループ化のデフォルトのスタイルを決定できます。 

選択する 本文（全ページ） スタイルの変更は、すべての新規および既存の要素が 本文（全ページ） 要素。 本文（全ページ） フォント、フォント サイズ、フォントの色、行の高さ、デフォルトの背景色などのデフォルトのスタイルを定義できます。 

クラスを利用して、サイト上のデフォルトのスタイルを置き換えることができます。

見出し要素をカスタマイズする方法

挿入すると 見出し あなたのサイトには、 本文（全ページ） 要素。（忘れないでください。継承メニューを使用してスタイルの継承を確認できます。 セレクターフィールド の中に スタイルパネル.)

各見出しにクラスを追加せずにスタイルを上書きしたい場合は、 セレクターフィールド そして選択する すべての H1 見出しこれは、フォントが Body (すべてのページ) から継承されていることを示しています。これは予想どおりです。したがって、フォントを変更すると、すべての H1 が更新されます。 

たとえば、デフォルトのフォントがTahomaに設定されている場合、 本文（全ページ）タグ 自動的にTahomaがすべての新しいH1見出しに適用されます。 すべての H1 見出しタグ Playfair に設定すると、すべての H1 見出しが Playfair で表示されます。特定の H1 見出しにクラスを追加し、フォントを Raleway に設定すると、その特定の H1 (および同じクラスを使用する他の H1) が Raleway に変更されます。

覚えておいてください: 要素は階層内で最も近いスタイル情報を検索します。

H1のような要素には、スタイルを指定するクラスがある場合があります。クラスに特定のスタイルの詳細がない場合、H1は次のレベルを参照し、そのクラスからスタイルのヒントを採用します。 すべての H1 見出しタグ、これは、 本文（全ページ）タグ.

覚えて： タグはデフォルトのスタイルを定義するのに役立ち、クラスはそれらのデフォルトをオーバーライドできるようにします。

役立つヒント: 見出しのタイポグラフィ スタイルは、通常、段落のスタイルとは異なります。すべての見出しタグ (H1 ～ H6) で同じフォント ファミリを使用するのが一般的です。

段落タグをカスタマイズする方法

任意の段落（特定のクラスなし）を選択し、 すべての段落タグ の中に スタイルパネル スタイルを調整します。

たとえば、次のように行の高さを変更できます。

1. アクセス 身長 フィールドの下 タイポグラフィ
2. 値を調整する（例：1.6）
3. ハイフンを入力するか、単位ドロップダウンから選択して単位のない値に変換します。

プロのヒント: Unitless を使用すると、行の高さがフォント サイズに比例して調整されます。

あなたは すべての段落タグ 段落間にスペースを挿入します。キーボードの「Return」または「Enter」を押したときと同様の効果があります。行の高さにより、行から行へのテキストの結合が防止され、下余白により、段落間に垂直方向のスペースが確保されます。

リンクタグをパーソナライズする方法

追加するには リンク ウェブサイトに次の機能を追加できます。

• から選択してください 要素の追加パネル
• キャンバス上の既存のテキストをダブルクリックします
• リンクするテキストをハイライトし、ネストされたテキストリンクを作成します

リンクのデフォルト スタイルを変更するには:

1. アクセス セレクターフィールド
2. 選択してください すべてのリンク 鬼ごっこ
3. テキストの装飾やフォントの色を変更する

追加された新しいリンクは、 すべてのリンクタグ.

致命的： 適用されたスタイルは すべてのリンクタグ テキストリンク以外にも、さまざまなリンクタイプに影響します。たとえば、 すべてのリンクタグ とともに ホバー状態 activated は、ボタンなどのリンクされたすべての要素に影響します。必要に応じて、ボタン クラスでこれらのホバー状態スタイルをオーバーライドする必要があります。

タグはグローバルデフォルトを設定するのに役立ちますが、慎重に管理しないと広範囲に影響を及ぼす可能性があります。タグベースのスタイル調整によって影響を受ける要素を視覚的に確認することを忘れないでください。

タグベースのスタイルガイドを作成する方法

スタイルガイドを使用すると、設計プロセスの早い段階でデフォルトのサイトスタイルを確立できます。Webflowは、 タグベースのスタイルガイド これを複製して、洗練されたスタイル ガイドを備えた新しい Web サイトを開始できます。

注記： スタイル ガイドのコンテンツを非公開にしてオンラインで検索できないようにしたい場合は、必ずそのコンテンツを保護するか、検索エンジンによるインデックス作成を禁止してください。

シンプルなスタイルガイドテンプレートを作成する方法

スタイル ガイドは、共通の要素が構造化され、スタイル設定され、デフォルトのスタイルを簡単にプレビューできる専用ページとして機能します。スタイル ガイド テンプレートを作成すると、作成する新しい Web サイトごとにスタイル ガイドを迅速に作成できます。

スタイル ガイド テンプレートを作成するには:

1. シングルページサイトを構築する
2. ページにセクションを追加する
3. スタイル設定のために、HTMLタグを使用して各要素のインスタンスを少なくとも1つ追加します。
4. これらの要素にクラスを適用しないでください

このテンプレートを新しいサイトで使用するには:

1. 新しいサイトに新しいページを作成する
2. ページに名前を付ける（例：「スタイルガイド」）
3. ページを下書きとして保存する
4. テンプレートサイトへ
5. セクションを選択してコピーする
6. 新しいサイトの「スタイルガイド」ページに貼り付けます
7. 各要素を選択し、それに応じてHTMLタグのスタイルを設定します。

重要な： スタイリングを見逃さないでください 本文（全ページ）タグ — ページ本文を複製/貼り付けすることはできないため、新しいサイトの「スタイルガイド」ページでスタイルを設定する必要があります。 本文（全ページ）タグBody 要素の詳細については、こちらを参照してください。