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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

解決済

HTMLでなぜかアイコンが無数に反映される

tak_78910
tak_78910

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0リアクション

0クリップ

178閲覧

投稿2022/09/24 06:04

編集2022/09/24 06:05

前提

ここに質問の内容を詳しく書いてください。
HTMLで画像編集アプリを作成しています。
その際にとんでもない数のアイコンが表示されます。
どうしたらいいですか?
HTMLに詳しい方すみませんが、宜しくお願いします。イメージ説明

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • ボタンの中にアイコンを入れたい

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

エラーメッセージ

該当のソースコード

HTML <!DOCTYPE html> <!-- Coding By Tak --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Image Editor JavaScript | Tak</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- BoxIcon & FontAwesome Links For Icons --> <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"/> </head> <body> <div class="container"> <h2>Easy Image Editor</h2> <div class="wrapper"> <div class="editor-panel"> <div class="filter"> <label class="title">Filters</label> <div class="options"> <button>Brightness</button> <button>Saturation</button> <button>Inversion</button> <button>Grayscale</button> </div><!-- .options --> <div class="slider"> <div class="filter-info"> <p class="name">Brightness</p> <p class="value">100%</p> </div><!-- .filter-info --> <input type="range" value="100" min="0" max="200"> </div><!-- .slider --> </div><!-- .filter --> <div class="rotate"> <label class="title">Rotate & Filp</label> <div class="options"> <button><i class="fa-solid fa-rotate-left"></i></button> <button><i class="fa-solid fa-rotate-right"></button> <button><i class="bx bx-reflect-vertical"></button> <button><i class="bx bx-reflect-horizontal"></button> </div><!-- .options --> </div><!-- .rotate --> </div><!-- .editor-panel --> <div class="preview-img"></div><!-- .preview-img --> </div><!-- .wrapper --> </div><!-- .container --> </body> </html>

試したこと

コードを書き直しましたが一向に改善されません。詳しい方すみませんが、宜しくお願いします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2022/09/24 20:51

文法チェックサービスの利用もしくは文法チェック機能のあるエディタの利用を推奨します。 (おそらく今回の内容だと質問前に気づけます)

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

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

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。