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

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

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

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

Q&A

解決済

2回答

748閲覧

<p>と<span>について

kame2

総合スコア3

HTML

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

0グッド

1クリップ

投稿2023/02/03 05:22

HTML、CSS初心者です。勉強中のテキスト内に以下のようなサンプルコードがあるのですが、なぜ「<p class="card__btn"><span>詳しく</span>」のような書き方をするのか理解できなかったため、質問させていただきました。<p>のみでは、cssでレイアウトをする際に不都合なのでしょうか。
初歩的な質問で申し訳ございませんが、アドバイスいただけますと幸いです。よろしくお願いいたします。

HTML

1<section class="cardList__item"> 2 <a href="#" class="card"> 3 <h3 class="card__ttl">サービス名</h3> 4 <p class="card__txt">この文章はダミーです。</p> 5 <p class="card__btn"><span>詳しく</span></p> 6 </a> 7 </section>

CSS

1.card { 2 display: block; 3 color: inherit; 4 text-decoration: none; 5} 6.card:hover { 7 color: inherit; 8} 9.card__ttl { 10 margin-bottom: 15px; 11 padding-bottom: 5px; 12 border-bottom: 2px solid #509422; 13 font-size: 1.2em; 14} 15.card__txt { 16 line-height: 1.7; 17} 18.card__btn { 19 text-align: right; 20} 21.card__btn > span { 22 display: inline-block; 23 padding: 5px 15px; 24 border: 1px solid; 25 font-size: 0.85em; 26 transition: background-color 0.3s, color 0.3s; 27} 28.card:hover .card__btn > span { 29 background: #509422; 30 color: #fff; 31}

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

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

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

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

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

yuma.inaura

2023/02/03 05:47

CSS割り当ての学習用だからじゃないでしょうか そういう割り当て方もできるという例で .card__btn > span
m.ts10806

2023/02/03 07:52

サンプルでダミーだとあまり要件や本来の目的、アプリケーションの全容が見えてこないと思いますし、 「意図」となると、やはり書いた人にしか分かりません(ここで得られるアドバイスも「想像」に過ぎません) 本質的な回答にはなりにくいと思います。
guest

回答2

0

たとえばspanを置くことによって:beforeなどでアイコンをつけることができたりします。
構造が違うということはCSSで修飾できる幅が広がります

CSS

1<style> 2p span::before{ 3content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><circle cx="8" cy="8" r="8" fill="red" /></svg>'); 4} 5</style> 6<p>test</p> 7<p><span>test</span></p> 8<p><span>test</span></p> 9<p>test</p>

投稿2023/02/03 07:15

yambejp

総合スコア114784

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

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

kame2

2023/02/03 09:00

ご回答頂きありがとうございます✨とても勉強になりました!
guest

0

ベストアンサー

<section></section> にしろ、 <p></p> にしても。 タグは、要素(エレメント)として意味があります。たとえば、視覚障碍者がホームページを読むときに、要素が適切に書かれていないと、読めないそうです。これらをマークアップと言います。 <span></span> を、わたしは、「空タグ」と呼んでいます。なんの意味ももたない要素という意味だと理解しています。

ご質問のコードをプレビューすると下の図のようになりますが
イメージ説明

<p></p>(paragraph-文節)そのものをボタンにしてしまうと、マークアップとして問題があるとテキストの筆者が考えたのでしょう。空タグでボタンに見えるようにCSSをかけて HTML文章全体のマークアップを整えているのだと思います。

投稿2023/02/03 06:04

penguin520

総合スコア345

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

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

kame2

2023/02/03 09:00

詳しく説明してくださり有難うございます!理解できました✨
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問