HTMLに記述する色のモニターと、色記号の獲得ができます。 Java Applet。 をクリック開始できます。 ゥ ゥ
デモ : 色作成は、カラーパレットの希望色をクリックや、水平スライダー/縦スライダーの移動で行います。 明暗指定は、縦スライダーの移動で行います(色相保持)。 Hex Code(汎用性高い)と、RGB値(環境依存あり)が表示されます。 作成した Hex Code をコピー、HTML中にペースト、色指定に使用できます。 関連・詳細情報 :Hex Code 応用(例)、〃 いろいろ:スクロールバー色 3、スクロールテキストボックス、リンク装飾、カラーボタン。 RGB値 応用(例)
< ご使用方法 >
・ ローカル(=PC)への保存は、rgb2.htm、CanvasB.class、CanvasHS.class、colorpicker.class を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存] ……、などで変わってしまったファイル名や、パスは要修正。
・ このJava Appletの実装方法は、rgb2.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。 ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。 更新の確認は、【Internet Explorer】- [ツール] - [インターネット オプション] - [閲覧の履歴] - [削除] または、Internet Explorerの再起動で 、閲覧履歴の削除、後に行います。 [F5]キー を押し、最新データ読み込み、でも有効な場合があります。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する *.class なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 : 色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10 互換性クックブック、〃開発者向けガイド、IE API リファレンス、IE 開発 > HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
(色記号の応用例 1) リンクの前景(テキスト)・背景・下線の装飾(例)
(*1) : rgb2.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
シフトJIS使用(削除不可) ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="favicon.ico"> <style type="text/css"><!--
<base target="_blank"> <title>サンプルページ RGB2</title> |
(*2) : rgb2.htm (例) 挿入先の <body> 〜 </body> の、〜 部分にペーストします。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
〔この列ペースト不要〕
Java Applets 表示サイズ |
<!-- ★ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
|
(色記号の応用例 2) 文字の背景色指定(decimal)
背景、前景(文字)色の指定 | 下記↓のHTMLをテキストエディターで編集、挿入先ファイルにペースト、太字部分を編集し使用。 |
背景色 前景(文字)色 テキスト |
</font><span style="background-color: RGB(134,1,222); color: RGB(255,255,234)"><strong>Hello!、=(^。^)= これは文字と背景色のサンプルです。</strong></span><font COLOR="#000000"> </font> |
(色記号の応用例 2a) 文字の背景色指定(Hex value)
背景、前景(文字)色の指定 | 下記↓のHTMLをテキストエディターで編集、挿入先ファイルにペースト、太字部分を編集し使用。 |
背景色 前景(文字)色 テキスト |
</font><span style="background-color: #8601DE; color:#FFFFEA)"><strong>Hello!、=(^。^)= これは文字と背景色のサンプルです。</strong></span><font COLOR="#000000"> </font> |
(色記号の応用例 3) リンク付き各文字の彩色
背景、前景(文字)色の指定 | 下記↓のHTMLをテキストエディターで編集、挿入先ファイルにペースト、太字部分を編集し使用。 |
リンク-URL 新しいWinで開く 吹き出し文字 文字色 背景色 テキスト |
<p><a href="http://www.real.com/" target="_blank" title="吹き出し文字"><span style="COLOR: #A52A2A; BACKGROUND-COLOR: #FFFFFF">R</span><span style="COLOR: #00008B; BACKGROUND-COLOR: #FFFFFF">e</span><span style="COLOR: #FF7F50; BACKGROUND-COLOR: #FFFFFF">a</span><span style="COLOR: #FF00FF; BACKGROUND-COLOR: #FFFFFF">lc</span><span style="COLOR: #00FF00; BACKGROUND-COLOR: #FFFFFF">om</span></a></p>
|
(色記号の応用例 4) ゥ ゥ ハ〜*ト - リンク・吹き出しメッセージ付き
背景、前景(文字)色の指定 | 下記↓のHTMLをテキストエディターで編集、挿入先ファイルにペースト、太字部分を編集し使用。 |
フォント サイズ 文字色 背景色 吹き出し文字 テキスト |
<font face="Symbol"
size="3" color="#03FCE3"><span style="background-color: #1DFCCA; color: #9D44FF"><a href="#ハート" target="_self" title=" (*^.^*) 〜* =(゜。゜)= 色変化 …*">ゥ</a></span></font><font face="MS Pゴシック" size="2"> </font><a href="#ハート" target="_self" title=" (*^.^*) 〜* 色固定 …*"><font face="Symbol" size="3"><span style="background-color: #9D44FF; color: #FF0080">ゥ</span></font></a></p> |
(色記号の応用例 4a) ゥ ゥ ハ〜*ト
背景、前景(文字)色の指定 | 下記↓のHTMLをテキストエディターで編集、挿入先ファイルにペースト、太字部分を編集し使用。 |
サイズ 文字色 背景色 フォント テキスト |
<font face="MS Pゴシック" size="2"><span style="color: #950007"> </span><font COLOR="#000000"> </font></font> <span style="background-color: #970dfd; color: #ff0080"><font face="Symbol" size="3">ゥ</font></span> <span style="background-color: #fffcf0; color: #9600ce"><font face="Symbol" size="3">ゥ</font></span> |
<補足> 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。