htmlとcssでの色の使い方のまとめ

Jun 09, 2017 am 11:03 AM

HTML では、色は次の 3 つの方法で表現できます: 色名、RGB 値、または HEX 値。実際の開発では、色を使用してさまざまなことができます。また、フォントの色の効果をカスタマイズして、境界線、フォント、画像などに必要なさまざまな色の効果を設定することもできます。この記事ではHTMLとCSSでの色の使い方を中心に紹介します。

まず、PHP 中国語 Web サイトに関連する無料コースを学習できます

1。「HTML/CSS クイック スタート」

htmlとcssでの色の使い方のまとめ2 の章のコースを学習します。

「Dark Horse Programmer HTML ビデオチュートリアル」

カラーコードビデオチュートリアル

htmlとcssでの色の使い方のまとめ

html、CSSでの色の使用法

1. htmlのさまざまな一般的な色の数値(コレクション) )

HTML では、色は色名、RGB 値、または HEX 値で表すことができます。 RGB rgb (赤、緑、青) の 3 つの変数は、3 原色の濃度 (0 ~ 255) です。たとえば、rgb (255,0,0) red rgb (0,0,0) black rgb (255,255,255) です。白のHEX 16進数は16を表します 10進法: 0~255 16進数への変換: 00~FF

2色の設定に使用できるコンテキスト プロパティが 2 つあることを確認します。

ストロークスタイルは、現在描画している線の色を決定します。

fillStyle は、現在塗りつぶしている領域の色を決定します。

色の値は CSS3 Any にのみ準拠します。カラー値の標準の有効な文字列を使用できます。

3.

CSS3 RGBAカラーモードの使用例コードの詳細説明

RGBAカラーモードは、RGBカラーモードを拡張し、赤、青、緑の三原色に基づく不透明度パラメータを追加します。構文は次のとおりです。

rgba(r,g,b,)

ここで、r,g,b は、赤、青、緑の 3 原色の比率を表します。値は整数またはパーセンテージで、正の整数値の範囲は 0 ~ 255、パーセンテージ値の範囲は 0.0% ~ 100.0% です。範囲外の値は最も近い値の制限に切り捨てられます。すべてのブラウザがパーセンテージ値の使用をサポートしているわけではないことに注意してください。 4 番目のパラメータ は、0 ~ 1 の値で不透明度を表します。

4.

Css グラデーションの色抜けマーク埋め込みフォントテキストシャドウの詳細紹介

CSS3 グラデーションは線形グラデーション(linear)と放射状グラデーション(radial)に分けられます。レンダリング エンジンが異なると、グラデーションを実装するための構文が異なるため、ここでは線形グラデーションの W3C 標準構文に基づいてその使用法のみを分析します。残りについては関連情報を参照してください。 W3C 構文は、IE10 以降、Firefox19.0 以降、Chrome26.0 以降、Opera12.1 以降などのブラウザでサポートされています。

5.

高品質な Web デザイン: 例とヒント No. 6 (色の可能性を最大限に活用する)

Summertime in Tennessee (テネシー夏の観光) は、活気があり、明るく、とても暖かいサイトです。すべてが夏のアクティビティを促進するようにデザインされています。このサイトでは、さまざまな色合いの彩度の高い色を幅広く使用していますが、どの色も的を射ており、テーマに不適切なものはありません。高品質なデザインの色の組み合わせは、そのデザインが提示するサービスや製品と密接に関連している必要があります。優れたデザインでは、必ずしも驚くべき色を選択する必要はありません。最も明白で使用すべき色を使用すると、より良い効果が得られます。たとえば、地獄のデザイン(地獄のデザイン)では、地獄を象徴する燃えるような赤色を使用しないのは単純に無理があります。

6.

CSS3 チュートリアル (3): border-color Web ページの境界線の色

境界線の幅を X ピクセルに設定すると、これで X タイプを使用できます。ボーダーの色。各色は 1 ピクセルの幅を表示します。境界線の幅が 10 ピクセルで、5 色または 6 色しか宣言されていない場合は、最後の色が残りの幅に追加されます。

関連する質問と回答

1. ブラウザの不透明度と rgba の効果は、Android および iOS プログラムで使用される色の透明効果とは大きく異なります。

2. CSS3 の hsl カラー モードがほとんど使用されないのはなぜですか?

【関連おすすめ】

1. php中国語ウェブサイトの無料ビデオチュートリアル: 「php.cn Dugu Jiijian (2)-cssビデオチュートリアル」

2 php中国語ウェブサイトの無料チュートリアル: 「」で学習します。指先」 HTML+CSS》

以上がhtmlとcssでの色の使い方のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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)

ブートストラップリストでデフォルトスタイルを削除する方法は? ブートストラップリストでデフォルトスタイルを削除する方法は? Apr 07, 2025 am 10:18 AM

ブートストラップリストのデフォルトスタイルは、CSSオーバーライドで削除できます。より具体的なCSSルールとセレクターを使用し、「近接原理」と「重量原理」に従って、ブートストラップのデフォルトスタイルをオーバーライドします。スタイルの競合を避けるために、よりターゲットを絞ったセレクターを使用できます。オーバーライドが失敗した場合は、カスタムCSSの重量を調整します。同時に、パフォーマンスの最適化に注意を払い、重要な!の過剰使用を避け、簡潔で効率的なCSSコードを書いてください。

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのレイアウト方法 ブートストラップのレイアウト方法 Apr 07, 2025 pm 02:24 PM

Bootstrapを使用してWebサイトをレイアウトするには、グリッドシステムを使用してページをコンテナ、行、列に分割する必要があります。最初にコンテナを追加し、その中の行を追加し、行内の列を追加し、最後に列にコンテンツを追加します。ブートストラップのレスポンシブレイアウト関数は、ブレークポイント(XS、SM、MD、LG、XL)に従ってレイアウトを自動的に調整します。レスポンシブクラスを使用することで、異なる画面サイズの下の異なるレイアウトを実現できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップフレームワークを構築する方法 ブートストラップフレームワークを構築する方法 Apr 07, 2025 pm 12:57 PM

ブートストラップフレームワークを作成するには、次の手順に従ってください。CDN経由でブートストラップをインストールするか、ローカルコピーをインストールします。 HTMLドキュメントを作成し、ブートストラップCSSを< head>にリンクしますセクション。 bootstrap javascriptファイルを< body>に追加するセクション。ブートストラップコンポーネントを使用して、ニーズに合わせてスタイルシートをカスタマイズします。

ブートストラップにファイルをアップロードする方法 ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します(FormDataを使用してデータを収集し、サーバーに送信します)。カスタムスタイル(オプション)。

ブートストラップナビゲーションバーの設定方法 ブートストラップナビゲーションバーの設定方法 Apr 07, 2025 pm 01:51 PM

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加(オプション)調整スタイル(オプション)

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

See all articles