HTMLカラーコードをC言語のrandとprintfで表示

暑い日が続きますね。武田です。
C言語は、柔軟なプログラミング言語です。
仕様がシンプルなのでユーザが想像力をもってプログラミングに打ち込めます。

今日は
C言語を用い
1.HTMLカラーコードランダム生成して
2.画面に表示
3.かつHTMLファイルも出力してその色をブラウザ上で確認できるようにします。

最終的な出力ファイル(index.html)をブラウザで見た感じ(この色をC言語ランダム生成します)
randomcolor

はじめにHTMLカラーコードについての説明です。

ホームページを作成する際、色を設定するときに使う表現方法
ホームページで色を表現するには、2種類ある
1つはred, green…などで表せる英語表記方法
2つ目が#ffcc00, #5678ab…などの16進数で表記するHTMLカラーコード
#を先頭にして、16進数で赤(R)、緑(G)、青(B)の順に2桁ずつ計6桁で表す
赤、緑、青は、それぞれ0~255の範囲の値をとる(液晶ディスプレイなども同じ方式)

ちなみに赤をHTMLカラーコードで表現すると、#FF0000となります。

ランダムに数値を生成するので、stdlib.hで定義されているrand関数を使います。
rand関数の使い方は、

n = rand() % 100;

などのように使います。この場合0から99までの乱数が生成されます。(%は100で割った余りを意味するため)
今回は、この式を

r = rand() % 256;

として0~255の範囲で乱数を生成しています。
変数r, g, bにこの式を当てはめ、それぞれ赤、緑、青の乱数を生成します。
HTMLカラーコードは、16進数表記のためprintf関数%x書式指定子を使って10進数を16進数で表示することにします。

int n = 31;
printf(“%X\n”, n);

この場合画面には「1F」と表示されます。
HTMLカラーコードは、赤緑青をそれぞれ2桁の16進数で表すので、もし「A」という16進数だとしても「0A」のように0で埋めて2桁にしなければなりません。
こんな時もprintf関数の出番です。

printf(“%02X\n”, n);

のようにします。
これで乱数でHTMLカラーコードを表示する部分はすんなりとできます。

最後にindex.htmlファイルを生成してホームページ化します。

今回fprintf関数を使いました。
fprintfは、ファイルに対してprintf関数と同等の内容で出力できるので便利な関数です。

例えば作成したHTMLカラーコードをファイルに出力する場合は、こうなります。(fpは、fopenで開いたファイル)

fprintf(fp, “#%02X%02X%02X\n”, r, g, b);

画面には、

#FF0A37

のような感じで表示されます。
今回は、bodyタグstyle属性をつけて背景色をプログラムで生成したHTMLカラーコードにして見た目で確認できるようにしてみました。

fprintf(fp, "<body style='background-color: #%02X%02X%02X'>\n", r, g, b);

実際のプログラムは、以下の通りです。

random_htmlcolor.c

/* HTMLカラーコードをC言語のrand関数とprintf関数で生成する */
#include <stdio.h>
#include <stdlib.h>
#include <time.h>

#define MAX 256

int main(void)
{
	FILE *fp;
	int r, g, b;
	int i;
	
	srand( (unsigned)time(NULL) );
	
	/* 赤 */
	r = rand() % MAX;
	printf("R: %3d\n", r);
	
	/* 緑 */
	g = rand() % MAX;
	printf("G: %3d\n", g);

	/* 青 */
	b = rand() % MAX;
	printf("B: %3d\n", b);

	/* HTMLのカラーコード表示 */
	printf("\n#%02x%02x%02x\n", r, g, b);
	
	/* HTMLファイル(index.html)生成 */
	fp = fopen("index.html", "w");
	fprintf(fp, "<!DOCTYPE html>\n");
	fprintf(fp, "<head>\n");
	fprintf(fp, "	<title>ランダムHTMLカラーコード</title>\n");
	fprintf(fp, "</head>\n");
	fprintf(fp, "<body style='font-size: 48pt;color: #%02X%02X%02X;background-color: #%02X%02X%02X'>\n", 255-r, 255-g, 255-b, r, g, b);
	fprintf(fp, "	<p>R: %3d<br>\n", r);
	fprintf(fp, "	G: %3d<br>\n", g);
	fprintf(fp, "	B: %3d</p>\n", b);
	fprintf(fp, "	<p>#%02x%02x%02x</p>\n", r, g, b);
	fprintf(fp, "</body>\n");
	fprintf(fp, "</html>\n");

	fclose(fp);
	
	return 0;
}

生成されたindex.htmlをブラウザで開いた様子(参考のため赤緑青の10進数も表示しています)
randomcolor

index.htmlの内容(fprintf関数で出力)
randomcolorhtml

ちなみに私はこういう(くだらない)ものを考えた後にプログラミングしている最中一番楽しいです。

コメントを残す

メールアドレスが公開されることはありません。