質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

input type = textboxで入力したテキストの色をユーザーがWeb上で変更するには。

josikikusokurae
josikikusokurae

総合スコア27

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

1クリップ

283閲覧

投稿2021/12/21 23:53

編集2021/12/22 03:48

前提・実現したいこと

web上のポスター作成アプリを作っています。

発生している問題・エラーメッセージ

powerpointなどのように、入力したテキストの色を変えられる機能を搭載したいです。
<font color = "ここを選択できる"></font> このような形になるのではないかと予測しました。
![イメージ説明

該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>poster-create</title> <link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src = "/send_url.js"></script> </head> <body> <header> <div class="container"> <div class="header-left"> </div> <div class="header-right"> <div id="humMenu"> <input id="humCheck" type="checkbox"> <label id="humOpen" for="humCheck"><span class = "fa fa-bars fa-2x"></span></label> <label id="humClose" for="humCheck"></label> <nav> <ul class="inner"> <li><a href="/">TOP</a></li> <li><a href="#">みる</a></li> <li><a href="#">・</a></li> <li><a href="#">・</a></li> <li><a href="#">・</a></li> </ul> </nav> </div> </div> </div> </header> <div class="action-wrapper"> <!-- <div id="sidebar"> <aside> <h3>制作順序</h3> <ul> <li>1.モデル選択</li> <li>2.テキスト挿入</li> <li>3.テキストの彩色</li> <li>4.画像挿入&保存</li> <li>5.お疲れ様でした</li> </ul> </aside> </div> --> <div class="container"> <div class="heading"> <h2>モデルをカスタマイズしよう。</h2> </div> <div class="edit"> <div style="margin-bottom: 1em"> <div class="FileBtn"> YOUR FILE <input type="file" id = "input"> </div> </div> <div> <img id="img"> </div> <script type="text/javascript"> document.querySelector('#input').addEventListener('change', (event) => { const file = event.target.files[0] // fileがundefinedの時にreader.readAsDataURL(file)がエラーになるため、 // !fileがfalseの場合にreturnする。 if (!file) return const reader = new FileReader() reader.onload = (event) => { document.querySelector('#img').src = event.target.result } reader.readAsDataURL(file) }) </script> <div class="stuff"> <div class="textBox"> <input class="text" id = "a" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/> <input class="text" id = "b" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/> <input class="text" id = "c" type="textbox" onkeyup="this.setAttribute('value', this.value);" value=""/> </div> </div> <canvas id="rectangle" width="700" height="550"></canvas> <script type="text/javascript"> //読み込み時に実行する onload = function() { /* 四角を描く */ var rect_canvas = document.getElementById("rectangle"); var rect_ctx = rect_canvas.getContext("2d"); var rect_up = rect_canvas.getContext("2d"); var rect_down = rect_canvas.getContext("2d"); rect_ctx.beginPath(); rect_up.beginPath(); rect_down.beginPath(); // 四角を描く(A4サイズ) rect_ctx.strokeRect(55, 20, 584.5, 413.5); rect_up.fillRect(95, 163, 500, 15); rect_down.fillRect(95, 288, 500, 15); } </script> </div> <div> <a href = "/poster-model-select" class="back">戻る</a> <a href = "#" class="save">保存</a> <a href = "/poster-finish" class = "next">次へ</a> </div> </div> </div> </body> </html>
<canvas id="rectangle" width="700" height="550"></canvas> <script type="text/javascript"> //読み込み時に実行する onload = function() { /* 四角を描く */ var rect_canvas = document.getElementById("rectangle"); var rect_ctx = rect_canvas.getContext("2d"); var rect_up = rect_canvas.getContext("2d"); var rect_down = rect_canvas.getContext("2d"); rect_ctx.beginPath(); rect_up.beginPath(); rect_down.beginPath(); // 四角を描く(A4サイズ) rect_ctx.strokeRect(55, 20, 584.5, 413.5); rect_up.fillRect(95, 163, 500, 15); rect_down.fillRect(95, 288, 500, 15); window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#btn').addEventListener('click',()=>{ const ctx = document.getElementById('rectangle').getContext('2d'); ctx.font = "48px serif"; ctx.fillStyle = document.querySelector('#color').value; ctx.fillText(document.querySelector('.text').value, 10, 50); }); }); } </script> <div class="stuff"> <div class="textBox"> <input class="text" id = "a" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/> <input class="text" id = "b" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/> <input class="text" id = "c" type="text" onkeyup="this.setAttribute('value', this.value);" value=""/> </div> </div> <select id="color"> <option value="black">黒</optioin> <option value="red">赤</optioin> <option value="blue">青</optioin> <option value="yellow">黄色</optioin> </select> <input type="button" id="btn" value="テキスト設定"><br>

よろしくお願いします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。