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

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

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

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

解決済

ボタン設置におけるspanタグとaタグの違い

iof
iof

総合スコア13

HTML

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

2回答

0グッド

0クリップ

21215閲覧

投稿2019/02/08 07:52

編集2019/02/08 08:42

前提・実現したいこと

ボタン設置したい

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

progateでボタン設置のコードを書いています。
前の章ではaタグでボタンを設置していました。
ですが今の章ではspanで設置しています。
この二つは何が違うのでしょうか?

該当のソースコード

お答えしようとしてくださった方々、申し訳ございません。
昨日から勉強を始めた身で 右も左もわからず、藁にも縋る思いで投稿させていただいておりました。
補足でcssを載せます。

aタグの場合

<div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <p>or sign up with</p> <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> </div>

spanの場合

<div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative!</h3> </div> <span class="btn message">さっそく開発する</span> </div> </div>

試したこと

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

下記がaのcssです

margin: 20px 0; } .btn-wrapper p { margin: 10px 0; } .signup { background-color: #239b76; } .facebook { background-color: #3b5998; margin-right: 10px; } .twitter { background-color: #55acee; } .btn { padding: 8px 24px; color: white; display: inline-block; opacity: 0.8; border-radius: 4px; }

下記がspanのcssです

.message-wrapper { border-bottom: 1px solid #eee; padding-bottom: 80px; text-align: center; } .message { padding: 15px 40px; background-color: #5dca88; cursor: pointer; box-shadow: 0 7px #1a7940; } .message:active { position: relative; top: 7px; box-shadow: none; }

以下のような質問にはグッドを送りましょう

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

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

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

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

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

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

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

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

m.ts10806

2019/02/08 07:58

コードはマークダウンのcode機能を利用してご提示ください(例え1行でも見易さのためには必要です)
m.ts10806

2019/02/08 08:00

あとこれだけでは的確な回答は得られません。 btnというクラスから何かしらCSSフレームワークをご利用でしょうか。 回答者になる人が全員progateを通っているとは限りません(おそらく少ないでしょうし、少なくとも私は通っていません) 出せる情報はなるべく多く出してください。
azuapricot

2019/02/08 08:11

回答しようかと思いましたが、情報が少なすぎて無理でした。 スクリーンショットを撮ってもらえると非常に助かるのですが <a>タグもリンクにはなりますがCSSなしではボタンにはなりませんし、 <span>タグも、CSSなしではただの範囲指定にすぎません。 提示されている情報では回答は不可能です。 何が違うんですか?と言われましても、困ってしまいます。
azuapricot

2019/02/08 08:12

本当にそれはボタンですか?
m.ts10806

2019/02/08 08:47

btnってクラスつけると大体のフレームワークは小綺麗なボタン装飾してくれますからね…
iof

2019/02/08 08:49

つまりどういうことでしょうか?
m.ts10806

2019/02/08 08:56

cssが途中から始まっているので追記していただきたいのと、利用しているCSSフレームワークを記載してください。質問タグにも追加してもらった方が良いですね
azuapricot

2019/02/08 08:57

フレームワークは使っていませんね、 CSSで頑張って指定しているだけです
azuapricot

2019/02/08 08:58

(頑張って指定してボタンに見せかけているだけ)

回答2

6

どちらもボタンではありませんし、spanに至っては機能しないでしょう。
本物はこちらです。

HTML

1<button>本物</button>

投稿2019/02/08 07:57

x_x

総合スコア13729

itokin, kei344, m.ts10806, maisumakun, shinji709👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

x_x

2019/02/08 08:07

btnクラスがあることからおそらくBootstrapで見た目をボタンのようにしていると思います。 role="button" という WAI-ARIA の属性もありますが、アクセシビリティから言えば本物以上のものはありません。 よさそうな記事があったので挙げておきます。 ボタンは<button>で実装しよう https://qiita.com/sukoyakarizumu/items/978df93755c4720d5cdc
iof

2019/02/08 08:44

見た目をぼたんのようにするものと、実際ボタンを実装するのは別ということなのですね!ありがとうございます。

4

ベストアンサー

質問の編集ありがとうございます。
CSSを見て初めて仰りたいことが理解できました。

ですが、違いというものを回答できるか、と言われるとそうでもありません。

CSS

1.message { 2 padding: 15px 40px; 3 background-color: #5dca88; 4 cursor: pointer; 5 box-shadow: 0 7px #1a7940; 6} 7 8.message:active { 9 position: relative; 10 top: 7px; 11 box-shadow: none; 12}

↑のCSSは、お分かりかと思いますが<span>タグの方のスタイルを設定しているCSSです。

:active と書かれている方のCSSで、ボタンを押したようにみせかけているだけです。

今の状態では<span>タグには先に進むための力はなく、
ただぽちぽちできるだけです。

<a>タグも同様です。
CSSで回りに四角く枠を付けただけで、

<a href="#" class="btn signup">新規登録はこちら</a>

↑の href部分にURLを設定しないと、ただの下線が引かれた文字です。

・・・結論、といっていいのでしょうか、難しいのですが、

aタグ:href部分にURLを設定したら、リンク先に飛べるボタンになる
spanタグ:ただ押せる(押しているように見える)だけ

となります。

progateで勉強中とのことなので、今はタグの使い方やスタイルの設定の仕方を覚えよう~!といった感じでしょうか。
ボタンでリンク先に飛べるようにしよう~!という章は後々出てくるのではないでしょうか。

本当にボタンを実装したいのであれば、他にもタグはあります。(buttonなど)

・・・・回答になっているでしょうか

投稿2019/02/08 08:56

azuapricot

総合スコア2341

naochan1213, reo_fukkase, ozu07, m.ts10806👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

iof

2019/02/08 09:00

なるほど!まだ中級なのでいろいろ省略されて説明されている部分が多く理解が追い付けないままでした! この後実際にやるのかもしれませんが、もしこの<span>タグのほうで実際にボタンとして稼働させようとすると、具体的にどのようなコードにすればいいのでしょうか?(ちなみに<button>もやってみました。納得しました!)
azuapricot

2019/02/08 12:58

<span>だけでボタンをつくったことはないので、なんともいえませんが 実際にやるとしたら<a>タグと<span>タグを組み合わせるなどが一般的でしょうか。 http://phpjavascriptroom.com/?t=css&p=cssdesign_button 基本的にはHTMLのタグは組み合わせてなんぼですし、 <span>タグ自体には範囲指定・・・?みたいな意味しかないので、<span>タグだけでボタンは厳しいかもしれませんね。 やろうとしたら今より大分知識が必要になってしまいます。(javaScriptとか)

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

HTML

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