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

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

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

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

Q&A

解決済

2回答

23782閲覧

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

iof

総合スコア13

HTML

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

0グッド

0クリップ

投稿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; }

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

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

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

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

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

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

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

回答2

0

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

HTML

1<button>本物</button>

投稿2019/02/08 07:57

x_x

総合スコア13749

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

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

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

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

0

ベストアンサー

質問の編集ありがとうございます。
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

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

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

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とか)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問