Q&A
この場合<P>ではなく<span>では？
###質問概要
teratailで投稿するとボタンにローダーが表示されますよね
それと同じことをしたいのですが、そのために<button>の中に常に<p>を入れるべきかどうか悩んでいます
以下の例にあるようにローダーを表示したい<button>の中に<p>を入れました
ですがクリックしてもローダーを表示したくない<button>もあります
いずれに場合でも<p>を入れるように統一すべきでしょうか？
それともローダーを表示したい場合だけに留めるべきでしょうか？
個人的な考えですが、CSSで文字色を常に button > p と統一した方がわかりやすいかと思っているので、常に<p>を入れておこうと思っていますが、アドバイス戴けましたら幸いです
###例
通常のボタンがこうあるとして
html
1<button type="button" class="send"> 2 <span class="icon"></span> 3 送信 4</button>
クリックすると次のようにjQueryでローダーをappendしようという考えです
jquery
1var loadingAnimation = '<div class="loadingAnimation" style="position:absolute;">・・・</div>'; 2$("button.send").append(loadingAnimation);
これだけですと「送信」のテキストの上に「・・・」のアニメーションがかぶりますが、「送信」のボタンが表示されているのがやな感じです
そのため「送信」のテキストを<p>で囲むという結論になりました
html
1<button type="button" class="send"> 2 <span class="icon"></span> 3 <p>送信</p><!-- ここを<p>で囲む --> 4</button>
これによってjQeuryで<p>を隠せば「・・・」のアニメーションだけを表示できる
jQeury
1var loadingAnimation = '<div class="loadingAnimation" style="position:absolute;">・・・</div>'; 2$("button.send").append(loadingAnimation); 3$("p").css('display':'none'); // <p>を隠す
回答1件
0
ベストアンサー
マークアップ構造は仕様に沿う形で決定します。
ご質問のように button > p の構造（要素の親子関係）に悩んだら「MDNで調べて判断する方法」を実践してみてください。
親要素にしたい要素の「許可されている内容」と子要素にしたい要素の「コンテンツカテゴリ」を比較して決定する方法です
（「MDN + <tagname>」をキーワードにGoogle検索してMDNのページを開く）。
許可されている内容：記述コンテンツ、但し対話型コンテンツがあってはならない
コンテンツカテゴリ：フローコンテンツ、知覚可能コンテンツ
button > p は誤った用法と判断できます。
HTML5 の仕様はセマンティクスの観点も含めて定められていますし、検索サイトもアルゴリズム開発には参考にしていると考えられますので、「インデックスさせたい」のであれば、代替要素として <span> を用いて、CSSは class で指定するのが良いでしょう。
投稿2020/10/04 12:18
総合スコア5434
ありがとうございます！<span>にします
ちなみに、常に<span>を入れるべきでしょうか
いえ、「常に」ではありません。https://developer.mozilla.org/ja/docs/Web/HTML/Element/span には「汎用的な行内コンテナ」とありますので、button の子要素で区切るときは 「基本的に <span> でも良い」と言えるのですが、特別な意味合いを持たせたい場合には要素名は使い分けるのが正しいです（強調の <em>など）。テンプレートエンジン等で機械的な出力をする場合は <span> が手軽といった感じですね。
いろいろなソースをありがとうございました
納得いたしましたので回答を締め切らせていただきます
あなたの回答
tips
プレビュー
