#author("2026-01-06T09:29:29+09:00","default:member","member") #author("2026-01-06T09:31:41+09:00","default:member","member") *江口 依舞 [[通信ネットワーク演習]] ~ ~ **演習 -Blank File : [[javascript_blank>https://12eve24.github.io/javascript_blank/]] -Color Change A：[[javascript_change_a>https://12eve24.github.io/javascript_change_a/]] -Color Change B : [[javascript_change_b>https://12eve24.github.io/javascript_change_b/]] -Fortune Slip : [[javascript_fortune>https://12eve24.github.io/javascript_fortune/]] -Gallery : [[javascript_gallery>https://12eve24.github.io/javascript_gallery/]] -TabUI : [[javascript_tab>https://12eve24.github.io/javascript_tab/]] -Object : [[javascript_object>https://12eve24.github.io/javascript_object/]] //&color(red){演習の制作物をリンク}; -Text Animation : [[javascript_text_animation>https://12eve24.github.io/javascript_text_animation/]] -Scroll : [[javascript_scroll>https://12eve24.github.io/javascript_scroll/]] -Map : [[javascript_map>https://12eve24.github.io/javascript_map/]] -Weather : [[javascript_weather>https://12eve24.github.io/javascript_weather/]] ~ ~ **最終成果物 ***RGB色当てゲーム https://12eve24.github.io/javascript_rgb-game/ //&color(red){タイトル・公開URLの記入}; //***&color(red){タイトル}; //&color(red){https://www.example.com/}; ~ ***サイトの趣旨 本サイトは、Webブラウザ上で表示される色の仕組みを、体験を通して理解することを目的としたRGB色当てゲームです。 画面上の色は、赤・緑・青の3つの光の強さ（RGB値）によって構成されています。本サイトでは、RGBの各成分をスライダーで直接操作し、正解の色に近づけていく過程を通して、色の見え方と数値の関係を直感的に学べる構成としています。プレイ後には、正解色と入力色のRGB値に加え、それぞれの差分を表示します。これにより、単に結果を知るだけでなく、「どの色成分が影響していたのか」を振り返ることができ、色の成り立ちへの理解を深めることを意図しています。 //&color(red){これはどんなサイトか・・を簡潔に}; ~ ***技法・技術情報 -イベント処理（input / click） スライダー操作やボタン押下を検知し、画面表示を即時更新。 -条件分岐（if / else） 色差の大きさに応じて、結果メッセージを切り替え。 -乱数生成（Math.random） 正解となるRGB値をランダムに生成。 -数値変換（Number） スライダーの文字列値を数値として扱うために変換。 -RGB色指定（rgb） Web標準の色指定方法を用いて画面に反映。 //&color(red){サイトで用いている技術や文法事項について記入}; //-&color(red){例）条件分岐（if/else）}; //-&color(red){例）イベント（click）}; ~ ***先行事例・参考情報 -先行事例 --[[RGBカラーシミュレータII｜京都産業大学>https://www.cc.kyoto-su.ac.jp/~shimizu/MAKE_HTML/rgb2.html]] --[[【デザイン初心者向け】RGBは難しい？色変更が簡単にできるコツ >https://wwg.co.jp/blog/22694]] -スライダー --[[<input type="range"ジェネレーター【CSSデザインカスタマイズ】>https://webspe.net/tools/input-range/]] --[[<input type="range"> - HTML | MDN>https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements/input/range]] --[[input type="range"でレンジスライダーを作る｜HTMLリファレンス>https://catnose.me/learning/html/input-range/]] --[[【HTML】初めてスライダー（<input type="range"/>）を使ってみました - Little Strange Software>https://little-strange.hatenablog.com/entry/2021/01/20/222359]] //&color(red){先行事例の紹介、参考サイトなど}; -RGB -- --[[【デザイン初心者向け】RGBは難しい？色変更が簡単にできるコツ >https://wwg.co.jp/blog/22694]]~ ~ ~ **リンク ***公開リポジトリ -GitHub：https://github.com/12eve24 //&small(※リンクを無効にするため半角スペースを挿入しています。自分のページに掲載の際は、スペースを詰めてください。);