ホームページ ウェブフロントエンド CSSチュートリアル Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル

Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル

May 16, 2016 pm 12:08 PM

Web ページ作成の初心者は、Web ページの背景として美しい写真を使用することに慣れているかもしれませんが、大規模な商用 Web サイトを閲覧すると、白、青、黄色などを多く使用して Web を作成していることがわかります。ページがより魅力的に見えます。エレガントで、寛大で、温かみがあります。さらに重要なことは、これにより、閲覧者が Web ページを開く速度が大幅に高速化されることです。

一般的に、Web ページの背景色は、自然で快適に見えるように、暗いテキストと組み合わせて、より柔らかく、よりプレーンで、明るくする必要があります。より目を引く視覚効果を得るには、タイトルに暗い色を使用します。以下は、私がウェブページを作成したり、他の人のウェブページを閲覧したりする際に、ウェブページの背景色と文字色を一致させた経験です。これらの色は、テキストの背景色やタイトルの背景色として使用できます。様々なフォントと組み合わせると、きっと素敵な効果が得られるはずです。ウェブページを作成する際に、皆様のお役に立てれば幸いです。

Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#F1FAFA″——テキストの背景色は上品で上品です
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#E8FFE8″——タイトルの背景色が良くなりました
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#E8E8FF″——本文の背景色が良くなり、文字色は黒になります
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#8080C0″——- 黄色と白のテキストの方が良い
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″# E8D098″— ——水色または青色のテキストを上部に置く方が良いです
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#EFEFFDA″——-上部が水色です。色または赤いテキストの方が良いです。
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#F2F1D7″——黒のテキストはエレガントです。赤、目を引くように見えます
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#336699″—白い文字を使用するとより良く見えます
BgcolorΚ″#6699CC″——白い文字を使用すると見栄えがよくなります。タイトルとして使用できます。
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#66CCCC″——白い文字の方が見栄えが良くなります。タイトルとして使用できます。
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″# B45B3E″——白い文字を使用すると見栄えが良くなります。タイトルとして使用できます
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#479AC7″——白い文字で見栄えが良くなります。タイトルとして使用できます。
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#00B271″——白い文字の方が見栄えが良くなります。タイトルとして使用できます。
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#FBFBEA″——通常はメインテキストとして黒いテキストを使用すると、見栄えが良くなります
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#D5F3F4″ ——通常はメインテキストとして黒色のテキストを使用した方が見栄えがよくなります
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#D7FFF0″——黒のテキストを使用すると見栄えが良くなります通常はメインテキストとして黒色のテキスト
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ "#F0DAD2"—通常はメインテキストとして黒色のテキストを使用すると、見栄えがよくなります。本文
Webページのカラーマッチングスキル、文字フォント、フォントサイズ、フォントレイアウトなど_基本チュートリアル BgcolorΚ″#DDF3FF″——一般に本文として黒色のテキストがより良く見えます
薄緑色背景に黒のテキスト、または白の背景に青のテキストはどちらも目を引きますが、前者は背景を強調表示し、後者はテキストを強調表示します。赤の背景に白の文字、または濃い色の背景に黄色の文字が非常に効果的です。
この記事は「紹介」としてのみ機能します。想像力を駆使して、より革新的で人目を引く色を組み合わせて、Web ページをより魅力的にすることができます。

現在、インターネットはますます普及しています。 . 最近、インターネットサーフィンは徐々に私たちの生活に欠かせないものになりました。オンラインの世界は多彩で、優れた美しい Web ページが数多く登場しています。ネットワーク上の膨大な情報を表現するのは、テキスト、画像、Flashアニメーションなどにほかなりません。中でもテキストはWebページにおいて最も重要なデザイン要素です。 Webデザイン初心者にとって、Webデザインにおける文字のレイアウト設計を理解し、使いこなすことは特に重要であるため、以下に筆者の個人的な意見を述べたいと思います。
テキストの書式設定

フォント サイズ、フォント、行間隔

フォント サイズは、points#quotel.quoter# やピクセル(ピクセル)。ピクセル技術による印刷はポイントに換算する必要があるため、単位としてポイントを使用することをお勧めします。
Web ページの本文を表示するのに最適なフォント サイズは約 12 ポイントですが、現在、多くの総合サイトでは、1 ページに配置する必要があるコンテンツの量が多いため、通常 9 ポイントのフォント サイズが使用されています。大きなフォントは見出しや強調が必要なその他の領域に使用でき、小さなフォントはフッターやサポート情報に使用できます。フォント サイズが小さいと、統一感や洗練された印象が得られる傾向がありますが、読みにくくなることに注意してください。
Web デザイナーはフォントを使用して、デザインで表現されている感情をより完全に具体化できます。フォントの選択は感情的で直感的な行為です。ただし、どのフォントを選択する場合でも、Web ページの全体的なデザインと閲覧者のニーズに基づいている必要があります。例: 太字のフォントは力強く力強く、男性的な特徴があり、機械や建設業界などのコンテンツに適しています。細字のフォントはエレガントで細心の注意があり、女性的な特徴があり、衣料品や化粧品のコンテンツに適しています。 、食品およびその他の産業。同じページ内でも、フォントの種類が少ないと上品で安定したレイアウトになり、フォントの種類が多いとアクティブでカラフルなレイアウトになります。この比例関係をページ内容からどう捉えるかが鍵となります。

プラットフォームの独立性を高める観点から、テキスト コンテンツにはデフォルトのフォントを使用することが最善です。ブラウザはローカル マシン上のフォント ライブラリを使用してページのコンテンツを表示するためです。 Web デザイナーは、ほとんどのブラウザには 3 つのフォント タイプと、それに対応するいくつかの特定のフォントしかマシンにインストールされていないことを考慮する必要があります。指定したフォントが必ずしも閲覧者のマシン上で見つかるとは限らず、これが Web デザインに大きな制限をもたらします。この問題の解決策は、特別なフォントを使用する必要がある場合、テキストを画像にしてページに挿入できることです。

行間隔の変更も、テキストの読みやすさに大きな影響を与える可能性があります。一般に、フォント サイズに近い行間設定が本文に適しています。通常の行間隔の比率は 10:12 です。つまり、文字が 10 ポイントの場合、行間隔は 12 ポイントになります。これは主に次の考慮事項によるものです。適切な行間隔では、見る人の目を誘導するために明らかな水平方向の空白の帯が形成されますが、過剰な行間隔ではテキスト行の連続性が失われます。

読みやすさに与える影響に加えて、行間自体も非常に表現力豊かなデザイン言語であり、レイアウトの装飾効果を高めるために、行間を意識的に広げたり狭めたりして、独特の美的関心を反映させることができます。たとえば、行間を広くすると、リラックスしたリラックスした雰囲気を反映することができ、エンターテイメントや叙情的な内容に適しています。また、配置を工夫することで広い空間と狭い空間を共存させることができ、空間の階層性やレイアウトの自由度を高め、独自の創意工夫を発揮することができます。

行間隔は、line-height 属性を使用して設定できます。単位としてポイントまたはデフォルトの行の高さのパーセンテージを使用することをお勧めします。例: {line-height: 20pt}、{line-height: 150%}。

テキスト全体の配置

ページのテキスト部分は、個々の単語が多数配置された集合体であり、その形状を最大限に活かす必要があります。ページ全体のレイアウトにおけるこのグループの役割。芸術的な観点から見ると、フォント自体も人の個性や感情に大きな影響を与える芸術のひとつと言えます。 Web デザインでは、フォントの処理は、色、レイアウト、グラフィックスなどの他のデザイン要素の処理と同じくらい重要です。ある意味、すべてのデザイン要素はグラフィックとして理解できます。

1.テキストのグラフィックス

フォントには 2 つの機能があります。1 つは単語の意味と意味論の機能を実現することであり、もう 1 つは美的効果です。いわゆるテキストのグラフィカル化とは、その美的効果を強調し、記号的なテキストをグラフィック要素として表現すると同時に、本来の機能を強化することを意味する。 Web デザイナーは、従来の方法でフォントを設定することも、芸術的にフォントをデザインすることもできます。何があっても、設計目標をより良く達成する方法にすべてを集中する必要があります。
テキストグラフィックと画像は、深いデザインアイデアをより創造的な形で表現することができ、Webページの単調さや当たり障りのないものを克服し、人々に感動を与えることができます。

2.テキストの重ね合わせ

テキストと画像の間、またはテキストとテキストの間で重ね合わせた後、空間、ジャンプ、透明性、ノイズ、物語の感覚を生み出すことができ、アクティブで目を引くページになります。要素。オーバーレイ技術はテキストの読みやすさに影響しますが、ページ上に独特の視覚効果を生み出すことができます。読みやすさを追求するのではなく、あえて「ノイズ」を追求するこの表現手法は、芸術的な傾向を体現しています。したがって、従来のレイアウト設計だけでなく、Web デザインでも広く使用されています。

3.タイトルとテキスト

タイトルとテキストを配置するときは、まずテキストを 2 列、3 列、または 4 列に配置することを検討してから、タイトルを配置します。テキストを列に分割する目的は、ページ上のスペースと柔軟性を確保し、列の硬直性とタイトル挿入方法の単一性を回避することです。タイトルは段落または記事全体のタイトルですが、必ずしも段落の先頭に配置する必要はありません。中央、水平、垂直、または側面に配置することができ、単語グループに直接挿入して、斬新なレイアウトで古いルールを打ち破ることもできます。

4.文字配置の基本的な4つの形

ページの文字部分は、個々の単語が多数配置されたグループであり、全体のレイアウトの中でこのグループの形の役割を十分に発揮する必要があります。ページの。
両端均等:文字の左端から右端までの長さが均等で、文字群が正方形の面を形成しており、直立的で厳格で美しい印象を与えます。
中央配置:文字間隔が等しい場合に、ページの中心を軸に文字を配置することで、文字がより目立ち、左右対称の形式美が生まれます。
左揃えまたは右揃え: 左揃えまたは右揃えにすると、線の始点または終点が自然に明確な縦線になり、グラフィックと合わせやすくなります。この編曲法は、緩さと緊迫感、空虚さと堅固さ、跳躍と優美さを兼ね備え、リズムとリズムの形式美を生み出しています。左揃えは人々の読書習慣に適合しており自然に見えますが、右揃えは読書習慣に適合していないためめったに使用されませんが、斬新に見えます。
画像の周囲に配置: 画像の端にテキストを配置します。ベース画像をテキストに挿入すると、調和がとれて自然な感じになります。

言葉の強調

1.行頭の強調
テキストの最初の単語または文字を拡大して装飾的にし、段落の先頭に埋め込みます。これは、従来のメディア レイアウト デザインでは「ドロップ スタイル」と呼ばれます。 。この技術の発明は、ヨーロッパの中世の書記にまで遡ることができます。注目を集め、装飾し、レイアウトを活性化するため、Web ページのテキスト レイアウトに使用されます。ドロップは完全なラインの上限と下限の範囲にまたがる必要があります。倍率に関してはWebページの環境に依存します。
2.引用の強調
Web ページ上にテキストを配置するとき、要点を概説するテキスト、つまり引用に遭遇することがよくあります。引用は段落、章、またはテキスト全体の主なアイデアを要約するものであるため、レイアウト内で強調するために特別なページ位置とスペースを与える必要があります。引用文は、本文の左右、上下、中央に埋め込むなど、さまざまな方法で配置でき、本文と異なるフォントやサイズにすることもできます。
3.個々の単語の強調
ページ上で個々の単語をアピールの焦点として使用する場合、太字、枠取り、下線、指示記号、斜体フォントなどによって、単語の視覚効果を意識的に高めることができます。ページ全体で目立ち、目を引くようにします。さらに、一部のテキストの色を変更すると、その部分のテキストが強調されることがあります。これらの方法では、実際にはコントラストの法則が使用されます。

テキストの色

Web デザインでは、デザイナーはテキスト、テキスト リンク、訪問済みリンク、現在アクティブなリンクにさまざまな色を選択できます。たとえば、FrontPage エディタを使用する場合、デフォルト設定は次のようになります。通常のフォントの色は黒、デフォルトのリンクの色は青、マウスをクリックすると紫に変わります。文字の色を変えることで強調したい部分をより目立たせることができますが、文字の色はほんの少ししか使えず、すべてを強調したい場合は何も強調しなくなってしまうので注意が必要です。さらに、特別なデザイン目的がない限り、ページで使用する色が多すぎると、閲覧者がページのコンテンツを読み取る能力に影響を与えます。

テキスト全体の特別な部分を強調することに加えて、色の使用はコピー全体の感情表現にも影響を与える可能性があります。これには色の感情的象徴性が関係しますが、紙面の都合上、ここでは詳しく説明しません。

もう 1 つ注意すべき点は、文字色のコントラストです。これには、明るさのコントラスト、純粋さのコントラスト、暖かさと冷たさのコントラストが含まれます。これらはテキストの読みやすさに影響を与えるだけでなく、さらに重要なことに、色の使用を通じて望ましいデザイン効果、デザイン感情、デザインアイデアを実現できるということです。

1. 色処理

色は人間の視覚にとって最も敏感なものです。ホームページの色をうまく扱えば、それがおまけとなり、半分の労力で 2 倍の結果を達成することができます。色の一般的な適用原則は、「全体的な調整、局所的なコントラスト」である必要があります。つまり、ホームページの全体的な色の効果は調和する必要があり、局所的で小さな領域のみが強い色のコントラストを持つことができます。色の使用では、ホームページのコンテンツのニーズに応じて、異なるメインカラーを使用できます。色は象徴的なものであるため、たとえば、テンダー グリーン、エメラルド グリーン、ゴールデン イエロー、トープは、それぞれ春、夏、秋、冬を象徴することができます。次に、軍や警察のオリーブグリーン、医療やヘルスケアの白など、プロフェッショナルな色があります。色には、冷たさ、暖かさ、前進と後退の効果など、明らかな心理的感情もあります。また、色にも国民性があり、環境、文化、伝統などの影響により、民族ごとに色の好みも大きく異なります。これらの色の特徴を最大限に活用することで、ホームページに芸術的な意味合いを持たせることができ、ホームページの文化性を高めることができます。一般的に使用される配色をいくつか示します。

1. 暖色系。つまり、赤、オレンジ、黄色、黄土色などの色の組み合わせです。この色を使用すると、ホームページに暖かく、温かく、熱狂的な雰囲気を与えることができます。

2. クールな色。つまり、シアン、グリーン、パープル、その他の色の組み合わせです。この色を使用すると、ホームページに静かでクールでエレガントな雰囲気を与えることができます。

3. コントラストトーン。それは、まったく反対の色の性質を持つ色を同じ空間内で一致させることです。例: 赤と緑、黄と紫、オレンジと青など。この色の組み合わせは、強力な視覚効果を生み出し、人々に明るくカラフルでお祭り気分を与えます。もちろん、対照的なトーンは間違って使用すると逆効果になり、安っぽく人目を引く効果を生み出す可能性があります。これには、「大調和、小コントラスト」という重要な原則を理解する必要があります。つまり、全体のトーンが統一され調和している必要があり、局所的に小さな強いコントラストが存在する場合があります。

最後に、ホームページの背景色(背景色)の濃さと明るさも考慮する必要があり、写真の言葉を借りると「ハイキー」と「ローキー」になります。背景色が明るいものをハイキー、背景色が暗いものをローキーと呼びます。背景色が暗い場合はテキストの色を明るくし、暗い背景を使用して明るい色のコンテンツ (テキストまたは画像) を目立たせる必要があります。逆に、背景色が明るい場合は、テキストの色を目立たせる必要があります。テキストはより暗くする必要があり、暗いコンテンツを目立たせるために明るい色の背景を使用する必要があります。コンテンツ (テキストまたは画像)。この奥行きの変化は、色彩科学では「明るさの変化」と呼ばれます。一部のホームページでは、背景色は黒ですが、テキストも暗い色で表示されていますが、色の明るさが比較的近いため、読むときに読者の目が非常に硬く感じられ、読書効果に影響を与えます。もちろん、色の明るさを大きく変更することはできません。そうしないと、画面上の明るさのコントラストが強すぎて、読者の目に耐えられなくなります。

ウェブ ページのカラー マッチング

ウェブ ページの色はウェブサイトのイメージを確立するための鍵の 1 つですが、カラー マッチングはネチズンにとって頭の痛い問題です。 Web ページの背景、テキスト、アイコン、境界線、ハイパーリンクにはどの色を使用する必要がありますか?また、期待される含意を最もよく表現するにはどの色と組み合わせる必要がありますか?アジエは、皆さんにインスピレーションを与えることを願って、ここでいくつかの経験について話します。

まず、色の基本的な知識を理解しましょう。

1. 色は光の屈折によって生成されます。

2. 赤、黄、青が三原色であり、これらの三原色に他の色を混ぜることができます。 WebページのHTML言語での色の表現は、この3色の数値で表されます例:赤は色(255,0,0)、16進数表現では(FF0000)、白は(FFFFFF) , よく見かける「bgColor=#FFFFFF」は背景色が白であることを意味します。

3. 色は、無彩色と有彩色の 2 つのカテゴリに分類されます。無彩色とは、黒、白、グレー系の色を指します。色とは、無彩色を除くすべての色を指します。

4. どの色にも彩度と透明度の特性があり、特性の変化により異なる色相が生成されるため、少なくとも数百万の色を生成できます。

Web ページの制作にはカラーを使用するのが良いでしょうか、それともカラー以外を使用するのが良いのでしょうか?専門研究機関の調査によると、色の記憶効果は白黒の3.5倍だそうです。つまり、一般に、完全に白黒のページよりもカラー ページの方が魅力的です。

私たちの通常のアプローチは、メインコンテンツのテキストには非カラー (黒) を使用し、境界線、背景、画像にはカラーを使用することです。こうすることでページ全体が単調にならず、メインコンテンツが眩しくなくなります。

●色以外の組み合わせ

黒と白は最も基本的でシンプルな組み合わせで、黒地に白文字、黒地に白文字は非常に鮮明です。グレーはどんな色にも合わせられる万能色で、相反する 2 色の調和のとれた移行にも役立ちます。適切な色が見つからない場合は、グレーを試してみてください。効果は決して悪くありません。

●カラーマッチング

色は常に変化しており、カラーマッチングは私たちの研究の焦点です。私たちは色についてさらに学ぶ必要があります。

1. カラー サークル。 「赤→黄→緑→青→赤」と順番に色をオーバーグレードすることでカラーリングを得ることができます。カラーホイールの両端は暖色と寒色で、中央に中間色があります。 (以下に示すように)

赤、オレンジ、オレンジ - 黄色、黄、黄 - 緑、緑、ターコイズ、青 - 緑、青、青 - 紫、紫、紫 - 赤、赤
|___________| |____| |_________| |_________| | | | |

暖色系 中間色 寒色系 中間色

2. 色の心理的感覚。色が異なると、見る人に異なる心理的感情を与えます。

赤---刺激的な色です。刺激効果により、人々は衝動的、怒り、熱狂的、精力的な気分になります。

グリーン --- 寒色と暖色の間にあり、調和、静けさ、健康、安心感を与えます。ゴールドと淡い白を組み合わせると、エレガントで快適な雰囲気を演出できます。

オレンジ --- これもエキサイティングな色で、明るく、楽しく、温かく、ファッショナブルな効果をもたらします。

黄色---幸福、希望、知恵、そして明るい性格を持ち、最高の明るさを持っています。

ブルー --- 最もクールでフレッシュ、そしてプロフェッショナルな色です。白と混ぜることで、柔らかくエレガントでロマンチックな雰囲気を反映します(空の色など)。

白---白さ、明るさ、無邪気さ、清潔感があります。

黒 --- 深く、神秘的で、静かで、悲しく、憂鬱な感情を持ちます。

グレー---節度、平凡さ、優しさ、謙虚さ、中立性、優雅さの感覚を持ちます。

それぞれの色の彩度や透明度を少し変えると、また違った雰囲気が生まれます。緑を例にとると、黄緑は若々しく活気に満ちた視覚的芸術的概念を持ち、青緑は静かで暗い印象を与えます。

●Web カラーマッチングの原則

1. 色の鮮やかさ。 Web ページの色は明るくて目を引くものである必要があります。

2. 色のユニークさ。個性的なカラーで誰からも強い印象を与えられます。 (デザイン思考第2部のWebサイトCIの標準色を参照)

3. 色の適切さ。つまり、表現する内容の雰囲気に合った色になるということです。たとえば、女性サイトの柔軟性を反映するためにピンクを使用します。

4. 色の連想的な性質。色が異なれば連想も異なります。青は空、黒は夜、赤は楽しい出来事などを考えます。選択する色は Web ページの意味と関連している必要があります。

●Webカラーマスタリングのプロセス

Webページ制作の経験を重ねると、モノクロ→カラフル→標準色→モノクロという色の傾向が生まれます。最初は技術や知識が足りず、単色でシンプルなホームページしか作ることができませんでしたが、ある程度の基礎と素材ができたら、最高の写真や素材を積み重ねて、美​​しいホームページを作っていきたいと思っています。私がこのページに集めた中で最も満足のいく色を選びました。しかし、時間が経つにつれて、色が乱雑で個性やスタイルがないことがわかりました。Web サイトの位置を 3 度目に変更し、自分に合った色を選択し、立ち上げたサイトを選択しました。最終的なデザインコンセプトとテクノロジーが頂点に達すると、基本に立ち返って、単色または無色でもシンプルで美しいサイトをデザインできます。

○Web ページのカラー マッチングのテクニック

この記事のこの時点で、せっかちなネットユーザーは次のように尋ねるかもしれません。 「心配しないでください。すぐにカラーマスターになるのに役立つヒントをいくつか紹介します:)

1. 1 つの色を使用します。これは、最初に色を選択し、次に透明度または彩度を調整して (より簡単に言うと、色を明るくしたり、暗くしたりすることを意味します)、Web ページで使用する新しい色を生成することを指します。このようなページは色が統一されており、階層感があります。

2. 2 色を使用します。最初に色を選択し、次にその対照的な色を選択します (Photoshop で Ctrl SHIFT I を押します)。こうして私のホームページは青と黄色で決まりました。ページ全体はカラフルですが、過度にカラフルではありません。

3. カラー システムを使用します。簡単に言うと、ライトブルー、ライトイエロー、ライトグリーン、アースイエロー、アースグレー、アースブルーといった感じの色を使います。色を決定する方法は人それぞれ異なります。私は Photoshop で前景色のカラー ボックスをクリックし、表示されるカラー ピッカー ウィンドウで [カスタム] を選択し、[カラー ライブラリ] でそれを選択します :)

4 . 黒と 1 色を使用します。たとえば、真っ赤なフォントに黒い枠線があると、非常に「人気」があるように感じられます。

Web カラー マッチングのタブーは次のとおりです。

1. すべての色を使用せず、3 色までに制限してください。

2. 本文の内容を強調するために、背景と前のテキストのコントラストをできるだけ大きくする必要があります (複雑なパターンを背景として使用しないでください)。

色マッチング
STRONG>
1. 赤は温かみのある色で、強く社交的な性格を持ち、人に刺激を与える色です。赤は人の注意を引きやすい色でもあり、興奮、興奮、緊張、衝動性を感じやすく、視覚疲労を起こしやすい色でもあります。

a) 赤に少量の黄色を加えると、熱が強くなり、落ち着きがなく落ち着きがなくなります。

b) 赤に少量の青を加えると辛さが弱まり、より上品で柔らかな味になります。

c) 赤に少量の黒を加えると、落ち着いた重厚感のあるシンプルな印象になります。

d) 赤に少量の白を加えると、優しく、控えめで、内気で繊細な印象になります。

2. 黄色は冷酷、傲慢、繊細な性格を持ち、拡張性と落ち着きのなさの視覚的な印象を持ちます。黄色はさまざまな色の中で最も繊細な色です。純粋な黄色に少量の他の色が混合される限り、その色相と色の性質は大幅に変化します。

a) 黄色に少量の青を加えると、新鮮な緑に変わります。傲慢な性格も消えて、穏やかでしっとりとした雰囲気になりました。

b) 黄色に少量の赤を加えると、独特のオレンジの雰囲気が生まれ、その性格は無関心で傲慢から、測定された情熱と暖かさに変わります。

c) イエローに少量の黒を加えると、色感と色特性が最も変化し、オリーブグリーンがはっきりとわかる複雑な色の印象になります。肌の色も性質も大人っぽくなり、おおらかになりました。

d) 黄色に少量の白を加えると、色が柔らかくなり、キャラクターの無関心や傲慢さが薄まり、より控えめで親しみやすいものになります。

3. 青は冷笑的で素朴で内向的な性格を持ち、人の心を落ち着かせる色です。青の単純で内向的な性格は、活発な性格と強い拡張力を持つ色に、深く広く穏やかな空間を与え、活発な色を引き立たせるフレンドリーで謙虚な友達になります。ブルーは薄めても強い個性を維持しそうな色でもあります。青に赤、黄、黒、オレンジ、白などの色を少量加えても、青の性質に大きな影響を与えることはありません。

a) オレンジに黄色成分が多いと、その特徴は甘く、明るく、香りがよい傾向になります。

b) オレンジに少量の白を混ぜると、オレンジの知覚が落ち着きがなく弱くなる可能性があります。

4. 緑は、黄色と青の 2 つの要素からなる色です。緑は黄色の膨張と青の収縮のバランスをとり、黄色の暖かさと青の冷たさを相殺します。これにより、緑のキャラクターが最も平和で安定したものになります。柔らかく、静かで、滑らかで美しい色です。

a) 緑の中に黄色の成分が多く含まれると、性格は活発でフレンドリーで子供っぽい傾向があります。

b) 緑に少量の黒を加えると、荘厳で洗練された大人の雰囲気になります。

c) 緑に少量の白を加えると、その性質は清潔でさわやかで新鮮になる傾向があります。

5. 紫の明度は有色顔料の中で最も低い。紫の明度が低いと、人に鈍く神秘的な印象を与えます。

a) 紫の中に赤の成分が多く含まれている場合、その認識は憂鬱で脅威的です。

b) 紫に少量の黒を加えると、鈍く、悲しく、怖い感じになります。

c) 紫に白を加えると、紫のくすんだ性格が消え、エレガントで繊細で女性らしい魅力に満ちたものになります。

6. 白は明るい色で、シンプルで純粋で幸せな性格を持っています。白は神聖で不可侵です。白に他の色が加わると、白の純度が損なわれ、その性質が微妙になってしまいます。

a) 白に少量の赤を混ぜると、フレッシュで誘惑に満ちた淡いピンクになります。

b) 白に少量の黄色を混ぜると乳白色の黄色になり、香り高い印象を与えます。

c) 白に少量の青を混ぜると、人々に涼しさと清潔感を与えます。

d) ホワイトに少量のオレンジを混ぜて、ドライな雰囲気を作り出します。

e) 白に少量の緑を混ぜると、子供っぽくて柔らかい印象を与えます。

f) 白に少量の紫を混ぜると、人々は軽い香りを思い浮かべることがあります。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス スクリーンリーダーの分解:アクセス可能なフォームとベストプラクティス Mar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Smart Forms Frameworkを使用してJavaScript連絡フォームを作成する Mar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加します WordPressブロックと要素にボックスシャドウを追加します Mar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

満足している属性を持つインラインテキストエディターを作成します 満足している属性を持つインラインテキストエディターを作成します Mar 02, 2025 am 09:03 AM

インラインテキストエディターの構築は些細なものではありません。 このプロセスは、ターゲット要素を編集可能にすることから始まり、その過程で潜在的なSyntaxerrorの例外を処理します。 エディターの作成 このエディターを構築するには、コンテンツを動的に変更する必要があります

最初のカスタムSvelteトランジションを作成します 最初のカスタムSvelteトランジションを作成します Mar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

GraphQLキャッシングの使用 GraphQLキャッシングの使用 Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する 5つの最高のPHPフォームビルダー(および3つの無料スクリプト)を比較する Mar 04, 2025 am 10:22 AM

この記事では、Envato Marketで入手可能なPHPフォームのビルダースクリプトを説明し、機能、柔軟性、デザインを比較します。 特定のオプションに飛び込む前に、PHPフォームのビルダーが何であるか、そしてそれを使用する理由を理解しましょう。 PHPフォーム

node.jsとexpressのMulterを使用してファイルアップロードします node.jsとexpressのMulterを使用してファイルアップロードします Mar 02, 2025 am 09:15 AM

このチュートリアルは、node.js、Express、およびMulterを使用してファイルアップロードシステムを構築することをガイドします。 単一および複数のファイルのアップロードをカバーし、後で検索するためにMongoDBデータベースに画像を保存することさえ示します。 まず、プロジェックをセットアップします

See all articles