No.5ベストアンサー
- 回答日時:
><a href="#">
><input type="submit" id="aboutbutton" value="ボタンの名前">
></a>
それはないでしょう。(^^)
<form action="./cgi-bin/***">
<input type="submit" value="">
</form>
もしくは
<a href="./**?name=test">送信</a>
とかでしょう。
その前後のソースも必要ですが、たとえば
<p class="submit">
<a href="./**?name=test">送信</a>
</p>
だとすれば、
p.submit{
margin-left:2em;
line-height:30px;
}
p.submit a{
display:block;
width:6em;
height:20px;
position:relative;
}
p.submit a:before{
content:url(画像のURL);
}
とか、古いブラウザにも対応するなら
p{
background:url(画像URL) no-repeat 0 0;
padding-left:40px;
}
とか・・・
画像を含めてリンクさせたければ
p.submit{
width:100px;
height:40px;
}
p.submit a{
display:block;
width:100%;
height:100%;
margin-left:40px;
}
とか・・・・。
p.submit:before{}で画像を追加しても良いでしょう。
様々な方法がありますが、これはサイト全体や目的、想定するユーザーエージェントなど様々な条件を勘案して総合的に判断するしかないでしょう。
No.4
- 回答日時:
先ほどは来客で席を立ったため尻切れトンボに・・
文字を画像に置き換えてしまうという古い「非標準な方法」もあります<a href="<img>ほげほげ</a>が、さすがにそれではまずい。
・たとえばHTMLが独立した段落内のリンクでしたら:beforeという擬似要素を使う
・リストだったら、list-style:image;
・それ以外だと、背景にしてしまう
というのが良いでしょう。・・いずれにしろ、画像を配置するHTMLソースを示してください。
この回答への補足
HTMLソースですが、
<a href="#">
<input type="submit" id="aboutbutton" value="ボタンの名前">
</a>
です。
このvalueの値をボタン上に配置し、id="aboutbutton"にcssで背景を設定したのですが、valueの値の位置を右にずらすことが出来なく、画像に重なる形になってしまいます。
非常に分かりづらい質問で申し訳ありません。
No.3
- 回答日時:
見本だとボタン形式で全体だけど、左に来るだけのものも作り方は同じ
cssの基本がわかる前提で、
1.画像を用意する。
2.1.の画像を目的のテキストの背景にする。
ただし、1回のみ、左に
3.2.の画像のテキストと重なってはダメな分だけ、パディングで左を空ける。
以上。
注意
左だけに来るものだと、インライン要素でもブロックライン要素でもOKだが、ボタン形式で高さや幅を指定したい場合はブロック要素にすること。htmlがインライン要素なら、ディスプレイでブロックに見せかけること。
No.2
- 回答日時:
作りたいボタンが何をするボタンなのかにもよりますが、単に別ページへのリンクであるなら、
<a href="linkpage.html"><img src="filename.jpg"></a>フォローする
と書けば良いだけでしょう。
ボタン画像(filename.jpg)がすごく大きかったり、テキスト(フォローする)が長い文章だとページの右端で折り返されたり、テキストが改行になっちゃいますが、それほどでなければ上記で充分です。
この回答への補足
ページリンクではなく、<input~を使用して値を返すものです。
input type="image"だと画像扱いになるので背景は画像に出来るのですが、valueで指定した文字は画像が表示できなかったときのためのものなので、反映されません。input type="submit"だと、画像をsrcで指定しても表示されなくなり、上手くいきませんでした。
分かりにくい説明で申し訳ありません。よろしくお願い致します。
No.1
- 回答日時:
HTMLが、単なるリンクですか?、ナビゲーションリストのひとつですか?
<p>
<a href="">フォローする</a>
</p>
それとも
<input type="button" value="フォローする">
それとも
<div nav">
<li><a href="">フォローする</a></li>
<li><a href="">フォローする</a></li>
<li><a href="">フォローする</a></li>
</div>
どれでもよいですが・・・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) Mycrosoft Edge の「コレクション」に、画像とテキストを追加したい 2 2022/05/28 11:10
- 画像編集・動画編集・音楽編集 PhotoScapeXで黒テキストの上に画像を重ね背景を表示する方法 1 2022/12/18 19:57
- Evernote Evernote(エバーノート)の文字化け 1 2022/04/05 19:30
- 画像編集・動画編集・音楽編集 AfterEffectでのシャターの挙動がおかしい 1 2023/05/07 00:38
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- その他(パソコン・周辺機器) X6 ブルートゥースレシーバー(画像あり) の、使い方を教えてください。 ボタンは、ペアリング時のボ 5 2023/04/19 19:11
- その他(動画サービス) TV(ブラビア等)で、動画(アマゾンプライム等)を確実に視聴するには 2 2022/11/26 17:58
- その他(ブラウザ) テキストを入れるときの縦線の点滅がそれ以外のブラウザ上にも表れます。 1 2022/07/29 21:55
- JavaScript jsで診断コンテンツのページ内切り替えについて 1 2023/04/14 17:31
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
iframe内をクリックさせない方...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
画像の大きさに合わせて文字の...
-
ページの上下に白い横線が入る
-
要素の幅をいろんな写真の幅に...
-
<hr>の縦バージョンはありますか?
-
htmlかcssで背景の白い枠をなく...
-
html言語で背景画像を中央...
-
CSSでサイトの背景に画像を組み...
-
ホームページ作成で不動の背景
-
背景画像をブラウザ上部に隙間...
-
background-imageにmax-width:1...
-
WEB上でディレクトリ内の画像を...
-
IE6だけ最後の文字を数文字繰り...
-
CSSサイトの印刷時のレイアウト...
-
Googleマップの埋め込みで上部...
-
サイトは中央配置、背景に画像...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
lightbox2で画像を天地左右中央...
-
画像の上にテキスト配置で、拡...
-
background-repeat CSS で切れ...
-
【Webサイト】画像が小さく表示...
-
IMGタグで画像の繰り返し使用は…
-
background-sizeの背景で最小値...
-
同じ画像 複数回使用
-
【至急お助け!】チェックボッ...
-
iframe内をクリックさせない方...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
CSSで背景画像をランダムに表示...
-
ページごとに背景画像を変更し...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
submitボタンの上に重ねた画像...
-
CSS マウスオーバーでテキスト...
おすすめ情報