タイプパターンとスタイルガイド

過去6年間、私はWebデザインで「タイプパターン」と呼ばれるものを利用し、肯定的な結果を達成しました。この記事では、これらのパターン、CSSでの実装、およびタイポグラフィワークフローを合理化する方法について説明します。

これは、quarkxpress、Indesign、Coreldrawなどのデスクトップパブリッシングソフトウェアの「パラグラフスタイル」に相当するHTML/CSSと考えてください。本のデザインでは、本全体で見出しのタイポグラフィを動的に調整する必要があるかもしれません。これには、誤字パターンを中心に制御する必要があります。

ほとんどの設計ソフトウェアはこの機能を提供しますが、インターフェイスはさまざまです。通常、「ベース」段落スタイルが存在し、他のスタイルが派生します。段落スタイルはブロックレベルの要素を管理し、文字スタイルはインライン要素（太字、一意のスパン）を処理します。

コア原理は一貫性を保っています。キー：値ペア、ミラーリングCSSプロパティ：値ペア。

 H1 {
  フォントファミリー：「Helvetica Neue」、Sans-Serif;
  フォントサイズ：20px;
  font-weight：bold;
  色：フクシア;
}

定義されると、スタイルはテキストに適用されます。 「」シンボルは、多くの場合、スタイルの変更を示します。スタイルを再定義すると、プロジェクト全体の変更が適用されます。

これはCSSクラスに似ていますが、ウェブサイトのデザインは複雑さを示します。画面サイズは劇的に異なり、それに応じて適応するコンテキストを意識するスタイルを要求します。

本質的なタイポグラフィコントロール

初期の開発では、セマンティックHTMLが導入されることがよくあります。

<h1 id="見出しレベル">見出しレベル1</h1>
<p>段落テキスト。</p>
<h2 id="見出しレベル">見出しレベル2</h2>
<p>その他の段落テキスト。</p>

これらの要素をターゲットとするCSSとペアになっています。

 H1 {
  フォントサイズ：50px;
  色：＃ff0066;
}

H2 {
  フォントサイズ：32px;
  色：RGBA（0,0,0、.8）;
}

p {
  フォントサイズ：16px;
  色：deepskyblue;
  ラインハイト：1.5;
}

これは機能し、視覚的な階層を確立します。ユーザーエージェントスタイルはデフォルトのスタイリングを提供し、CSSがなくても基本的な階層を確保します。

大規模なプロジェクトの複雑さ

ウェブサイトが成長すると、複雑さが増します。当初、ユニークなクラスで十分かもしれませんが、これは持続不可能になります。特別ケースのクラスが出現します：

<h1 id="メインの見出し">メインの見出し</h1>
<p><em>強調</em>した段落。</p>
<p>通常の段落。</p>

次に、クラスが急増します：

<h1 id="メインの見出し">メインの見出し</h1>
<main><h2 id="サブヘッディング">サブヘッディング</h2>
<p>段落テキスト</p></main>

新しい開発者は、デフォルトのフォントサイズとマージンに苦労し、 margin-top: -20pxのようなハッキングにつながる場合があります。これにより、多くの場合、ユーザーエージェントスタイルが認識されていないため、CSSカスケードに対する「戦い」が生まれます。

実世界のシナリオ

多数の色、レイアウト、タイポグラフィースタイルのピクセルに最適なPhotoshopドキュメントを受け取ることを想像してください。多数のページで再利用可能なスタイルを特定するには、多大な努力が必要です。小画面の考慮事項はしばしば見落とされ、さまざまな画面サイズにわたる一貫性のないパターンがさらに複雑になります。スタイルガイドは存在するかもしれませんが、フロントエンド開発に必要な特異性がありません。

詳細なスタイルのガイドでさえ、設計文書で不一致にすることができ、混乱につながります。あなたのキャリアの早い段階で、あなたはすべてを解読し、ピクセルの値をCSSに変換する義務があると感じるかもしれません。ただし、これはルールが重複していることにつながります。

 .blog article p { / * ... styles ... * /}
.welcome .main-message { / * ...同様のスタイル... * /}
/ * ...その他の重複スタイル... */

bodyセレクターのスタイルを統合することを試みるかもしれませんが、これは非常に広くなる可能性があります。

設計改訂

設計の変更により、多数のCSSルールを更新する必要があり、競合とさらなる複雑さにつながります。ソリューションには、多くの場合、クラスを作成して要素に適用し、レイアウトとタイプパターンを分離します。

 .Standard-Text { / * ... Styles ... * /}
.heading-1 { / * ...スタイル... * /}
.medium-heading { / * ... styles ... * /}

これにより、保守性が向上し、プラグアンドプレイのスタイリングが可能になりますが、HTMLの変更が不可能な状況に対処しません（例えば、CMS）。

CMSで作業します

CMSを扱う場合、直接的なHTMLコントロールが不足しています。 SASSのような前処理室のミックスインは解決策を提供します。

 @mixin standard-type（）{ / * ... styles ... * /}
.context .thing {@include standard-type（）; }

ただし、ミキシンを単純に見出しレベルと関連付けることは制限される可能性があります。代わりに、コンテンツの望ましいトーンを反映して、「音声」（例えば、 calm-voice 、 loud-voice 、 attention-voice ）でスタイルを整理することを検討してください。

 @mixin calm-voice（）{ / * ... styles ... * /}
@mixin loud-voice（）{ / * ... styles ... * /}
@mixin attention-voice（）{ / * ... styles ... * /}

このアプローチは意味を高め、学際的なコミュニケーションを促進します。 articleコンテキスト内でこれらのミキシンを適用します。

記事 {
  h1 {@include loud-voice（）; }
  h2 {@include attention-voice（）; }
  p {@include calm-voice（）; }
}

これには、さまざまなコンテンツ構造と潜在的な矛盾を処理する必要があります。間隔やその他の要素を管理するには、追加のCSSルールが必要になる場合があります。

別のプリプロセッサであるスタイラスは、簡潔な構文を提供しますが、現在は堅牢なツールがありません。

タイプパターン：ソリューション

タイプパターンは、ミキシンまたはクラスを介して実装されているかどうかにかかわらず、一貫したスタイリングのプラグアンドプレイシステムを提供します。それらはユーティリティクラスと組み合わせることができます。ライブスタイルのガイド、タイプのパターンを取り入れ、チームのコラボレーションを促進し、ピクセルプッシングを削減します。このアプローチは、あらゆるサイズのプロジェクトに利益をもたらします。

可変フォントサイズは、レスポンシブデザインのためにclamp()およびvminユニットを使用して管理できます。このアプローチはより多くのCSSを生成しますが、保守性とチームコラボレーションの優先順位付けが重要です。

CSSを超えて：コラボレーション

タイプパターンは、デザイナーと開発者の間のコラボレーションを促進します。ビジュアルデザイナーは美学に集中でき、開発者は構造とレイアウトを管理できます。ライブスタイルガイドは、デザインプロセスを合理化する単一の真実の源として機能します。このアプローチは、広範なピクセルに最適なモックアップの必要性を減らし、より反復的な設計探索を可能にします。 IndesignとIllustratorの段落とキャラクタースタイルはインスピレーションを提供しますが、応答性がありません。包括的なスタイルガイドには、パディングの比率、色、ライン幅が含まれる場合があり、設計の一貫性を促進します。最終的な詳細は、実際のデバイスで協力して洗練されています。

以上がタイプパターンとスタイルガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。