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

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

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

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

Q&A

解決済

1回答

270閲覧

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

tak_78910

総合スコア6

HTML5

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

0グッド

0クリップ

投稿2022/09/24 06:04

編集2022/09/25 05:51

前提

ここに質問の内容を詳しく書いてください。
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/ツールのバージョンなど)

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/09/24 20:51

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

回答1

0

ベストアンサー

i要素の閉じタグが足らないです。

css

1 <div class="options"> 2 <button><i class="fa-solid fa-rotate-left"></i></button> 3 <button><i class="fa-solid fa-rotate-right"></button> 4 <button><i class="bx bx-reflect-vertical"></button> 5 <button><i class="bx bx-reflect-horizontal"></button> 6 </div><!-- .options -->

css

1 <div class="options"> 2 <button><i class="fa-solid fa-rotate-left"></i></button> 3 <button><i class="fa-solid fa-rotate-right"></i></button> 4 <button><i class="bx bx-reflect-vertical"></i></button> 5 <button><i class="bx bx-reflect-horizontal"></i></button> 6 </div><!-- .options -->

投稿2022/09/24 07:45

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問