一般的に、Web ページの背景色は、より柔らかく、よりシンプルで、より明るく、暗いテキストとマッチして、自然で快適な外観にする必要があります。Web ページ作成の初心者は、ページの背景にいくつかの美しい画像を使用することに慣れているかもしれません。ただし、大規模な商用 Web サイトを閲覧すると、Web ページをエレガントで寛大で温かみのある外観にするために、白、青、黄色などがより多く使用されていることがわかります。さらに重要なのは、閲覧者が Web ページを開く速度が大幅に向上することです。 一般的に、Web ページの背景色は柔らかく、シンプルで、明るい色にし、暗い色のテキストと組み合わせると、自然で快適な印象を与えることができます。印象的な視覚効果を得るには、タイトルに暗い色を使用します。以下は、Web ページを作成するとき、および他の人の Web ページを閲覧するときに、Web ページの背景色とテキスト色のマッチングに関して私が蓄積した経験です。これらの色は、テキストの背景色またはタイトルの背景色として使用できます。異なるフォントと組み合わせると、間違いなく良い効果が得られます。Web ページを作成するときに、皆さんに役立つことを願っています。 BgcolorΚ″#F1FAFA″——テキストに適した背景色、エレガント 明るい緑色の背景に黒い文字、または白い背景に青い文字はどちらも目を引くものですが、前者は背景を強調し、後者は文字を強調します。赤い背景に白いテキスト、暗い背景に黄色のテキストは非常に効果的です。 今日、インターネットは私たちの生活にますます近づき、インターネットサーフィンは徐々に私たちの生活に欠かせないものになってきています。インターネットの世界は多彩で、優れた美しいウェブページが数多く登場しています。大量のオンライン情報は、テキスト、画像、Flash アニメーションなどを通じて表示されます。その中でも、テキストは Web ページで最も重要なデザイン要素です。 Webデザイン初心者にとって、Webデザインにおけるテキストレイアウトデザインを理解し、習得することは特に重要です。以下に著者の個人的な意見を述べたいと思います。 フォントサイズ、フォント、行間隔 フォント サイズは、ポイントやピクセルなど、さまざまな方法で計算できます。ピクセル技術に基づいて印刷する場合、単位をポイントに変換する必要があるため、単位としてポイントを使用することをお勧めします。 プラットフォームの独立性を高める観点から、テキスト コンテンツには既定のフォントを使用するのが最適です。ブラウザはページ コンテンツを表示するためにローカル マシン上のフォント ライブラリを使用するためです。 Web デザイナーとしては、ほとんどの閲覧者のマシンには 3 種類のフォントとそれに対応する特殊フォントしかインストールされていないことを考慮する必要があります。ただし、指定したフォントが閲覧者のマシン上に見つからない場合があり、Web デザインに大きな制限が生じます。この問題の解決策は、特別なフォントを使用する必要がある場合は、テキストを画像にしてページに挿入することです。 行間隔の変化もテキストの読みやすさに大きな影響を与える可能性があります。一般的に、本文ではフォントサイズに近い行間隔設定の方が適しています。通常の行間隔の比率は 10:12 です。つまり、フォント サイズが 10 ポイントの場合、行間隔は 12 ポイントになります。これは主に、適切な行間隔によって、見る人の目を誘導するための明確な水平方向の空白帯が形成されますが、行間隔が広すぎると、テキスト行の連続性が失われるという考慮事項によるものです。 読みやすさへの影響に加え、行間隔自体も非常に表現力豊かなデザイン言語です。レイアウトの装飾効果を高めるために、行間隔を意識的に広げたり狭めたりして、独特の美的関心を反映させることができます。たとえば、行間を広くすると、リラックスした快適な雰囲気を表現でき、娯楽性や叙情性に富んだ内容に適しています。さらに、慎重な配置により、広い行間隔と狭い行間隔を共存させることで、空間の階層性とレイアウトの柔軟性を高め、独特の創意工夫を発揮します。 行間隔は line-height プロパティを使用して設定できます。デフォルトの行の高さのポイントまたはパーセンテージを使用することをお勧めします。たとえば、{line-height: 20pt}、{line-height: 150%} などです。 テキストの全体的なレイアウト ページの本体は、多数の単語が一緒に配置されたグループです。ページ全体のレイアウトにおいて、このグループ形状の役割を十分に活用する必要があります。芸術的な観点から見ると、フォントはそれ自体が芸術形式であり、人の性格や感情に大きな影響を与えると言えます。 Web デザインでは、フォントの扱いは、色、タイポグラフィ、グラフィックなどの他のデザイン要素の扱いと同じくらい重要です。ある意味では、すべてのデザイン要素はグラフィックとして理解できます。 1.テキストのグラフィック化 フォントには 2 つの機能があります。1 つは文字の意味とセマンティクスを実現することであり、もう 1 つは美的効果です。いわゆるテキストのグラフィックスは、象徴的なテキストをグラフィック要素として表現しながら、その本来の機能を強化し、美的効果を強調します。 Web デザイナーとして、従来の方法でフォントを設定することも、芸術的な方法でフォントをデザインすることもできます。いずれにせよ、すべてはデザイン目標をより良く達成する方法を中心に展開される必要があります。 2.テキストのオーバーレイ テキストと画像、またはテキストとテキストを重ね合わせると、空間感、跳躍感、透明感、ノイズ感、物語感が生まれ、ページ上でアクティブで目を引く要素になります。重ね合わせのテクニックはテキストの読みやすさに影響しますが、ページ上に独特の視覚効果を生み出すことができます。読みやすさを追求するのではなく、あえて「ノイズ」を追求するこの表現方法は、芸術的な潮流を体現している。そのため、従来のレイアウト設計で広く使用されているだけでなく、Web デザインでも広く採用されています。 3.タイトルとテキスト タイトルとテキストを配置するときは、まずテキストを 2 列、3 列、または 4 列に配置することを検討してから、タイトルを配置します。メインテキストは、ページ上のスペースと柔軟性を確保するために列に分割され、フルカラムページの退屈さとタイトル挿入の単調さを回避します。タイトルは段落全体または記事全体のタイトルですが、必ずしも段落の先頭に配置されるわけではありません。中央揃え、水平、垂直、横置きが可能で、単語のグループに直接挿入して、斬新なレイアウトで古いルールを破ることもできます。 4.テキスト配置の4つの基本的な形式 ページの本体は、多数の単語が一緒に配置されたグループです。ページ全体のレイアウトにおいて、このグループ形状の役割を十分に活用する必要があります。 テキストの強調 1.行頭の強調<br />テキストの最初の単語または文字を拡大して装飾し、段落の先頭に埋め込むことを、従来のメディアレイアウトデザインでは「ドロップ」と呼びます。この技術の発明は中世ヨーロッパの写本写本作家にまで遡ります。 注目を集めたり、装飾したり、レイアウトを活性化したりできるため、Web ページのテキストレイアウトに使用されます。ドロップ量は、テキストの行全体の上限と下限の範囲に及ぶ必要があります。どの程度拡大するかは、Web ページの環境によって異なります。 テキストの色 Web デザインでは、デザイナーはテキスト、テキスト リンク、訪問済みリンク、現在アクティブなリンクにさまざまな色を選択できます。たとえば、FrontPage エディタを使用する場合、デフォルトの設定は次のようになります。通常のフォントの色は黒、デフォルトのリンクの色は青で、マウスをクリックすると紫に変わります。異なる色のテキストを使用すると、強調したい部分がより目を引くようになりますが、テキストの色は少量のみ使用する必要があることに注意してください。すべてを強調したい場合、実際には何も強調していません。さらに、特別なデザイン目的がない限り、ページ上で色を使いすぎると、閲覧者がページ コンテンツを読み取るのに影響します。 色の使用は、テキスト全体の特定の部分を強調するだけでなく、コピー全体の感情表現にも影響を与えます。これには色の感情的な象徴性が関係しますが、スペースの制限があるため、ここでは詳しくは説明しません。 注目すべきもう 1 つの点は、テキストの色のコントラストです。これには、明るさのコントラスト、純度のコントラスト、寒色と暖色のコントラストが含まれます。これらはテキストの読みやすさに影響するだけでなく、さらに重要なことに、色の使用を通じて、望ましいデザイン効果、デザインの感情、デザインのアイデアを実現できます。 1. 色処理 1. 暖色系。つまり、赤、オレンジ、黄色、黄土色などの組み合わせです。この色調を使用すると、ホームページに暖かく、優しく、熱狂的な雰囲気を与えることができます。 2. クールな色。つまり、シアン、緑、紫などの色の組み合わせです。この色調を使用すると、ホームページは穏やかでクール、そしてエレガントな雰囲気を演出できます。 3. 対照的な色調。つまり、全く反対の色を同じ空間に配置することです。たとえば、赤と緑、黄色と紫、オレンジと青などです。この色の組み合わせは強い視覚効果を生み出し、人々に明るく鮮やかで楽しい気分を与えます。もちろん、対照的な色を適切に使用しないと、逆の効果が生じ、安っぽく、ぎらぎらした、望ましくない効果が生じます。これには、「大調和、小対照」という重要な原則を把握する必要があります。つまり、全体的な色調は統一され調和している必要がありますが、局所的には小さな強い対照があってもかまいません。 最後に、ホームページの背景色の深さと明るさも考慮する必要があります。ここでは、写真用語を借りて「ハイキー」と「ローキー」と呼びます。明るい背景はハイキーと呼ばれ、暗い背景はローキーと呼ばれます。背景色が暗い場合は、テキストの色を明るくして、暗い背景で明るいコンテンツ (テキストまたは画像) を引き立てます。逆に、背景色が明るい場合は、テキストの色を暗くして、明るい背景で暗いコンテンツ (テキストまたは画像) を引き立てます。この色合いの変化は、色彩科学では「明度変化」と呼ばれます。ホームページの中には背景が黒なのに、文字も暗い色で書かれているものがあります。色の明るさが近いため、読むときに目が疲れてしまい、読書効果に影響を及ぼします。もちろん、色の明るさはあまり変えてはいけません。そうしないと、画面上の明るさのコントラストが強くなりすぎて、読者の目が耐えられなくなってしまいます。 ウェブページのカラーマッチング ウェブページの色はウェブサイトのイメージを確立する鍵の一つですが、ネットユーザーにとって色合わせは頭の痛い問題です。 Web ページの背景、テキスト、アイコン、境界線、ハイパーリンクなどにどのような色を使用すればよいでしょうか。また、意図した意味合いを最もよく表現するには、どのような色を組み合わせるべきでしょうか。 Ajie はここで彼の経験のいくつかを共有し、それが皆さんのインスピレーションとなることを願っております。 まず、色に関する基本的な知識を学びましょう。 1. 色は光の屈折によって生じます。 2. 赤、黄、青は三原色であり、この三色に他の色を混ぜることができます。ウェブページの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ページの色をマスターするプロセス ウェブページ制作の経験を積むにつれて、色使いはモノクロ→カラフル→標準色→モノクロという傾向になってきました。当初は、技術と知識が不足していたため、単色のシンプルなウェブページしか作成できませんでした。ある程度の基礎と材料が揃った後、人々は美しいウェブページを作ろうと望み、集めた最高の写真と最も満足のいく色をページに積み重ねました。しかし、長い時間が経つと、色が乱雑で個性とスタイルがないことに気づきました。3回目のウェブサイトの再配置では、自分に合った色を選択し、立ち上げたサイトはより成功することが多くなりました。最終的なデザインコンセプトとテクノロジーがピークに達したとき、彼らはシンプルさに戻り、単色または無色を使用してシンプルで精巧なサイトを設計しました。 ○Webカラーマッチングスキル この記事のこの時点で、心配しているネットユーザーの中には、「どんな色の組み合わせが似合うの? いくつかカラースキームをお勧めしてもらえますか?」と尋ねる人もいるかもしれません。心配しないでください。すぐにカラーマスターになるためのヒントをいくつかご紹介します :) 1. 1色だけ使用します。ここでは、まず色を選択し、次に透明度または彩度を調整して(簡単に言えば、色を明るくしたり暗くしたりして)、Web ページで使用する新しい色を作成することを意味します。このようなページは色が統一されていて、階層感があります。 2. 2色を使用します。まず色を選択し、次にその対照的な色を選択します (Photoshop では Ctrl + Shift + I を押します)。これが私のホームページの青と黄色の色を決定した方法です。ページ全体がカラフルですが、過度にカラフルではありません。 3. 配色を使用します。簡単に言えば、ライトブルー、ライトイエロー、ライトグリーン、またはカーキ、アースグレー、アースブルーなど、感情を反映する色を使用することです。色の決め方は人それぞれですが、私はPhotoshopで前景色のボックスをクリックし、表示されるカラーピッカーウィンドウで「カスタム」を選択し、「カラーライブラリ」で選択します:) 4. 黒と1色を使用します。たとえば、黒い枠線の付いた明るい赤のフォントは、非常に「飛び飛び」に見えます。 Web ページのカラー マッチングでは、次のことはタブーです。 1. すべての色を使用するのではなく、3 色までに制限します。 2. 背景と前のテキストのコントラストは、メインのテキストコンテンツを強調するために、できるだけ大きくする必要があります(背景に複雑なパターンを使用しないでください)。 カラーマッチング 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) 白に少量の紫を混ぜると、かすかな香りを連想させることがあります。 私が皆さんにお伝えしたいのは、Web ページのカラー マッチング テクニックについて簡単に説明した上記の記事 (フロントエンド開発者必読) だけです。この記事が皆さんの参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 オリジナル URL: http://www.cnblogs.com/androidshouce/archive/2016/07/25/5702280.html |
<<: MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう
目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...
序文MySQL マスター/スレーブ レプリケーションは、アプリケーションの高パフォーマンスと高可用性...
目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...
一言で言えば: データハイジャック (Object.defineProperty) + パブリッシュ...
MySQL UNION 演算子このチュートリアルでは、MySQL UNION 演算子の構文と例を紹介...
目次Linux MySQL 5.5 が MySQL 5.7 にアップグレードされました1. mysq...
この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...
実施効果: 1. count(1) と count(*)テーブル内のデータ量が多い場合、テーブルを分...
ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...
間違った mysql コマンドを入力したのでキャンセルしたいです。どうすればいいですか? ctrl ...
ページに複数の画像を導入すると、画像のサイズがばらつくことがあります。しかし、それらを一貫したサイズ...
目次インストールの前提条件ステップ1: システムの残りを確認してクリアし、Dockerの依存関係をイ...
実行中のコンテナIDを見つける ドッカーps上記のコンテナの物理的な場所を見つける /var/lib...
MySQL データベースのバージョンを 5.6.28 から 8.0.11 にアップグレード中にプロジ...
目次序文1. wgetを使用して単一のファイルをダウンロードする2. wget -Oを使用してダウン...